DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Angular 10 Upgrades are Still Challenging
John Peters
John Peters

Posted on • Updated on

Angular 10 Upgrades are Still Challenging

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 Alt Text 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
Enter fullscreen mode Exit fullscreen mode
  • The error above left Angular core and cli at version 8.latest:
@angular/cdk                      8.2.3
@angular/cli                      8.3.29
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

The good news is it told us what to do...

After running :

ng update @angular/cdk @angular/material
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Some Improvements

  • npm audit
 === audit security report ===                        

found 0 vulnerabilities
Enter fullscreen mode Exit fullscreen mode

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"
  }
Enter fullscreen mode Exit fullscreen mode

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)

Hacktoberfest is happening now!



It is a month-long celebration of open source. For a lot of devs, its their introduction to open source.


Check out the Hacktoberfest tag on DEV to keep up with the latest!