Does Angular 2 differ a lot, in terms of syntax, from angular 5?
I'm asking because I got on Christmas pretty new book (published at the end of November) about Angular 2 and when I wanted to install required packages via npm, it automatically installed version 5.1.2 of angular, when the book is basing on version 2.0.0.
I wonder if I will be able to normally carry out the examples from the book, or maybe should I downgrade to version 2.0.0?
Actually I don't know if it's a topic for this forum, but I would be very if anybody could answer me.
{
"name": "angular-template",
"version": "1.0.0",
"description": "Template for angular app",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"#angular/common": "^5.1.2",
"#angular/compiler": "^5.1.2",
"#angular/core": "^5.1.2",
"#angular/forms": "^5.1.2",
"#angular/http": "^5.1.2",
"#angular/platform-browser": "^5.1.2",
"#angular/platform-browser-dynamic": "^5.1.2",
"#angular/router": "^5.1.2",
"core-js": "^2.5.3",
"systemjs": "^0.20.19",
"rxjs": "^5.5.6",
"zone.js": "^0.8.18",
"bootstrap": "^3.3.7",
"jquery": "^3.2.1"
},
"devDependencies": {
"typescript": "^2.6.2",
"live-server": "^1.2.0"
}
}
Angular team keep enhancing angular more and more. its started with angular 2.0.0 and today the latest stable release is 7.0.0 (2018-10-18).
So if you want to know each change that is added after each version, you can look at this change log file link:
https://github.com/angular/angular/blob/master/CHANGELOG.md
This way you can for example know what is removed and what feature is added in each version.
You can keep use your book, its probably a good source to learn with, but you can search in that change log file for example to see if a feature is removed or not and use the new one.
So angular 5 (5.1.2 here) is better than angular 2 because it has added many new features and many fixes that angular 2 or 4. and still under development to bring better API and bug fixes and optimizations every new release.
Related
Recently I started a new project in React v18 which uses Vite v4.1.1 as a build tool.
After installing a few libraries the initial load of the app (after running npm run dev) takes several minutes even though the Vite itself starts within a few seconds. After it, the HMR works fine and every change is reflected very fast.
I noticed that some dependencies take 1-2 minutes to fetch (in the network tab).
Network tab
In this picture, some deps are loaded from the cache but if they are not, react-router, mantime or react-query can take over a minute to load each. Here the main issue seems to be the main files of React app, which I understand even less.
Can someone explain why it takes so long and how to improve startup time?
I saw that it can be related with pre bundling but on the recent project, I didn't have such poor perf.
My deps:
"#emotion/react": "^11.10.5",
"#mantine/carousel": "^5.10.3",
"#mantine/core": "^5.10.3",
"#mantine/hooks": "^5.10.3",
"#tanstack/react-query": "^4.24.4",
"axios": "^0.27.2",
"embla-carousel-react": "^7.0.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.8.1",
"tabler-icons-react": "^1.56.0"
And dev deps:
"#types/react": "^18.0.27",
"#types/react-dom": "^18.0.10",
"#types/styled-components": "^5.1.26",
"#typescript-eslint/eslint-plugin": "^5.34.0",
"#typescript-eslint/parser": "^5.34.0",
"#vitejs/plugin-react": "^3.0.1",
"#vitejs/plugin-react-swc": "^3.1.0",
"autoprefixer": "^10.4.13",
"eslint": "^8.22.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^17.0.0",
"eslint-config-prettier": "^8.5.0",
"eslint-config-standard-with-typescript": "^22.0.0",
"eslint-import-resolver-typescript": "^3.5.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.6.0",
"postcss": "^8.4.21",
"prettier": "^2.7.1",
"sass": "^1.58.0",
"tailwindcss": "^3.2.6",
"typescript": "^4.7.4",
"vite": "^4.1.1",
"vite-plugin-eslint": "^1.8.1"
I've only come across the short note about dependency pre-bundling in docs but this doesn't cover my issue. Also saw an issue on GitHub that Tailwind can cause such a problem but I the problem persisted even before I installed Tailwind. For now have no idea what can cause such state of affair ¯\_(ツ)_/¯
I've just created my NextJS app, and the first load bundle size is about 1.5Mb. This is my first time using Nextjs, and from what I understand 1.2Mb is incredibly massive. I've attached an image of the yarn build and also of my package.json.
All pages in my app query from a database, and right now the pages are rendering as static html.
I've tried all the basic stuff, such as using ES6 imports(for components rendered conditionally), but none of that is working. I believe that the issue lies in that all my pages are first fetching data from the database (if I'm wrong please correct me), however I'm not too sure how to fix that.
I know I can fetch data directly from front end using useEffect, however I don't know if that will reduce the build size.
If someone has experience with NextJs, I'd really appreciate it if they could look at my project and let me know where I'm going wrong.
Thanks!
PACKAGE.JSON
"dependencies": {
"#chakra-ui/react": "^2.3.6",
"#emotion/react": "^11.10.4",
"#emotion/styled": "^11.10.4",
"#next/bundle-analyzer": "^13.0.2",
"dotenv": "^16.0.3",
"framer-motion": "^7.6.5",
"moralis-v1": "^1.11.0",
"next": "latest",
"react": "18.1.0",
"react-dom": "18.1.0",
"react-moralis": "^1.4.2",
"react-redux": "^8.0.4",
"web3uikit": "^0.1.159"
},
"devDependencies": {
"#types/node": "17.0.35",
"#types/react": "18.0.9",
"#types/react-dom": "18.0.5",
"autoprefixer": "^10.4.7",
"file-loader": "^6.2.0",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.2",
"typescript": "4.7.2",
"url-loader": "^4.1.1"
}
}
Bundle:
The problem seems to be in _app.js. This file is shared by all other files and it's 1.03MB. So something in there is going wrong. You have to post the contents of that file to find the problem
I'm having a hard time converting a jquery template to angular7. The original template has its own assets folder that contains several .js files that I need to load in order to get it to work.
When I start the application up with: ng serve I get the following error in the browser:
import $ from 'jquery';
Uncaught SyntaxError: Unexpected identifier
tsconfig.json
"types": [ "jquery" ],
angular.json, under scripts
"scripts": ["./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.js",
"./src/assets/js/SEVERAL_JS_FILES.js"]
package.json
"dependencies": {
"#angular/animations": "^5.2.0",
"#angular/common": "^5.2.0",
"#angular/compiler": "^5.2.0",
"#angular/core": "^5.2.0",
"#angular/forms": "^5.2.0",
"#angular/http": "^5.2.0",
"#angular/platform-browser": "^5.2.0",
"#angular/platform-browser-dynamic": "^5.2.0",
"#angular/router": "^5.2.0",
"bootstrap": "^4.1.3",
"core-js": "^2.4.1",
"rxjs": "^5.5.6",
"tslib": "^1.9.0",
"zone.js": "^0.8.19",
"popper.js": "^1.14.4",
"jquery": "^3.3.1",
},
Could someone help me to understand this better? I was thinking that I might use Babel or a separate package to handle this compilation.
Thanks.
I've managed to find a solution. It's quite simple but as Adrian commented earlier it's not advised. Thus said, I'm going to use Angular Ready plugins but just in case, here's the answer.
1 - Install Jquery.
npm install jquery — save
2 - Load in your angular.json or angular-cli.json under scripts.
"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]
3 - Download the Jquery plugin that you want via npm.
4 - Load the Jquery plugin min.js in your angular.json or angular-cli.json
5 - Consume your script in an external js file, not inside your typescript.
I just ejected from expo and everything went well but I'm now getting the following error when trying to run my ios app in Xcode :
No visible #interface for 'RCTAsyncLocalStorage' declares the selector
'initWithStorageDirectory:'
Here is part of my package.json
"dependencies": {
"axios": "^0.17.1",
"expo": "^23.0.6",
"lodash": "^4.17.4",
"moment": "^2.20.1",
"react": "16.0.0",
"react-native": "0.50.3",
"react-native-cloudinary": "^1.0.1",
"react-native-communications": "^2.2.1",
"react-native-elements": "^0.18.5",
"react-native-fetch-blob": "^0.10.8",
"react-native-gifted-chat": "^0.3.0",
"react-native-image-picker": "^0.26.7",
"react-native-image-to-base64": "^0.1.0",
"react-native-modal-datetime-picker": "^4.13.0",
"react-native-router-flux": "^4.0.0-beta.24",
"react-navigation": "^1.0.0-beta.22",
"redux-thunk": "^2.2.0"
}
I actually managed to fix it, this is how:
I updated my "react-native" dependency to the latest one available:
"https://github.com/expo/react-native/archive/sdk-23.0.0.tar.gz"
I removed all dependency that I had installed by mistake in my previous expo app that actually required react-native link using the npm uninstall --save command:
react-native-image-to-base64, react-native-cloudinary
Then I also had to remove them from the General > Linked Frameworks and Libraries
Now it works! I'm having issues with the Facebook Login now but at least it doesn't crash my app.
Good luck to you.
I feel really dumb for not realizing it sooner, but I had this issue when I forgot to run yarn after switching branches with a different Expo version.
Hope that saves someone else some debugging.
On Meteor 1.4.1.1 since I've updated to the latest Angular 2.0.1 release I struggle against this error: Zone.js has detected that ZoneAwarePromise (window|global).Promise has been overwritten
I've tried meteor update and meteor reset but the error is still there.
I've looked for some answers saying that I should load Zone.js after every other scripts. The problem is that I can't control the loading order on Meteor.
Here is my package.json dependencies:
"dependencies": {
"#angular/common": "^2.0.1",
"#angular/compiler": "^2.0.1",
"#angular/core": "^2.0.1",
"#angular/forms": "^2.0.1",
"#angular/platform-browser": "^2.0.1",
"#angular/platform-browser-dynamic": "^2.0.1",
"angular2": "^2.0.0-beta.17",
"angular2-meteor": "^0.7.0",
"angular2-meteor-polyfills": "^0.1.1",
"bcrypt": "^0.8.7",
"bluebird": "^3.4.6",
"chart.js": "^2.3.0",
"es6-shim": "^0.35.1",
"meteor-node-stubs": "^0.2.3",
"reflect-metadata": "^0.1.2",
"rxjs": "^5.0.0-beta.12",
"ui-router-ng2": "^1.0.0-beta.3",
"zone.js": "^0.6.25"
}
and here are my meteor packages:
meteor-base#1.0.4 # Packages every Meteor app needs to have
mobile-experience#1.0.4 # Packages for a great mobile UX
mongo#1.1.12 # The database Meteor supports right now
reactive-var#1.0.10 # Reactive variable for tracker
jquery#1.11.9 # Helpful client-side library
tracker#1.1.0 # Meteor's client-side reactive programming library
standard-minifier-css#1.2.0 # CSS minifier run for production mode
es5-shim#4.6.14 # ECMAScript 5 compatibility for older browsers.
ecmascript#0.5.8 # Enable ECMAScript2015+ syntax in app code
angular2-compilers#0.6.2_1
barbatus:angular2-runtime
deanius:promise
momentjs:moment
fortawesome:fontawesome
dburles:collection-helpers
accounts-password#1.3.0
promise#0.8.4
meteorhacks:ssr
email#1.1.17
jalik:ufs
jalik:ufs-local
service-configuration#1.0.10
accounts-facebook#1.0.10
accounts-google#1.0.10
accounts-twitter#1.1.11
percolate:synced-cron
shell-server`
Any ideas ?
Promise coming from zone.js is beeing overwritten by promise package which is a dependency of ecmascript and deanius:promise.
You need to remove ecmascript and use typescript everywhere (client AND server)
This worked for me.
meteor remove barbatus:angular2-runtime
meteor remove barbatus:angular2-polyfills
and/or this
npm uninstall barbatus:angular2-runtime
npm uninstall barbatus:angular2-polyfills
As described here by Richie 765:
https://github.com/Urigo/angular2-meteor/issues/413
I found out that both barbatus:angular2-runtime and barbatus:angular2-polyfills are incompatible with ecmascript. So I uninstalled them. By the way, is barbatus:angular2-runtime still used for anything? It seems it has been removed from the repo so I think there's no use for it anyway. In my project first thing I import is
import 'angular2-meteor-polyfills';
Doesn't have to be in every file, just as the first import in the file that is loaded first. /client/main.js would be a good place.