Want to upgrade project from Angular v5 to Angular v6

Question

As Angular 6 is here, I want to upgrade or move my angular 5 client application to angular 6, but I'm not getting any tutorial or anything which can guide me through.

According to me I just need to run a new Angular CLI and then have to move my older source to new project. I read the Angular 6 is using a new renderer called Ivy. Will I have to change my project according to Ivy?

https://update.angular.io/ – lealceldeiro May 04 '18 at 18:46 — lealceldeiro, May 04 '18 at 18:46

Ashish Jain · Accepted Answer · 2018-10-28T07:16:15.707

Upgrade from Angular v6 to Angular v7

Version 7 of Angular has been released Official Angular blog link. Visit official angular update guide https://update.angular.io for detailed information. These steps will work for basic angular 6 apps using Angular Material.

ng update @angular/cli 
ng update @angular/core
ng update @angular/material

Upgrade from Angular v5 to Angular v6

Version 6 of Angular has been released Official Angular blog link. I have mentioned general upgrade steps below, but before and after the update you need to make changes in your code to make it workable in v6, for that detailed information visit official website https://update.angular.io .

Upgrade Steps (largely taken from the official Angular Update Guide for a basic Angular app using Angular Material):

Make sure NodeJS version is 8.9+ if not update it.
Update Angular cli globally and locally, and migrate the old configuration .angular-cli.json to the new angular.json format by running the following:
```
npm install -g @angular/cli  
npm install @angular/cli  
ng update @angular/cli
```
Update all of your Angular framework packages to v6,and the correct version of RxJS and TypeScript by running the following:
```
ng update @angular/core
```
Update Angular Material to the latest version by running the following:
```
ng update @angular/material
```
RxJS v6 has major changes from v5, v6 brings backwards compatibility package rxjs-compat that will keep your applications working, but you should refactor TypeScript code so that it doesn't depend on rxjs-compat. To refactor TypeScript code run following:
```
npm install -g rxjs-tslint   
rxjs-5-to-6-migrate -p src/tsconfig.app.json
```
Note: Once all of your dependencies have updated to RxJS 6, remove rxjs- compat as it increases bundle size. please see this RxJS Upgrade Guide for more info.
```
npm uninstall rxjs-compat
```
Done run ng serve to check it.
If you get errors in build refer https://update.angular.io for detailed info.

Upgrade from Angular v5 to Angular 6.0.0-rc.5

Upgrade rxjs to 6.0.0-beta.0, please see this RxJS Upgrade Guide for more info. RxJS v6 has breaking change hence first make your code compatible to latest RxJS version.
Update NodeJS version to 8.9+ (this is required by angular cli 6 version)
Update Angular cli global package to next version.
```
npm uninstall -g @angular/cli
npm cache verify
```
if npm version is < 5 then use npm cache clean
```
npm install -g @angular/cli@next
```

Change angular packages versions in package.json file to ^6.0.0-rc.5

"dependencies": {
  "@angular/animations": "^6.0.0-rc.5",
  "@angular/cdk": "^6.0.0-rc.12",
  "@angular/common": "^6.0.0-rc.5",
  "@angular/compiler": "^6.0.0-rc.5",
  "@angular/core": "^6.0.0-rc.5",
  "@angular/forms": "^6.0.0-rc.5",
  "@angular/http": "^6.0.0-rc.5",
  "@angular/material": "^6.0.0-rc.12",
  "@angular/platform-browser": "^6.0.0-rc.5",
  "@angular/platform-browser-dynamic": "^6.0.0-rc.5",
  "@angular/router": "^6.0.0-rc.5",
  "core-js": "^2.5.5",
  "karma-jasmine": "^1.1.1",
  "rxjs": "^6.0.0-uncanny-rc.7",
  "rxjs-compat": "^6.0.0-uncanny-rc.7",
  "zone.js": "^0.8.26"
},
"devDependencies": {
  "@angular-devkit/build-angular": "~0.5.0",
  "@angular/cli": "^6.0.0-rc.5",
  "@angular/compiler-cli": "^6.0.0-rc.5",
  "@types/jasmine": "2.5.38",
  "@types/node": "~8.9.4",
  "codelyzer": "~4.1.0",
  "jasmine-core": "~2.5.2",
  "jasmine-spec-reporter": "~3.2.0",
  "karma": "~1.4.1",
  "karma-chrome-launcher": "~2.0.0",
  "karma-cli": "~1.0.1",
  "karma-coverage-istanbul-reporter": "^0.2.0",
  "karma-jasmine": "~1.1.0",
  "karma-jasmine-html-reporter": "^0.2.2",
  "postcss-loader": "^2.1.4",
  "protractor": "~5.1.0",
  "ts-node": "~5.0.0",
  "tslint": "~5.9.1",
  "typescript": "^2.7.2"
}

