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?
This question is related to
angular
migration
upgrade
angular-ivy
Just use the official upgrade guide which will tell you what you need to do for your own particular needs:
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 firstnpm 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/[email protected] --save //upgrade ngX translate to 10.0.1 for Angular 6
5 npm install --save @ng-bootstrap/[email protected] //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
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.
{
"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
}
}
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
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
ng update @angular/cli
ng update @angular/core
ng update @angular/material
ng update rxjs
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/
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
Please run the below comments to update to Angular 6 from Angular 5
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/
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
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.
I had to re-run ng update @angular/cli for angular-cli.json to be changed to angular.json
simply run the following command:
ng update
note: this will not update globally.
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 :)
Source: Stackoverflow.com