angular / angular-update-guide Goto Github PK
View Code? Open in Web Editor NEWAn interactive guide to updating the version of Angular in your apps
Home Page: https://update.angular.io
An interactive guide to updating the version of Angular in your apps
Home Page: https://update.angular.io
When trying to upgrade from Angular 9 to Angular 10 using the following command, a NodeJS incompatibility error prevents the upgrade:
ng update @angular/core@10 @angular/cli@10
npm
as the package managerNode.js version v10.22.0 detected.
The Angular CLI requires a minimum Node.js version of either v12.14 or v14.15.
yarn
as the package manager:error @angular-devkit/[email protected]: The engine "node" is incompatible with this module. Expected version "^12.14.1 || >=14.0.0". Got "10.22.0"
The 7.2 -> 8.0 updae instructions imply it is mandatory to upgrade to Node.js 12. This is not necessary (10.x is still fine) and it might discourage some people from upgrading.
Related: angular/angular#30769
When following the step by step upgrade guide from 12 to 13, we are supposed to execute the following command
npx @angular/cli@13 update @angular/core@13 @angular/cli@13
This command fails with following error
npm ERR! code ETARGET
npm ERR! notarget No matching version found for @angular/cli@13.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
The proper package version should be published or the migration guide should be updated ...
If version 6 is explicitly specified during an angular cli upgrade, it skips the deletion of angular-cli.json as well as the creation of angular.json
This does not work for me:
rm -rf foo
npm install @angular/[email protected]
./node_modules/@angular/cli/bin/ng new foo
cd foo
cat package.json
npm install @angular/cli@6
./node_modules/@angular/cli/bin/ng update @angular/cli@6
./node_modules/@angular/cli/bin/ng update @angular/core@6
cat package.json
./node_modules/@angular/cli/bin/ng build
This does work for me:
rm -rf foo
npm install @angular/[email protected]
./node_modules/@angular/cli/bin/ng new foo
cd foo
cat package.json
npm install @angular/cli@6
./node_modules/@angular/cli/bin/ng update @angular/cli
./node_modules/@angular/cli/bin/ng update @angular/core
cat package.json
./node_modules/@angular/cli/bin/ng build
Check for yourself, and let me know if you're seeing the exact same thing. If you do confirm that this is the issue, I have a commit ready to update the recommendations.ts.
UA-8594346-15
@StephenFluin Do you have a plan to move update-angular-guide
to the Angular official GitHub org?
This personal repository doesnβt look official-ish. Are there any blockers?
For background angular/angular#37168
Update App Intro
This tool helps you update Angular from one version to a more recent version. In some cases, you may have to update to an intermediate version in order to reach the most recent release.
The tool performs needed migrations automatically, and provides a log of what it changed.
You can also use the CLI ng update
command to perform version updates for specific packages. See Updating to version 9.
For discussion of the update process and issues, see the Release Information section of AIO documentation.
Keeping Up to Date
Release Practices
Deprecations
We should remove this line: https://github.com/StephenFluin/angular-update-guide/blob/master/src/app/recommendations.ts#L90
Not sure why there are single quotes surrounding versions.
If I try for example the npm instructions for upgrading 4 to 4.4:
npm install @angular/animations@'^4.0.0' @angular/common@'^4.0.0' @angular/compiler@'^4.0.0' @angular/compiler-cli@'^4.0.0' @angular/core@'^4.0.0' @angular/forms@'^4.0.0' @angular/http@'^4.0.0' @angular/platform-browser@'^4.0.0' @angular/platform-browser-dynamic@'^4.0.0' @angular/platform-server@'^4.0.0' @angular/router@'^4.0.0' [email protected] rxjs@'^5.5.2'
I get:
npm ERR! notarget No compatible version found: rxjs@'5.5.2'
npm ERR! notarget Valid install targets:
npm ERR! notarget 6.0.0-alpha.0, 5.5.2, 5.5.1, 5.5.0, 5.5.0-beta.7, 5.5.0-beta.5, 5.5.0-beta.4, 5.5.0-beta.3, 5.5.0-beta.2, 5.5.0-beta.1, 5.5.0-beta.0, 5.4.3, 5.4.2, 5.4.1, 5.4.0, 5.3.3, 5.3.1, 5.3.0, 5.2.1-smooth, 5.2.0, 5.1.1, 5.1.0, 5.0.3, 5.0.2, 5.0.1, 5.0.0, 5.0.0-rc.5, 5.0.0-rc.4, 5.0.0-rc.3, 5.0.0-rc.2, 5.0.0-rc.1, 5.0.0-beta.12, 5.0.0-beta.11, 5.0.0-beta.10, 5.0.0-beta.9, 5.0.0-beta.8, 5.0.0-beta.7, 5.0.0-beta.6, 5.0.0-beta.5, 5.0.0-beta.4, 5.0.0-beta.3, 5.0.0-beta.2, 5.0.0-beta.1, 5.0.0-beta.0, 5.0.0-alpha.14, 5.0.0-alpha.13, 5.0.0-alpha.12, 5.0.0-alpha.11, 5.0.0-alpha.10
If I remove rxjs altogether, then it starts complaining about angular, which has those single quotes too:
npm ERR! notarget No compatible version found: @angular/forms@'4.0.0'
npm ERR! notarget Valid install targets:
npm ERR! notarget 5.0.0, 5.0.0-rc.9, 5.0.0-rc.8, 5.0.0-rc.7, 5.0.0-rc.6, 5.0.0-rc.5, 5.0.0-rc.4, 5.0.0-rc.3, 5.0.0-rc.2, 5.0.0-rc.1, 5.0.0-rc.0, 5.0.0-beta.7, 5.0.0-beta.6, 5.0.0-beta.5, 5.0.0-beta.4, 5.0.0-beta.3, 5.0.0-beta.2, 5.0.0-beta.1, 5.0.0-beta.0, 4.4.6, 4.4.5, 4.4.4, 4.4.3, 4.4.2, 4.4.1, 4.4.0, 4.4.0-RC.0, 4.3.6, 4.3.5, 4.3.4, 4.3.3, 4.3.2, 4.3.1, 4.3.0, 4.3.0-rc.0, 4.3.0-beta.1, 4.3.0-beta.0, 4.2.6, 4.2.5, 4.2.4, 4.2.3, 4.2.2, 4.2.1, 4.2.0, 4.2.0-rc.2, 4.2.0-rc.1, 4.2.0-rc.0, 4.2.0-beta.1, 4.2.0-beta.0, 4.1.3, 4.1.2, 4.1.1, 4.1.0, 4.1.0-rc.0, 4.1.0-beta.1, 4.1.0-beta.0, 4.0.3, 4.0.2, 4.0.1, 4.0.0, 4.0.0-rc.6, 4.0.0-rc.5, 4.0.0-rc.4, 4.0.0-rc.3, 4.0.0-rc.2, 4.0.0-rc.1, 4.0.0-rc.0, 4.0.0-beta.8, 4.0.0-beta.7, 4.0.0-beta.6, 4.0.0-beta.5, 4.0.0-beta.4, 4.0.0-beta.3, 4.0.0-beta.2, 4.0.0-beta.1, 4.0.0-beta.0, 2.4.10, 2.4.9, 2.4.8, 2.4.7, 2.4.6, 2.4.5, 2.4.4, 2.4.3, 2.4.2, 2.4.1, 2.4.0, 2.3.1, 2.3.0, 2.3.0-rc.0, 2.3.0-beta.1, 2.3.0-beta.0, 2.2.4, 2.2.3, 2.2.2, 2.2.1, 2.2.0, 2.2.0-rc.0, 2.2.0-beta.1, 2.2.0-beta.0, 2.1.2, 2.1.1, 2.1.0, 2.1.0-rc.0, 2.1.0-beta.0, 2.0.2, 2.0.1, 2.0.0, 2.0.0-rc.7, 2.0.0-rc.6, 0.3.0, 0.2.0, 0.1.1, 0.1.0
npm ERR! notarget
npm ERR! notarget This is most likely not a problem with npm itself.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
URL: https://update.angular.io/#7.0:8.0
This recommendation should refer to this page, not this
The link is correct in recommendation list: https://github.com/StephenFluin/angular-update-guide/blob/ca2753abbad878d231ec13f6f3e2cd9df41e71fb/src/app/recommendations.ts#L61
The guide should replace ng update @angular/material
with ng update @angular/material @angular/cdk
since they are always installed together. Otherwise the step doesn't work.
The method to determine if an update spans multiple major versions is incorrectly identifying one major + one minor release as multiple major versions, resulting in the "We do not recommend moving across multiple major versions" warning.
Steps to reproduce:
I'm using this tool is a good idea, but I feel like the instructions aren't specific enough for success. Right now I'm upgrading from
Angular 8.1.2 to 8.2 since the guide says I shouldn't go across more than one major version. I figured I'd go in small steps instead to eventually get to 11.0. The problem is: nowhere here does it say that I should use ng update to target that specific version, just use ng update.
I found articles like this that helped me along the way: https://stackoverflow.com/questions/52970467/ng-update-to-specific-angular-version but that should just be part of this guide, otherwise I don't quite get the point.
When I run ng update, for instance... I see this:
Using package manager: 'npm'
Collecting installed dependencies...
Found 55 dependencies.
We analyzed your package.json, there are some packages to update:
Name Version Command to update
-----------------------------------------------------------------------------------
@angular/cli 8.1.2 -> 11.2.8 ng update @angular/cli
@angular/core 8.1.2 -> 11.2.9 ng update @angular/core
rxjs 6.5.2 -> 6.6.7 ng update rxjs
There might be additional packages which don't provide 'ng update' capabilities that are outdated.
You can update the additional packages by running the update command of your package manager.
Now, clearly I don't want to go to the latest version here, I assume want the latest versions of Angular 8 which (again I assume) would be
8.2.14 for @angular/core
8.3.29 for @angular/cli
I just don't know why these steps aren't outlined and also there appears to be confusion around the "--all" flag for ng update. From the description "If true, implies that all dependencies should be updated. Defaults is false, using dependencies from the command line instead," it makes me think I would want to use that flag, but apparently I don't from other places I've read online. I think much more clarification around what ng update is expected to do and the flags for it could really use some fleshing out.
Thanks!
So I just tried to upgrade from version 7 to version 9 in my app. Unfortunately the guide here is just useless. The described steps are not really comprehensible and meaningful.
The following steps alone:
Make sure you are using Node 10 or later.
Make sure you are using Node 10.13 or later.
There are six more steps between the two. I also wonder if this guide really makes sense.
Maybe the maintainer should think about either improving the guide a lot so that it is useful or decide to stop the project and concentrate on other topics.
The Angular Update Guide breaks on Microsoft Edge 17.
Show me how to update!
button can't be clicked either. Subsequent clicks anywhere on the page results in Edge displaying a notification saying angular.io is not responding
with an option to Recover webpage
.SCRIPT28: Out of stack space
from: polyfills.7de5477b8d4c2d9a397f.js (1,3217)
ERROR Error: Could not complete the operation due to error 80020101.
[object Error]: {
description: "Could not complete the operation due to error 80020101.",
message: "Could not complete the operation due to error 80020101.",
number: -2147352319,
stack: "Error: Could not complete the operation due to error 80020101.
at it (https://update.angular.io/main.0f9a28351e902dd13d41.js:1:135267)
at e.prototype.handleError (https://update.angular.io/main.0f9a28351e902dd13d41.js:1:135476)
at Anonymous function (https://update.angular.io/main.0f9a28351e902dd13d41.js:1:151046)
at t.prototype.invoke (https://update.angular.io/polyfills.7de5477b8d4c2d9a397f.js:1:7179)
at e.prototype.run (https://update.angular.io/polyfills.7de5477b8d4c2d9a397f.js:1:2427)
at e.prototype.runOutsideAngular (https://update.angular.io/main.0f9a28351e902dd13d41.js:1:141464)
at e.prototype.tick (https://update.angular.io/main.0f9a28351e902dd13d41.js:1:151006)
at Anonymous function (https://update.angular.io/main.0f9a28351e902dd13d41.js:1:149080)
at t.prototype.invoke (https://update.angular.io/polyfills.7de5477b8d4c2d9a397f.js:1:7179)
at onInvoke (https://update.angular.io/main.0f9a28351e902dd13d41.js:1:140439)"
}
The problem is possibly originating from one (or a combination) of the following:
/src
folder of this repository, orWould that make sense to add links to tools like Craig's tslint rule
https://github.com/phenomnomnominal/angular-lazy-routes-fix to switch from route magic string loadChildren: './admin/admin.module#AdminModule'
to async function loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
?
Or maybe we be should just integrate this in the CLI update schematic π€?
@StephenFluin would you include this deprecation too as part of v6 updates to your guide?
An interactive guide you updating the version of Angular in your apps
to
An interactive guide to updating the version of Angular in your apps (beta)
For bullet point under "During the Update", link is now obsolete.
Make sure you are using Node 10 or later.
From Loaine Groner:
/deep/
is no longer supported. => replacing with ::ng-deep
for the short term. - also had this issue, but very simple to fix. It could be interesting to add this to https://update.angular.io as well
I saw people mentioning this on Twitter as well.
The 8-to-9 guide states:
If you use ngForm element selector to create Angular Forms, you should instead use ng-form.
But if I replace
<form #my-form="ngForm">
with
<form #my-form="ng-form">
then you get the error
There is no directive with "exportAs" set to "ng-form"
Seems like this instruction should be removed, as even the documentation for v9 says to use ngForm
.
Unless I'm misunderstanding what the migration instruction is actually saying?
This is a great tool and the suggested command saves a lot of time, but I'm not sure why there are quotes in it. With quotes the packages cannot be found.
npm install @angular/animations@'^5.0.0' @angular/common@'^5.0.0' @angular/compiler@'^5.0.0' @angular/compiler-cli@'^5.0.0' @angular/core@'^5.0.0' @angular/forms@'^5.0.0' @angular/http@'^5.0.0' @angular/platform-browser@'^5.0.0' @angular/platform-browser-dynamic@'^5.0.0' @angular/platform-server@'^5.0.0' @angular/router@'^5.0.0' [email protected] rxjs@'^5.5.2'
This will improve compatability with TypeScript 2.7's strictPropertyInitialization.
I have upgraded the project from angular version 8 to 9. I had faced a lot of errors and type-checking issues. So I searched for the solution, everyone suggested to disable the Ivy compiler.
So I have disabled the Ivy compiler by changing:
"options": {
"aot": false
}
But while deploying into the production server I'm getting this error.
ERROR in getInternalNameOfClass() called on a non-ES5 class: expected ShareService to have an inner class declaration
Please get back to me ASAP. My client was very frustrated about this issue. I had put a lot of time to upgrade angular, angular material and other required libraries. Everything was working fine but only deploying I'm getting this error.
package.json:
"dependencies": {
"@agm/core": "1.1.0",
"@angular/animations": "^9.1.13",
"@angular/cdk": "^9.2.4",
"@angular/common": "^9.1.13",
"@angular/compiler": "^9.1.13",
"@angular/core": "^9.1.13",
"@angular/forms": "^9.1.13",
"@angular/localize": "9.1.13",
"@angular/material": "^9.2.4",
"@angular/platform-browser": "^9.1.13",
"@angular/platform-browser-dynamic": "^9.1.13",
"@angular/platform-server": "^9.1.13",
"@angular/router": "^9.1.13",
"@fortawesome/angular-fontawesome": "^0.3.0",
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-brands-svg-icons": "^5.15.3",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@ng-bootstrap/ng-bootstrap": "4.0.4",
"@ngtools/webpack": "8.3.25",
"@nguniversal/express-engine": "^7.1.0",
"@ngx-formly/bootstrap": "5.4.3",
"@ngx-formly/core": "5.4.3",
"@ngx-share/button": "^7.1.2",
"@ngx-share/buttons": "^7.1.2",
"@ngx-share/core": "^7.1.2",
"@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0",
"@stripe/stripe-js": "^1.14.0",
"@types/google.analytics": "^0.0.39",
"@types/quill": "^2.0.6",
"bootstrap": "4.6.0",
"core-js": "2.6.5",
"elastic-builder": "^2.13.0",
"font-awesome": "4.7.0",
"hammerjs": "^2.0.8",
"jquery": "3.3.1",
"moment": "2.24.0",
"ng-intercom": "^8.0.2",
"ng-jhipster": "^0.9.3",
"ng-recaptcha": "4.3.0",
"ng2-nouislider": "^1.8.3",
"ngx-cookie": "^4.1.2",
"ngx-infinite-scroll": "7.2.0",
"ngx-quill": "9.2.0",
"ngx-sharebuttons": "^8.0.5",
"ngx-webstorage": "4.0.2",
"node-sass": "4.12.0",
"nouislider": "10.1.0",
"primeicons": "2.0.0",
"primeng": "^9.1.3",
"quill": "^1.3.7",
"quill-emoji": "^0.2.0",
"quill-mention": "^3.0.3",
"ramda": "^0.26.1",
"reflect-metadata": "0.1.13",
"rxjs": "^6.6.7",
"sockjs-client": "1.3.0",
"swagger-ui": "2.2.10",
"tether": "1.4.5",
"tslib": "^1.10.0",
"uppy": "0.30.5",
"uuid": "3.4.0",
"webstomp-client": "1.2.6",
"workbox-webpack-plugin": "3.6.3",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.901.15",
"@angular/cli": "^9.1.15",
"@angular/compiler-cli": "9.1.13",
"@types/jasmine": "3.3.9",
"@types/node": "^12.11.1",
"angular-router-loader": "0.8.5",
"angular2-template-loader": "0.6.2",
"awesome-typescript-loader": "5.2.1",
"browser-sync": "2.26.3",
"browser-sync-webpack-plugin": "2.2.2",
"cache-loader": "2.0.1",
"codelyzer": "^5.1.2",
"copy-webpack-plugin": "5.0.0",
"css-loader": "2.1.0",
"exports-loader": "0.7.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "3.0.1",
"fork-ts-checker-webpack-plugin": "0.5.2",
"friendly-errors-webpack-plugin": "1.7.0",
"generator-jhipster": "5.8.1",
"html-loader": "0.5.5",
"html-webpack-plugin": "3.2.0",
"jasmine-core": "3.3.0",
"karma": "4.0.0",
"karma-chrome-launcher": "2.2.0",
"karma-coverage": "1.1.2",
"karma-intl-shim": "1.0.3",
"karma-jasmine": "2.0.1",
"karma-junit-reporter": "1.2.0",
"karma-notify-reporter": "1.1.0",
"karma-phantomjs-launcher": "1.0.4",
"karma-remap-istanbul": "0.6.0",
"karma-sourcemap-loader": "0.3.7",
"karma-webpack": "3.0.5",
"lint-staged": "8.1.4",
"lodash": "4.17.11",
"merge-jsons-webpack-plugin": "1.0.18",
"mini-css-extract-plugin": "^0.5.0",
"moment": "2.24.0",
"moment-locales-webpack-plugin": "1.0.7",
"ngc-webpack": "^4.1.2",
"ngx-stripe": "9.0.3",
"phantomjs-prebuilt": "2.1.16",
"postcss-loader": "3.0.0",
"prettier": "1.16.4",
"proxy-middleware": "0.15.0",
"puppeteer": "1.12.2",
"rimraf": "2.6.3",
"sass-loader": "7.1.0",
"simple-progress-webpack-plugin": "1.1.2",
"source-map": "0.7.3",
"sourcemap-istanbul-instrumenter-loader": "0.2.0",
"string-replace-webpack-plugin": "0.1.3",
"style-loader": "0.23.1",
"thread-loader": "2.1.2",
"to-string-loader": "1.1.5",
"ts-loader": "5.3.3",
"ts-node": "8.0.2",
"tslint": "5.12.1",
"tslint-config-prettier": "1.18.0",
"tslint-loader": "3.6.0",
"typescript": "3.8.3",
"uglifyjs-webpack-plugin": "2.1.1",
"web-app-manifest-loader": "0.1.1",
"webpack": "4.29.5",
"webpack-cli": "3.2.3",
"webpack-dev-server": "3.2.0",
"webpack-merge": "4.2.1",
"webpack-notifier": "1.7.0",
"webpack-visualizer-plugin": "0.1.11",
"write-file-webpack-plugin": "4.5.0",
"xml2js": "0.4.19"
},
"lint-staged": {
"src//*.{ts,css,scss}": [
"prettier --write",
"git add"
]
},
"engines": {
"node": ">=8.9.0"
},
"scripts": {
"prettier:format": "yarn prettier --write 'src//*.{ts,css,scss}'",
"lint": "tslint --type-check --project tsconfig.json -e 'node_modules/**'",
"lint:fix": "yarn run lint --fix",
"ngc": "ngc -p tsconfig-aot.json",
"cleanup": "rimraf target/{aot,www}",
"clean-www": "rimraf target//www/app/{src,target/}",
"start": "yarn run webpack:dev",
"serve": "yarn run start",
"build": "yarn run webpack:prod",
"qa": "yarn run webpack:qa",
"test": "karma start src/test/javascript/karma.conf.js",
"test:watch": "yarn test -- --watch",
"webpack:dev": "yarn run webpack-dev-server -- --config webpack/webpack.dev.js --inline --hot --port=9060 --watch-content-base --env.stats=minimal",
"webpack:build:main": "yarn run webpack -- --config webpack/webpack.dev.js --env.stats=minimal",
"webpack:build": "yarn run cleanup && yarn run webpack:build:main",
"webpack:prod:main": "yarn run webpack --config webpack/webpack.prod.js --profile --verbose",
"webpack:prod": "yarn run cleanup && yarn run webpack:prod:main && yarn run clean-www",
"webpack:qa": "yarn run webpack -- --config webpack/webpack.qa.js --profile --env.stats=normal",
"webpack:test": "yarn run test",
"webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"webpack": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js",
"postinstall": "node node_modules/phantomjs-prebuilt/install.js"
}
tsconfig.json:
{
"compilerOptions": {
"downlevelIteration": true,
"target": "es2015",
"module": "esnext",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"skipLibCheck": true,
"suppressImplicitAnyIndexErrors": true,
"outDir": "target/www/app",
"lib": ["es7", "dom"],
"typeRoots": [
"node_modules/@types"
],
"baseUrl": "./",
"paths": {
"app/": ["src/main/webapp/app/"]
},
"importHelpers": true,
"allowJs": true
},
"files": [
"src/main/webapp/app/app.main.ts",
"src/main/webapp/app/polyfills.ts"
],
"include": [
"src/main/webapp/app",
"src/test/javascript/"
]
}
tsconfig-aot.json:
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true,
"skipLibCheck": true,
"outDir": "target/www/app",
"lib": ["es7", "dom"],
"typeRoots": [
"node_modules/@types"
],
"baseUrl": "./",
"paths": {
"app/": ["src/main/webapp/app/"]
},
"importHelpers": true
},
"angularCompilerOptions": {
"genDir": "target/aot",
"skipMetadataEmit" : true,
"fullTemplateTypeCheck": false,
"strictTemplates": false,
"preserveWhitespaces": true
}
}
angular.json:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"defaultProjectItem": {
"root": "src/main",
"sourceRoot": "src/main/webapp/",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"aot": false,
"outputPath": "target/www/app",
"index": "src/main/webapp//index.html",
"main": "src/main/webapp//app/app.main.ts",
"tsConfig": "src/main/webapp//../../../tsconfig.json",
"polyfills": "src/main/webapp//app/polyfills.ts",
"showCircularDependencies": false,
"assets": [
"src/main/webapp/content",
"src/main/webapp/i18n",
"src/main/webapp/favicon.ico"
],
"styles": [
"src/main/webapp/content/scss/vendor.scss",
"src/main/webapp/content/scss/global.scss",
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-light/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"node_modules/quill/dist/quill.core.css",
"node_modules/quill/dist/quill.bubble.css",
"node_modules/quill/dist/quill.snow.css"
],
"scripts": [
"node_modules/quill/dist/quill.js"
]
},
"configurations": {
"prod": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"fileReplacements": [
{
"replace": "src/main/webapp/app/environments/environment.ts",
"with": "src/main/webapp/app/environments/environment.prod.ts"
}
]
},
"dev": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"fileReplacements": [
{
"replace": "src/main/webapp/app/environments/environment.ts",
"with": "src/main/webapp/app/environments/environment.dev.ts"
}
]
},
"qa": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"fileReplacements": [
{
"replace": "src/main/webapp/app/environments/environment.ts",
"with": "src/main/webapp/app/environments/environment.qa.ts"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "defaultProjectItem:build"
},
"configurations": {}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "defaultProjectItem:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/main/webapp//",
"karmaConfig": "src/test/javascript/karma.conf.js",
"polyfills": "src/main/webapp//app/polyfills.ts",
"scripts": [],
"styles": [
"src/main/webapp/content/scss/vendor.scss",
"src/main/webapp/content/scss/global.scss"
],
"assets": [
"src/main/webapp/content",
"src/main/webapp/i18n",
"src/main/webapp/favicon.ico"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"../../../tsconfig.json",
"../../../tsconfig-aot.json"
],
"exclude": []
}
}
}
}
},
"defaultProject": "defaultProjectItem",
"cli": {
"packageManager": "yarn"
},
"schematics": {
"@schematics/angular:component": {
"inlineStyle": true,
"inlineTemplate": false,
"skipTests": true,
"prefix": "jhi",
"styleExt": "scss"
},
"@schematics/angular:directive": {
"skipTests": true,
"prefix": "jhi"
},
"@schematics/angular:guard": {
"skipTests": true
},
"@schematics/angular:pipe": {
"skipTests": true
},
"@schematics/angular:service": {
"skipTests": true
}
}
}
v13 updates are npx commands and probably should be npm commands?
In the Angular Update Guide it states that after upgrading there should be a tsconfig.base.json
:
Angular now recommends the use of a tsconfig.base.json to help organize the various typings contexts (shared, unit tests, end to end tests, application, etc). ng update will migrate you automatically.
ng update @angular/core @angular/cli
tsconfig.base.json
anywhere in the project.https://update.angular.io/#9.1:10.0
tsconfig.base.json
was added in Angular 10, but removed again in Angular 10.1.
Therefore the current instructions are incorrect when you run a ng update
that takes you to 10.1.
There should be a 10.1 upgrade guide where the following sentence is removed:
Angular now recommends the use of a tsconfig.base.json to help organize the various typings contexts (shared, unit tests, end to end tests, application, etc). ng update will migrate you automatically.
There seems to be a typo in one of the checklist items generated under During the update section when viewing the Angular Update Guide - 5.2 -> 6.0 for Advanced Apps
ngModelChange is now emitted after the value/validity is updated on its control instead of before to better match expectations. If you rely on the order of these events, you will need to
beingbegin tracking the old value in your component.
I believe being
should probably be begin
.
Followed this guide:
https://update.angular.io/?l=2&v=9.1-12.0
After running:
ng update @angular/core@11 @angular/cli@11
The guide suggests to run:
ng update @angular/material
This will update to material@12 (and strangely also to ng@12) directly.
The app also does not work when running ng serve
.
expected:
The guide should suggest to update to material@11 explicitly:
ng update @angular/material@11
Since version 11 is released the script to update angular to version 10 need to change :
ng update @angular/core @angular/cli
to
ng update @angular/core@10 @angular/cli@10
If we do not want to go straight to version 11
A nice hint for the "After the Update"-part would be to update to RxJS 7.4.
Framework changes and dependency updates
Angular v13 also features some helpful updates and important changes. First up, RxJS 7.4 is now the default for apps created with ng new. Existing apps using RxJS v6.x will have to manually update using the npm install [email protected] command. To learn more about the changes from version 6 to version 7, check out this summary on rxjs.dev.
The following might mainly be problems with tools outside of this repository, however the claims
most definitely are not true and needs to be corrected/expanded.
Steps to reproduce:
$ mkdir /tmp/test
$ cd /tmp/test
$ ng --version # Angular CLI: 11.2.15
$ ng new --defaults --strict test-a11-a12-a13
$ cd test-a11-a12-a13/
$ npx @angular/cli@12 update @angular/core@12 @angular/cli@12
$ git add .
$ git commit -m "npx @angular/cli@12 update @angular/core@12 @angular/cli@12"
$ npm run lint # Complains about tslint but runs successfully.
$ npx @angular/cli@13 update @angular/core@13 @angular/cli@13
$ git add .
$ git commit -m "npx @angular/cli@13 update @angular/core@13 @angular/cli@13"
$ npm run lint # Fails:
...
Cannot find "lint" target for the specified project.
You should add a package that implements linting capabilities.
For example:
ng add @angular-eslint/schematics
...
$
Trying to run the suggested schematic fails:
$ ng add @angular-eslint/schematics
...
An unhandled exception occurred: NOT SUPPORTED: keyword "id", use "$id" for schema ID
See "C:\Users\...\AppData\Local\Temp\ng-an9syi\angular-errors.log" for further details.
$ cat "C:\Users\...\AppData\Local\Temp\ng-an9syi\angular-errors.log"
[error] Error: NOT SUPPORTED: keyword "id", use "$id" for schema ID
at Object.code (C:\Users\...\AppData\Local\Temp\test\test-a11-a12-a13\node_modules\@angular-devkit\core\node_modules\ajv\dist\vocabularies\core\id.js:6:15)
at keywordCode (C:\Users\...\AppData\Local\Temp\test\test-a11-a12-a13\node_modules\@angular-devkit\core\node_modules\ajv\dist\compile\validate\index.js:454:13)
at C:\Users\...\AppData\Local\Temp\test\test-a11-a12-a13\node_modules\@angular-devkit\core\node_modules\ajv\dist\compile\validate\index.js:222:17
at CodeGen.code (C:\Users\...\AppData\Local\Temp\test\test-a11-a12-a13\node_modules\@angular-devkit\core\node_modules\ajv\dist\compile\codegen\index.js:439:13)
at CodeGen.block (C:\Users\...\AppData\Local\Temp\test\test-a11-a12-a13\node_modules\@angular-devkit\core\node_modules\ajv\dist\compile\codegen\index.js:568:18)
at iterateKeywords (C:\Users\...\AppData\Local\Temp\test\test-a11-a12-a13\node_modules\@angular-devkit\core\node_modules\ajv\dist\compile\validate\index.js:219:9)
at groupKeywords (C:\Users\...\AppData\Local\Temp\test\test-a11-a12-a13\node_modules\@angular-devkit\core\node_modules\ajv\dist\compile\validate\index.js:208:13)
at C:\Users\...\AppData\Local\Temp\test\test-a11-a12-a13\node_modules\@angular-devkit\core\node_modules\ajv\dist\compile\validate\index.js:192:13
at CodeGen.code (C:\Users\...\AppData\Local\Temp\test\test-a11-a12-a13\node_modules\@angular-devkit\core\node_modules\ajv\dist\compile\codegen\index.js:439:13)
at CodeGen.block (C:\Users\...\AppData\Local\Temp\test\test-a11-a12-a13\node_modules\@angular-devkit\core\node_modules\ajv\dist\compile\codegen\index.js:568:18)
$
Currently the Japanese translation only translates the steps, but it's now possible to translate the UI text with the same translation list.
CC: @lacolaco
Once this lands: angular/angular-cli#10439
Since Ivy doesn't support patching lifecycle hooks there should be one more migration checkbox hint to remind users of that fact.
I used to have a small function to automatically unsubscribe from observables
export function componentDestroyed(component: Destroyable): Subject<any> {
if (component.unsubscribeSubject$) {
return component.unsubscribeSubject$;
}
const oldNgOnDestroy = component.ngOnDestroy;
component.unsubscribeSubject$ = new Subject();
component.ngOnDestroy = () => {
if (oldNgOnDestroy) {
oldNgOnDestroy.apply(component);
}
component.unsubscribeSubject$.next(undefined);
component.unsubscribeSubject$.complete();
};
return component.unsubscribeSubject$;
}
which was used like takeUntil(componentDestroyed(this))
in Angular 9 that does not work anymore.
dependencies:
https://github.com/StephenFluin/angular-update-guide/blob/1274d9d1e5cbcacb8f0390da772b6f403055cbb5/package.json#L29
devDependencies:
https://github.com/StephenFluin/angular-update-guide/blob/1274d9d1e5cbcacb8f0390da772b6f403055cbb5/package.json#L39
yarn output:
warning package.json: "dependencies" has dependency "codelyzer" with range "^4.4.4" that collides with a dependency in "devDependencies" of the same name with version "^5.0.1"
Is this intentional?
Hi, @StephenFluin !
Many thanks for this cool stuff π
I have one suggestion about the recommended package versions, which are defined in the ng update
command.
According to my attachment, if a user wants to migrate, for example, to 8.0.[latest patch version]
- he or she should execute ng update @angular/cli@^8.0 @angular/core@^8.0
to install correct dependencies. But according to your guide - the latest patch version of 8th major will be installed (8.2.14 in this case) because we don't supply a minor version for these packages. I think it'll be simpler for users. Thanks!
The Node 12.20.0 or later hyperlink from the update guide page redirects to a non-existing page.
angular/angular-cli#14589 (comment) makes a good point. With @clydinβs change to require a clean git
status before running ng update
, the instructions here need to include at least a mention about committing files between runs of ng update @angular/cli @angular/core
and ng update @angular/material
.
Another option is to tell users about the --allow-dirty
command which will let them otherwise follow this guide w/o issues.
The Update Guide currently discourages migration between multiple majors like v5 => v7, but rather v5 => v6 => v7.
However, when selectng v5 as starting point and v6 (which is not latest) as target, the instructions are still presented in a way that the latest versions would be installed. Like for the CLI package
npm install -g @angular/cli
npm install @angular/cli
ng update @angular/cli
It should rather be guarded, s.t. the v6
of the package is installed.
(as a side-note, I'd also remove the instruction to install the @angular/cli
as global package. It's not necessary for the upgrade to happen)
When using the Angular Update Guide for updating from 10 to 11 there is the following recommendation:
"If you use locale data arrays, this API will now return readonly arrays. If you were mutating them (e.g. calling sort(), push(), splice(), etc) then your code will not longer compile. If you need to mutate the array, you should now take a copy (e.g. by calling slice()) and mutate the copy."
What does "this API" means? What does it refer to?
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report
[ ] Performance issue
[ ] Feature request
[x] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:
the update doc : https://update.angular.io/ to me is unclear.
I figured out by myself that "I use ngUpgrade" means "I'm upgrading from AngularJS to whatever" , it should have this or similar info tacked on to help out the user. otherwise the user has no idea whether to tick or not. the name could easily be confused for something more global.
but that's a minor issue.
the real issue is at :
If you import any animations services or tools from
@angular/core
, you should import them from@angular/animations
Ok so I glean from that, that it'll be something to do with animations.... wait exclusively? it does say "or tools". that's too generic it could mean anything, it doesn't say "or animation tools".
plus how does this concern a angular 5.2 user? won't he already have been using @angular/animations
instead?
then why is it saying I should look for that? what am I looking for? an example would go such a long way.
The upgrade guide should have a link to the repo to allow for people to have input. I'm not even sure if this repo is the actual source of update.angular.io
. If there was a link to the repo on the page, there would be a clear, hard link.
Maybe a github style symbol in the top-bar to the right or in some kind of footer.
The link to update-node-js-latest-version page at "Make sure you are using Node 10 or later." is broken. It links to "404 - Sorry, this page does not exist." page.
When upgrading from Angular v8.x to Angular v9
There is a typo in the ng update command
instead of
ng update @angular/core@8 @angular/cli@8
It should be
ng update @angular/core@9 @angular/cli@9
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.