Next update Angular cli local package to next version and install above mentioned packages.

rm -rf node_modules dist # use rmdir /S/Q node_modules dist in Windows 
Command Prompt; use rm -r -fo node_modules,dist in Windows PowerShell
npm install --save-dev @angular/cli@next
npm install

The Angular CLI configuration format has been changed from angular cli 6.0.0-rc.2 version, and your existing configuration can be updated automatically by running the following command. It will remove old config file .angular-cli.json and will write new angular.json file.

ng update @angular/cli --migrate-only --from=1.7.4

Note :- If you get following error "The Angular Compiler requires TypeScript >=2.7.2 and <2.8.0 but 2.8.3 was found instead". run following command :

npm install typescript@2.7.2

https://update.angular.io/ does not work in Edge at this time. It loads OK, but once you start to use it a bit it causes some kind of problem that causes the page not to respond and the browser to ask if you would like to recover the page. — Devon Holcombe, May 07 '18 at 19:22
Step 5 I'm getting `bash: rxjs-5-to-6-migrate: command not found`. Any thoughts? — Kyle Krzeski, May 08 '18 at 18:48
when i run `ng update @angular/core` in my ionic project folder, I get error `Invalid range: "*"` — smk, May 12 '18 at 06:20
After all above steps I was getting this stupid issue: Could not find module `"@angular-devkit/build-angular"` from... So that fixed by `npm install @angular-devkit/build-angular --save-dev`. Other than that I had to update libraries that were using previous rxjs-compat, like `ng update @ngx-translate/core`, `ng update @ng-bootstrap/ng-bootstrap`, because few of them wasn't properly updated. — Arsen Khachaturyan, May 14 '18 at 17:21
This command : ng update @angular/cli ,did not work but this worked instead : ncu -u — Mozart, May 29 '18 at 15:37
if you receive "Your global Angular CLI version (6.0.8) is greater than your local version (1.6.8). The local Angular CLI version is used." use npm install @angular/cli@latest — Nakres, Jun 30 '18 at 16:38

score 20 · Answer 2 · answered May 04 '18 at 01:30

Angular 6 has just been released.

https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4

Here is what worked for one of my smaller projects

npm install -g @angular/cli
npm install @angular/cli
ng update @angular/cli --migrate-only --from=1.7.0
ng update @angular/core
npm install rxjs-compat
ng serve

You might need to update your run scripts in package.json For eg. if you use flags like "app" and "environment" These have been updated to "project" and "configuration" respectively.

Refer https://update.angular.io/ for more detailed guide.

After step 2 I had to convert the following .json files (tsconfig, angular-cli.json, tslint) to UTF8, without BOM. I got an Invalid JSON character error at that step. — Benjamin, May 28 '18 at 13:41

score 16 · Answer 3 · answered May 14 '18 at 09:20

16

Just use the official upgrade guide which will tell you what you need to do for your own particular needs:

https://update.angular.io/

answered May 14 '18 at 09:20

Valentin Despa

40,712
18
80
106

1

this should realy be the accepted answer as it answers all other upgrade questions – theTechRebel Apr 03 '19 at 13:38

Uday Vunnam · Answer 4 · 2018-06-03T12:24:14.547

