Want to upgrade project from Angular v5 to Angular v6
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?
Solution 1:
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 [email protected]
Solution 2:
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.