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

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)

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.

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.

• https://blog.angular.io/angular-v13-is-now-available-cce66f7bc296

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.

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.

v13 updates are npx commands and probably should be npm commands?

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.

UA-8594346-15

The Node 12.20.0 or later hyperlink from the update guide page redirects to a non-existing page.

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!

Once this lands: angular/angular-cli#10439

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 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

I'm submitting a...

[ ] 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.

Overview

The Angular Update Guide breaks on Microsoft Edge 17.

My Setup

• Windows 10 (April 2018 Update)
• Microsoft Edge 42.17134.1.0
• Microsoft EdgeHTML 17.17134

Steps to reproduce

1. Open https://update.angular.io/ and wait for the page to load.
2. On the main form, click one of the dropdown controls to view the options list on the corresponding dropdown. For example, click the Package Manager dropdown.
3. Attempt to close the open dropdown menu of the corresponding dropdown. You can do this by either:
   • selecting the same value (as before) from the open menu.
   • selecting a different value from the open menu.
   • clicking outside the open menu area to close the menu and leave the old value selected on the field.
4. The page becomes un-responsive after this. The form doesn't respond any more. The 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.
   
5. After some-time the following error message shows on the browser console:

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)"
}

More Information

The problem is possibly originating from one (or a combination) of the following:

• the JavaScript engine in Edge 17,
• the Angular component code inside the /src folder of this repository, or
• the Angular version being used, or
• the Angular Material version or Select Component being used, or
• some other underlying library/component

We should remove this line: https://github.com/StephenFluin/angular-update-guide/blob/master/src/app/recommendations.ts#L90

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.

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.

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

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.

angular/angular-cli#10311

📚 Docs bug report

Description

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.

🔬 Minimal Reproduction

1. Open an Angular 9 directory and run ng update @angular/core @angular/cli
2. See that there is no tsconfig.base.json anywhere in the project.

What's the affected URL?**

https://update.angular.io/#9.1:10.0

Expected vs Actual Behavior**

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.

@StephenFluin would you include this deprecation too as part of v6 updates to your guide?

angular/angular#22633

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:

• Select 5.0 as your beginning release.
• Select 6.0 as your target release.
• At this point, you have no error.
• Select 6.1 as your target release.
• You now have a warning about updating across multiple major versions, despite only moving one.

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
}
}
}

It should be TypeScript 2.3.4 and ^5.4.2.

When trying to upgrade from Angular 9 to Angular 10 using the following command, a NodeJS incompatibility error prevents the upgrade:

Command

ng update @angular/core@10 @angular/cli@10

Error with npm as the package manager

Node.js version v10.22.0 detected.
The Angular CLI requires a minimum Node.js version of either v12.14 or v14.15.

Error with 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"

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 ...

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

See screenshot:

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

@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?

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?

For bullet point under "During the Update", link is now obsolete.

Make sure you are using Node 10 or later.

• 404 - Sorry, this page does not exist.

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?

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)

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 being begin tracking the old value in your component.

I believe being should probably be begin.

The following might mainly be problems with tools outside of this repository, however the claims

• "There aren't currently any changes needed before moving between these versions."
• "There aren't currently any changes needed after moving between these versions."

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)
$

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!

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.

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

Would 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 🤔?

For background angular/angular#37168

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?

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.

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

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.