Check the step by step upgrade details from Angular 5 to Angular 6. These provides details on issues you encounter during upgrade and how to resolve them.

Update your node version to 8 or above and Install Angular cli latest globally by npm i -g @angular/cli@latest.
Angular 6 uses angular.json as configuration file instead of .anguar-cli.json. Also tslint has been changed. Check https://github.com/angular/angular-cli/wiki/angular-workspace for latest configuration details. You have to move any of your existing configuration to new configuration file.
To do this create another dummy project with latest cli using ng new ‘your-project’ and same defaults such as prefix, style etc you used earlier for your project. Create new project with cli https://github.com/angular/angular-cli/wiki/new
Use https://update.angular.io/ to check what has been changed from your current version of Angular → Angular 6. It provides usage of how to change/fix them.
Follow the steps above and copy/update the angular.json file created in step2. Do npm i in your project to get all dependencies and do npm update
Now comes the big part. RxJS upgrade and resolving conflicts. RxJS has standardised imports of operators and Observable creators with this release. Do npm i -g rxjs-tslint and add below lint configuration in tslint.json

{
  "rulesDirectory": [
    "node_modules/rxjs-tslint"
  ],
  "rules": {
    "rxjs-collapse-imports": true,
    "rxjs-pipeable-operators-only": true,
    "rxjs-no-static-observable-methods": true,
    "rxjs-proper-imports": true
  }
}

Now run ng lint --fix. This fixes few items but most of the remaining issues will be highlighted and you have to fix it manually.

Operators Name change:

do -> tap, 
catch -> catchError, 
switch -> switchAll, 
finally -> finalize

All operators moved to rxjs/operators

import { map, filter, reduce } from 'rxjs/operators';

Observable creation methods are moved to rxjs

   import { Observable, Subject, of, from } from 'rxjs';

You are all set. Welcome to Angular 6 :) Check my blog post here on how to upgrade

score 4 · Answer 5 · answered Jun 02 '18 at 22:24

4

I had to re-run ng update @angular/cli for angular-cli.json to be changed to angular.json

answered Jun 02 '18 at 22:24

Kris Bonev

552
1
3
16

bereket gebredingle · Answer 6 · 2018-09-22T22:00:39.717

2

Complete guide

-----------------With angular-cli--------------------------

1. Update CLI globally and locally

Using NPM ( make sure that you have node version 8+ )

npm uninstall -g @angular/cli npm cache clean npm install -g @angular/cli@latest npm i @angular/cli --save
Using Yarn

yarn remove @angular/cli yarn global add @angular/cli yarn add @angular/cli

2.Update dependencies

ng update @angular/cli
ng update @angular/core
ng update @angular/material
ng update rxjs

Angular 6 now depends on TypeScript 2.7 and RxJS 6

Normally that would mean that you have to update your code everywhere RxJS imports and operators are used, but thankfully there’s a package that takes care of most of the heavy lifting:

npm i -g rxjs-tslint 

//or using yarn

yarn global add rxjs-tslint

Then you can run rxjs-5-to-6-migrate

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

finally remove rxjs-compat

npm uninstall rxjs-compat

// or using Yarn

yarn remove rxjs-compat

Refer to this link https://alligator.io/angular/angular-6/

-------------------Without angular-cli-------------------------

So you have to manually update your package.json file.

Then run

 npm update
 npm install --save rxjs-compat
 npm i -g rxjs-tslint
 rxjs-5-to-6-migrate -p src/tsconfig.app.json

edited Sep 22 '18 at 22:00

answered May 05 '18 at 12:44

bereket gebredingle

12,064
3
36
47

I'm getting `bash: rxjs-5-to-6-migrate: command not found` when trying to run the rxjs-5-to-6-migrate command. Any thoughts? – Kyle Krzeski May 08 '18 at 18:49
1

@WilliamHampshire did you run npm install -g rxjs-tslint – Joe May 10 '18 at 00:20
Yup no idea what it its @Joe – Kyle Krzeski May 10 '18 at 01:04
maybe you don't have latest tslint? – Joe May 10 '18 at 01:09
1

