Angular 10 Upgrades are Still Challenging
Published: 2020-10-27 16:19:42

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**

<sub>To update we need to follow [their recommendations here](https://update.angular.io/?v=8.2-10.0). I learned from the past to follow their rules, which are to upgrade each release until we get to 10. 
</sub>

**Go to latest version of 8 first**

- ng update @angular/core@8 @angular/cli@8
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2bx86u2l772oaswyw7f7.png)
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! 
</sub>

**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