This morning I needed to prototype a new project to work on problems in an isolated way.
I switched to a folder that had Angular 8 as its last version. So I thought no problem I'll just update this to 10.
Absolute Stupidity Manifests Immediately
To update we need to follow their recommendations here. I learned from the past to follow their rules, which are to upgrade each release until we get to 10.
Go to latest version of 8 first
- ng update @angular/core@8 @angular/cli@8
It detects the release is not current, downloads a temporary version and dies after it detects non commited changes. My bad, but a total waste of time. - Ok, commit the files and retry.
Now go to version 9
- ng update @angular/core@9 @angular/cli@9. Once again the temporary version is installed first. Followed by this:
[error] Error: Incompatible peer dependencies found.
Peer dependency warnings when installing dependencies means that
those dependencies might not work correctly together.
You can use the '--force' option to ignore incompatible peer dependencies
and instead address these warnings later.
at _validateUpdatePackages
(...\AppData\Local\Temp\
node_modules\angular\cli\node_modules\
schematics\update\update\
index.js:153:15)at
..AppData\Local\Temp\
node_modules\ @angular\cli\
node_modules\schematics\update\update
\index.js:691:13
- The error above left Angular core and cli at version 8.latest:
@angular/cdk 8.2.3
@angular/cli 8.3.29
Force Version 9 Update
Just because peer dependencies failed, which I already know will be fixed such as the Angular Schematics, it's time to ignore those errors.
- ng update @angular/core@9 @angular/cli@9 --force
- This causes the entire temp reinstall of course. It works bringing Angular to version 9.
- Migrations run ok.
- Your project has been updated to Angular version 9!
Where are we?
Per the instructions we run 'npm outdated' just to see what's going on.
PS D:\Source\jpeters\MatTableBug> npm outdated
Package Current Wanted Latest Location
@angular-devkit/build-angular 0.901.12 0.901.12 0.1002.0 mat-table-bug
@angular/animations 9.1.12 9.1.12 10.2.0 mat-table-bug
@angular/cdk 8.2.3 8.2.3 10.2.5 mat-table-bug
@angular/cli 9.1.12 9.1.12 10.2.0 mat-table-bug
@angular/common 9.1.12 9.1.12 10.2.0 mat-table-bug
@angular/compiler 9.1.12 9.1.12 10.2.0 mat-table-bug
@angular/compiler-cli 9.1.12 9.1.12 10.2.0 mat-table-bug
@angular/core 9.1.12 9.1.12 10.2.0 mat-table-bug
@angular/forms 9.1.12 9.1.12 10.2.0 mat-table-bug
@angular/language-service 9.1.12 9.1.12 10.2.0 mat-table-bug
@angular/material 8.2.3 8.2.3 10.2.5 mat-table-bug
@angular/platform-browser 9.1.12 9.1.12 10.2.0 mat-table-bug
@angular/platform-browser-dynamic 9.1.12 9.1.12 10.2.0 mat-table-bug
@angular/router 9.1.12 9.1.12 10.2.0 mat-table-bug
@types/jasmine 3.3.16 3.3.16 3.6.0 mat-table-bug
@types/node 12.19.2 12.19.2 14.14.5 mat-table-bug
codelyzer 5.2.2 5.2.2 6.0.1 mat-table-bug
jasmine-core 3.4.0 3.4.0 3.6.0 mat-table-bug
jasmine-spec-reporter 4.2.1 4.2.1 6.0.0 mat-table-bug
karma 4.1.0 4.1.0 5.2.3 mat-table-bug
karma-chrome-launcher 2.2.0 2.2.0 3.1.0 mat-table-bug
karma-coverage-istanbul-reporter 2.0.6 2.0.6 3.0.3 mat-table-bug
karma-jasmine 2.0.1 2.0.1 4.0.1 mat-table-bug
protractor 5.4.4 5.4.4 7.0.0 mat-table-bug
ts-node 7.0.1 7.0.1 9.0.0 mat-table-bug
tslib 1.14.1 1.14.1 2.0.3 mat-table-bug
tslint 5.15.0 5.15.0 6.1.3 mat-table-bug
typescript 3.8.3 3.8.3 4.0.5 mat-table-bug
zone.js 0.10.3 0.10.3 0.11.2 mat-table-bug
ng-version shows
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.901.12
@angular-devkit/build-angular 0.901.12
@angular-devkit/build-optimizer 0.901.12
@angular-devkit/build-webpack 0.901.12
@angular-devkit/core 9.1.12
@angular-devkit/schematics 9.1.12
@angular/cdk 8.2.3
@angular/material 8.2.3
@ngtools/webpack 9.1.12
@schematics/angular 9.1.12
@schematics/update 0.901.12
rxjs 6.6.3
typescript 3.8.3
webpack 4.42.0
Notice that Angular CDK and Material are still at 8? Why updates skip the cdk and material packages is beyond me. They're in @Angular for Pete's sake.
- ng update
- Installs new temp version again. We are on the forth temp version install.
- This update is to check our progress, it will tell us that the CDK and Material need to be updated.
On to version 10
Per instructions we now try to get to 10.
- ng update @angular/core @angular/cli
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1002.0
@angular-devkit/build-angular 0.1002.0
@angular-devkit/core 10.2.0
@angular-devkit/schematics 10.2.0
@angular/cdk 8.2.3
@angular/material 8.2.3
@schematics/angular 10.2.0
@schematics/update 0.1002.0
rxjs 6.6.3
typescript 4.0.5
Nope not yet, even though this is where Angular recommends nothing else. We can see that the CDK and Material still aren't there yet.
Update the CDK and Material
Running ng update again.
- ng update
- This time it will recommend updates just for the Material and CDK packages.
We analyzed your package.json, there are some packages to update:
Name Version Command to update
--------------------------------------------------------------------------------
@angular/cdk 8.2.3 -> 10.2.5 ng update @angular/cdk
@angular/material 8.2.3 -> 10.2.5 ng update @angular/material
The good news is it told us what to do...
After running :
ng update @angular/cdk @angular/material
Check if Version 10 is installed
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1002.0
@angular-devkit/build-angular 0.1002.0
@angular-devkit/core 10.2.0
@angular-devkit/schematics 10.2.0
@angular/cdk 10.2.5
@angular/material 10.2.5
@schematics/angular 10.2.0
@schematics/update 0.1002.0
rxjs 6.6.3
typescript 4.0.5
Yes!
Validate and Commit
- ng build
- "Quick" Commit all the changes before anything else goes south.
It's built and saved, ship it!
Karma, Jasmine, Types, etc.
Funny how Angular includes these as dependencies in it's own tooling, but the migration doesn't appear to update these.
Package Current Wanted Latest Location
@types/jasmine 3.3.16 3.3.16 3.6.0 mat-table-bug
@types/node 12.19.2 12.19.2 14.14.5 mat-table-bug
codelyzer 5.2.2 5.2.2 6.0.1 mat-table-bug
jasmine-core 3.5.0 3.5.0 3.6.0 mat-table-bug
jasmine-spec-reporter 5.0.2 5.0.2 6.0.0 mat-table-bug
karma 5.0.9 5.0.9 5.2.3 mat-table-bug
ts-node 7.0.1 7.0.1 9.0.0 mat-table-bug
zone.js 0.10.3 0.10.3 0.11.2 mat-table-bug
Some Improvements
- npm audit
=== audit security report ===
found 0 vulnerabilities
I've run updates many times on many projects. Each time is a new challenge and who knows what is really happening in the trenches.
package.json?
"dependencies": {
"@angular/animations": "~10.2.0",
"@angular/cdk": "~10.2.5",
"@angular/common": "~10.2.0",
"@angular/compiler": "~10.2.0",
"@angular/core": "~10.2.0",
"@angular/forms": "~10.2.0",
"@angular/material": "^10.2.5",
"@angular/platform-browser": "~10.2.0",
"@angular/platform-browser-dynamic": "~10.2.0",
"@angular/router": "~10.2.0",
"rxjs": "~6.6.3",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1002.0",
"@angular/cli": "~10.2.0",
"@angular/compiler-cli": "~10.2.0",
"@angular/language-service": "~10.2.0",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~7.0.0",
"tslint": "~6.1.0",
"typescript": "~4.0.5"
}
Overall Grade
This is a "D" or "D-". There should be one command only
- ng migrate [8,10], actually it should detect the current version
- ng migrate 10
Top comments (0)