Do you know how to do this without using angular cli? In my project I do everything manually – Daniel May 11 '18 at 11:58
I added a question because the migration tool doesn't seem to be functioning, but got downvoted. I'm updating everything manually. https://stackoverflow.com/questions/50240220/rxjs-5-to-6-migrate-cannot-find-any-possible-migrations – Joe May 11 '18 at 23:18
@Daniel I hv updated my answer. So that you can upgrade manually. – bereket gebredingle May 12 '18 at 02:35
When run rxjs-5-to-6-migrate command, I got 'cannot find any possible migration'. What this line means – Karthikeyan Vellingiri Oct 15 '18 at 12:19

user2716958 · Answer 7 · 2018-06-01T09:24:28.767

Please run the below comments to update to Angular 6 from Angular 5

ng update @angular/cli
ng update @angular/core
npm install rxjs-compat (In order to support older version rxjs 5.6 )
npm install -g rxjs-tslint (To change from rxjs 5 to rxjs 6 format in code. Install globally then only will work)
rxjs-5-to-6-migrate -p src/tsconfig.app.json (After installing we have to change it in our source code to rxjs6 format)
npm uninstall rxjs-compat (Remove this finally)

score 1 · Answer 8 · answered May 05 '18 at 11:13

As Vinay Kumar pointed out that it will not update global installed Angular CLI. To update it globally just use following commands:

npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest

Note if you want to update existing project you have to modify existing project, you should change package.json inside your project.

There are no breaking changes in Angular itself but they are in RxJS, so don't forget to use rxjs-compat library to work with legacy code.

  npm install --save rxjs-compat

I wrote a good article about installation/updating Angular CLI http://bmnteam.com/angular-cli-installation/

score 0 · Answer 9 · answered May 04 '18 at 07:43

0

simply run the following command:

ng update

note: this will not update globally.

answered May 04 '18 at 07:43

Vinay Kumar

386
2
8

score 0 · Answer 10 · answered May 08 '18 at 13:49

This is how I make it work.

My Environment:

Angular CLI Global : 6.0.0, Local: 1.7.4, Angular: 5.2, Typescript 2.5.3

Note: To enable ng Update you need to install Angular CLI 6.0 first npm install -g @angular/cli or npm install @angular/cli

ng update //update Angular Package core/common/complier... to 6.0.0
ng update @angular/cli //change angular-cli.json to angular.json

optional if you have angular-material 5.4.2, ngx-translate 9.1.1, ng-bootstrap/ng-bootstrap 1.1.1:

ng update @angular/material //upgrade to 6.0.1
npm install @ngx-translate/core@10.0.1 --save //upgrade ngX translate to 10.0.1 for Angular 6

5 npm install --save @ng-bootstrap/ng-bootstrap@2.0.0 //for ng-bootstrap

If you use Observable and get the error:

ERROR in node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'. node_modules/rxjs/observable/of.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/observable/of'.

Change: import { Observable } from "rxjs/Observable"; import { of } from 'rxjs/observable/of';

To

import { Observable, of } from "rxjs";

Angular CLI issue: https://github.com/angular/angular-cli/issues/10621

score 0 · Answer 11 · edited Sep 03 '18 at 09:47

There are few steps to upgrade 2/4/5 to Angular 6.

npm uninstall --save-dev angular-cli
npm install --save-dev @angular/cli@latest
npm install

To fix the issue related to "angular.json" :-

ng update @angular/cli --migrate-only --from=1.7.4

Store MIGRATION
https://github.com/ngrx/platform/blob/master/MIGRATION.md#ngrxstore

RXJS MIGRATION
https://www.academind.com/learn/javascript/rxjs-6-what-changed/

Hoping this will help you :)

Qin Chenfeng · Answer 12 · 2021-05-20T00:43:20.200

0

Try this first

ng update @angular/cli @angular/core

if got error try this

ng update @angular/cli @angular/core --allow-dirty

See here

edited May 20 '21 at 00:43

answered May 20 '21 at 00:37

Qin Chenfeng

451
6
5