If you are still using older version of Angular like 8, 9 here is the complete guide to upgrade your Angular app to latest version. This guide will help you to update your Angular app to version 11.
Before starting the migration, you need to install latest Angular version. Check your current Angular version using this command .
ng --version
You need to install latest Angular CLI first globally. Before that uninstall existing Angular CLI.
npm uninstall @angular/cli -g npm cache clean –-force
After running above commands now install latest Angular CLI version.
npm install @angular/cli -g
Once it is installed you can check the version.
ng –-version
You should see below message in the terminal. In this case it is showing version 11 as the latest. You are all set to use Angular 11 version to create your new app. Hold on, You are just few steps away to migrate your Angular app.
Let’s assume you have project named as shopping-cart which is currently using Angular 10. Have a look at the package.json file.
"dependencies": {
"@angular/animations": "~10.0.3",
"@angular/common": "~10.0.3",
"@angular/compiler": "~10.0.3",
"@angular/core": "~10.0.3",
"@angular/forms": "~10.0.3","devDependencies": {
"@angular-devkit/build-angular": "~0.1000.1",
"@angular/cli": "~10.0.1",
"@angular/compiler-cli": "~10.0.3",
"@angular/language-service": "~10.0.3",
So dependencies and devdependencies are using Angular 10. Your local Angular CLI version and project version is 10. It’s time to upgrade our shopping cart app. Open the terminal and use below command to upgrade your project local Angular version.
ng update @angular/core @angular/cli
While upgrading I ran into below problems.
Package "@angular/fire" has an incompatible peer dependency to "@angular/common" (requires ">=6.0.0 <8" (extended), would install "11.1.1"). Package "codelyzer" has an incompatible peer dependency to "@angular/compiler" (requires ">=2.3.1 <10.0.0 || >9.0.0-beta <10.0.0 || >9.1.0-beta <10.0.0 || >9.2.0-beta <10.0.0" (extended), would install "11.1.1"). Package "codelyzer" has an incompatible peer dependency to "@angular/core" (requires ">=2.3.1 <10.0.0 || >9.0.0-beta <10.0.0 || >9.1.0-beta <10.0.0 || >9.2.0-beta <10.0.0" (extended),
would install "11.1.1").
Package "ng2-smart-table" has an incompatible peer dependency to "@angular/forms" (requires "^9.0.0" (extended), would install "11.1.1").
Package "@angular/fire" has an incompatible peer dependency to "@angular/platform-browser" (requires ">=6.0.0 <8" (extended), would install "11.1.1"). Package "@angular/fire" has an incompatible peer dependency to "@angular/platform-browser-dynamic" (requires ">=6.0.0 <8" (extended), would install "11.1.1").
× Migration failed: Incompatible peer dependencies found.
You can use the ‘–force’ flag to ignore incompatible peer dependencies and instead address these warnings later. So I used –force flag to update the core and cli Angular package. I have older version of libraries such as angular fire , angular devkit which are incompatible to latest version and hence Angular throws error while upgrading. All you have to do is just ignore these warnings and use below commands. You can later upgrade those libraries.
ng update @angular/core @angular/cli --force
Above command will force angular to update the latest version of CLI and Angular core packages. Once all done you will see below message in the terminal.
Remove deprecated options from 'angular.json' that are no longer present in v11.
UPDATE angular.json (3918 bytes)
Migration completed.
Update workspace dependencies to match a new v11 project.
UPDATE package.json (1585 bytes)
√ Packages installed successfully.
Migration completed.
Please check your local version as well using ng –version command.
_ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / | | | | |/ _ | '| | | | | | | / | | | | (| | || | | (| | | | || | | |
// __| ||_, |__,||__,|| ____|||
|_/
Angular CLI: 11.1.2
Node: 10.16.3
OS: win32 x64
Angular: 11.1.1
… animations, common, compiler, compiler-cli, core, forms
… language-service, platform-browser, platform-browser-dynamic
… router
Ivy Workspace: Yes
Package Version
@angular-devkit/architect 0.1101.2
@angular-devkit/build-angular 0.1101.2
@angular-devkit/core 11.1.2
@angular-devkit/schematics 11.1.2
@angular/cli 11.1.2
@angular/fire 5.4.2
@schematics/angular 11.1.2
@schematics/update 0.1101.2
rxjs 6.5.5
typescript 4.1.3
Sometimes you might get below warning while upgrading the packages.
Your global Angular CLI version (11.1.1) is greater than your local version (9.0.7). The local Angular CLI version is used.
To disable this warning use “ng config -g cli.warnings.versionMismatch false”.
All you have to do is just upgrade your local(Project) angular/cli.
ng update @angular/cli
- 登录 发表评论