According to the upgrade recommendations, you should upgrade from Angular 5 to Angular 6, and then from Angular 6 to Angular 7.

This article is for those who want to upgrade from Angular 5 to Angular 6.

This post is for those who want to upgrade from Angular 6 to Angular 7.

ng --versionYou can view the current version

Before the upgrade

1. Switch to HttpClientModule and HttpClient Service

If the project has HttpModule and Http Service, switch to HttpClientModule and HttpClient Service.

HttpClient has several features:

  • There is no need to call.json() to map the returned data to JSON format, which is the default
  • Support for interceptors

For details, see HttpClient

2. If you have any animation services or tools imported from @Angular/core, import them from @Angular/animations

3. Replace ngOutletContext with ngTemplateOutletContext

4. Replace CollectionChangeRecord with IterableChangeRecord

upgrade

1. Make sure you useNode 8 or later

2. Upgrade Angular CLI (global and local)

npm install -g @angular/cli
npm install @angular/cli
ng update @angular/cli
Copy the code

To upgrade to Angular6, add @ to the end of each line with the version number you want, for example: NPM install -g @angular/[email protected].

3. Migrate the configuration to the current version of angular.json

ng update @angular/cli --migrate-only --from=1
Copy the code

Ps: Angular5 The following configuration file name is angular-cli.json

4. Upgrade the Angular framework package to V6, and upgrade RxJS and TypeScript.

ng update @angular/core
Copy the code

5. Useng updateView updates

If something still needs to be updated, a comparison between the current version number and the latest version number is displayed.

After the upgrade

Deprecated RXJS 6 features are removed using rxJs-tsLint automatic update rules

For most applications, this would mean running the following two lines:

npm install -g rxjs-tslint

rxjs-5-to-6-migrate -p src/tsconfig.app.json

Here are the Easter eggs

Uninstall and install the specified version of Angular(degrade)

There are a lot of errors reported after the upgrade, which cannot be resolved temporarily. If you want to return to the original version, what should you do?

1. Uninstall the current version of Angular CLI

npm uninstall -g @angular/cli
npm uninstall @angular/cli
Copy the code

2. Clear the cache to ensure clean uninstallation

npm cache verify 
Copy the code

Unable to uninstall? Mandatory: NPM cache verify –force

Remember to confirm ng –version after uninstallation

3. Install the specified version

NPM install -g @angular/[email protected] NPM install @angular/[email protected]Copy the code

This version corresponds to Angular 5.2.11

【 References 】

Official Angular upgrade Guide

Upgrade from Angular 5 to Angular 6

Unmount and install the specified version of Angular CLI

Statement: this article is original, forward please indicate the source, thank you ~