upgrade helix-front to Angular 9.1

[micahstubbs]

https://update.angular.io/?l=3&v=8.2-9.1

see:

• upgrade helix-front to Angular 8.2 #2088 for the 8.2 upgrade
• upgrade helix-front to Angular 7.2 #2084 for the 7.2 upgrade
• upgrade helix-front to Angular 6.1 #2053 for motivation, details, and history.

[micahstubbs]

Angular CLI version	Angular version	Node.js version	TypeScript version	RxJS version
~9.1.15	~9.1.13	^10.13.0 || ^12.11.1	>= 3.6.5 <= 3.8.3	^6.5.5

https://gist.github.com/LayZeeDK/c822cc812f75bb07b7c55d07ba2719b3

[micahstubbs]

Now let's try:

NG_DISABLE_VERSION_CHECK=1 npx @angular/cli@8 update @angular/core@8 @angular/cli@8 --create-commits

No changes, this is already done. Good, that's what we expected.

[micahstubbs]

Now this one, which should bring us to version 9 of Angular.

NG_DISABLE_VERSION_CHECK=1 npx @angular/cli@9 update @angular/core@9 @angular/cli@9 -C --force

which produces these logs:

Using package manager: 'npm'
Collecting installed dependencies...
Found 64 dependencies.
Fetching dependency metadata from registry...
                  Package "tsickle" has an incompatible peer dependency to "typescript" (requires "~3.5.3", would install "3.8.3").
    Updating package.json with dependency @angular/cli @ "9.1.15" (was "8.3.29")...
    Updating package.json with dependency @angular/core @ "9.1.13" (was "8.2.14")...
    Updating package.json with dependency @angular-devkit/build-angular @ "0.901.15" (was "0.803.29")...
    Updating package.json with dependency @angular/compiler-cli @ "9.1.13" (was "8.2.14")...
    Updating package.json with dependency @angular/platform-browser-dynamic @ "9.1.13" (was "8.2.14")...
    Updating package.json with dependency @angular/platform-browser @ "9.1.13" (was "8.2.14")...
    Updating package.json with dependency @angular/common @ "9.1.13" (was "8.2.14")...
    Updating package.json with dependency typescript @ "3.8.3" (was "3.5.3")...
    Updating package.json with dependency @angular/compiler @ "9.1.13" (was "8.2.14")...
    Updating package.json with dependency @angular/forms @ "9.1.13" (was "8.2.14")...
    Updating package.json with dependency @angular/animations @ "9.1.13" (was "8.2.14")...
    Updating package.json with dependency @angular/platform-server @ "9.1.13" (was "8.2.14")...
    Updating package.json with dependency @angular/router @ "9.1.13" (was "8.2.14")...
    Updating package.json with dependency zone.js @ "0.10.3" (was "0.9.1")...
UPDATE package.json (3061 bytes)
✔ Packages installed successfully.
  Committed migration step (577ee0592): Angular CLI update for packages
   - @angular/core@9, @angular/cli@9.
** Executing migrations of package '@angular/cli' **

❯ Angular Workspace migration.
  Update an Angular CLI workspace to version 9.
UPDATE angular.json (3892 bytes)
UPDATE tsconfig.json (467 bytes)
UPDATE client/tsconfig.app.json (226 bytes)
UPDATE client/tsconfig.spec.json (296 bytes)
UPDATE package.json (3038 bytes)
✔ Packages installed successfully.
  Migration completed.
  Committed migration step (8bc390063): @angular/cli migration - workspace-version-9.

❯ Lazy loading syntax migration.
  Update lazy loading syntax to use dynamic imports.
  Migration completed.
  No changes to commit after migration.

❯ Replace deprecated 'styleext' and 'spec' Angular schematic options.
UPDATE angular.json (3889 bytes)
  Migration completed.
  Committed migration step (29158018c): @angular/cli migration - schematic-options-9.

** Executing migrations of package '@angular/core' **

❯ Static flag migration.
  Removes the `static` flag from dynamic queries.
  As of Angular 9, the "static" flag defaults to false and is no longer required for your view
  and content queries.
  Read more about this here: https://v9.angular.io/guide/migration-dynamic-flag
  Migration completed.
  No changes to commit after migration.

❯ Missing @Injectable and incomplete provider definition migration.
  In Angular 9, enforcement of @Injectable decorators for DI is a bit stricter and 
  incomplete provider definitions behave differently.
  Read more about this here: https://v9.angular.io/guide/migration-injectable
  Migration completed.
  No changes to commit after migration.

❯ ModuleWithProviders migration.
  In Angular 9, the ModuleWithProviders type without a generic has been deprecated.
  This migration adds the generic where it is missing.
  Read more about this here: https://v9.angular.io/guide/migration-module-with-providers
    Could not migrate all instances of ModuleWithProviders
    Please manually fix the following failures:
    ⮑   client/app/app-routing.module.ts@148:14: Type is not statically analyzable.
  Migration completed.
  No changes to commit after migration.

❯ Renderer to Renderer2 migration.
  As of Angular 9, the Renderer class is no longer available.
  Renderer2 should be used instead.
  Read more about this here: https://v9.angular.io/guide/migration-renderer
  Migration completed.
  No changes to commit after migration.

❯ Undecorated classes with decorated fields migration.
  As of Angular 9, it is no longer supported to have Angular field decorators on a class 
  that does not have an Angular decorator.
  Read more about this here: https://v9.angular.io/guide/migration-undecorated-classes
  Migration completed.
  No changes to commit after migration.

❯ Undecorated classes with DI migration.
  As of Angular 9, it is no longer supported to use Angular DI on a class that does not have
  an Angular decorator.
  Read more about this here: https://v9.angular.io/guide/migration-undecorated-classes
  Migration completed.
  No changes to commit after migration.


Your project has been updated to Angular version 9!
For more info, please see: https://v9.angular.io/guide/updating-to-version-9

[micahstubbs]

We see a few actions we need to take based on these logs:

tsickle version

problem

Package "tsickle" has an incompatible peer dependency to 
"typescript" (requires "~3.5.3", would install "3.8.3").

solution

npm i tsickle@0.38.1

ModuleWithProviders migration

problem

❯ ModuleWithProviders migration.
  In Angular 9, the ModuleWithProviders type without a generic has been deprecated.
  This migration adds the generic where it is missing.
  Read more about this here: https://v9.angular.io/guide/migration-module-with-providers
    Could not migrate all instances of ModuleWithProviders
    Please manually fix the following failures:
    ⮑   client/app/app-routing.module.ts@148:14: Type is not statically analyzable.
  Migration completed.
  No changes to commit after migration.

solution

// client/app/app-routing.module.ts@148
export const AppRoutingModule: ModuleWithProviders<RouterModule> = RouterModule.forRoot(HELIX_ROUTES)

[micahstubbs]

Now let's fix other peer dep warnings:

@swimlane/ngx-datatable@16.1.1 @angular/common@<9.0.0
@swimlane/ngx-datatable@16.1.1 @angular/core@<9.0.0
@swimlane/ngx-datatable@16.1.1 @angular/platform-browser@<9.0.0

npm i @swimlane/ngx-datatable@17.1.0

which gives us this new peer dep warning:

@swimlane/ngx-datatable@17.1.0 requires a peer of rxjs@~6.5.5

Let's address this with:

 npm i rxjs@6.5.5

[micahstubbs]

Now, let's update @angular/material:

NG_DISABLE_VERSION_CHECK=1 npx @angular/cli@9 update @angular/material@9 --force

Which produce these logs:

Using package manager: 'npm'
Collecting installed dependencies...
Found 64 dependencies.
Fetching dependency metadata from registry...
                  Package "@angular/flex-layout" has an incompatible peer dependency to "@angular/cdk" (requires "^8.0.0-rc.0", would install "9.2.4").
    Updating package.json with dependency @angular/material @ "9.2.4" (was "8.2.3")...
    Updating package.json with dependency @angular/cdk @ "9.2.4" (was "8.2.3")...
UPDATE package.json (3063 bytes)
✔ Packages installed successfully.
** Executing migrations of package '@angular/material' **

❯ Updates Angular Material to v9
    Could not find TypeScript project for project: helix-front-e2e

    ⚠  General notice: The HammerJS v9 migration for Angular Components is not able to migrate tests. Please manually clean up tests in your project if they rely on HammerJS.
    Read more about migrating tests: https://git.io/ng-material-v9-hammer-migrate-tests

      ✓  Updated Angular Material to version 9

UPDATE client/app/shared/dialog/input-dialog/input-dialog.component.ts (1024 bytes)
UPDATE client/app/shared/dialog/alert-dialog/alert-dialog.component.ts (587 bytes)
UPDATE client/app/shared/dialog/confirm-dialog/confirm-dialog.component.ts (828 bytes)
UPDATE client/app/shared/helper.service.ts (982 bytes)
UPDATE client/app/app.component.ts (2660 bytes)
UPDATE client/app/cluster/cluster-detail/cluster-detail.component.ts (6349 bytes)
UPDATE client/app/shared/node-viewer/node-viewer.component.ts (10018 bytes)
UPDATE client/app/shared/data-table/data-table.component.ts (2258 bytes)
UPDATE client/app/cluster/cluster-list/cluster-list.component.ts (2777 bytes)
UPDATE client/app/shared/material.module.ts (2250 bytes)
UPDATE package.json (3037 bytes)
✔ Packages installed successfully.
  Migration completed.

** Executing migrations of package '@angular/cdk' **

❯ Updates the Angular CDK to v9
    Could not find TypeScript project for project: helix-front-e2e

      ✓  Updated Angular CDK to version 9

  Migration completed.

and these changed files:

	modified:   client/app/app.component.ts
	modified:   client/app/cluster/cluster-detail/cluster-detail.component.ts
	modified:   client/app/cluster/cluster-list/cluster-list.component.ts
	modified:   client/app/shared/data-table/data-table.component.ts
	modified:   client/app/shared/dialog/alert-dialog/alert-dialog.component.ts
	modified:   client/app/shared/dialog/confirm-dialog/confirm-dialog.component.ts
	modified:   client/app/shared/dialog/input-dialog/input-dialog.component.ts
	modified:   client/app/shared/helper.service.ts
	modified:   client/app/shared/material.module.ts
	modified:   client/app/shared/node-viewer/node-viewer.component.ts
	modified:   package-lock.json
	modified:   package.json

[micahstubbs]

Possible action items from the @angular/material update:

• Could not find TypeScript project for project: helix-front-e2e
• ⚠ General notice: The HammerJS v9 migration for Angular Components is not able to migrate tests. Please manually clean up tests in your project if they rely on HammerJS. Read more about migrating tests: https://git.io/ng-material-v9-hammer-migrate-tests
• npm WARN @angular/flex-layout@8.0.0-beta.27 requires a peer of @angular/cdk@^8.0.0-rc.0

[micahstubbs]

npm WARN @angular/flex-layout@8.0.0-beta.27 requires a peer of @angular/cdk@^8.0.0-rc.0

let's try:

npm i @angular/flex-layout@9.0.0-beta.31

blame
tags

[micahstubbs]

Oooh this is a useful command:

npm outdated

Package                                  Current         Wanted          Latest  Location
@angular-devkit/build-angular           0.901.15       0.901.15          13.3.5  helix-front
@angular/animations                       9.1.13         9.1.13          13.3.7  helix-front
@angular/cdk                               9.2.4          9.2.4          13.3.7  helix-front
@angular/cli                              9.1.15         9.1.15          13.3.5  helix-front
@angular/common                           9.1.13         9.1.13          13.3.7  helix-front
@angular/compiler                         9.1.13         9.1.13          13.3.7  helix-front
@angular/compiler-cli                     9.1.13         9.1.13          13.3.7  helix-front
@angular/core                             9.1.13         9.1.13          13.3.7  helix-front
@angular/flex-layout               9.0.0-beta.31  9.0.0-beta.31  13.0.0-beta.38  helix-front
@angular/forms                            9.1.13         9.1.13          13.3.7  helix-front
@angular/material                          9.2.4          9.2.4          13.3.7  helix-front
@angular/platform-browser                 9.1.13         9.1.13          13.3.7  helix-front
@angular/platform-browser-dynamic         9.1.13         9.1.13          13.3.7  helix-front
@angular/platform-server                  9.1.13         9.1.13          13.3.7  helix-front
@angular/router                           9.1.13         9.1.13          13.3.7  helix-front
@swimlane/ngx-charts                      13.0.4         13.0.4          20.1.0  helix-front
@swimlane/ngx-datatable                   17.1.0         17.1.0          20.0.0  helix-front
@swimlane/ngx-graph                        7.0.0          7.2.0           8.0.0  helix-front
@types/hammerjs                           2.0.35         2.0.41          2.0.41  helix-front
@types/jasmine                            2.5.38         2.5.38           4.0.3  helix-front
@types/lodash                           4.14.120       4.14.120        4.14.182  helix-front
@types/node                             12.20.51       12.20.51         17.0.32  helix-front
@types/request                             2.0.9         2.48.8          2.48.8  helix-front
ajv                                        6.9.1         6.12.6          8.11.0  helix-front
angulartics2                               2.5.0          2.5.0          12.1.0  helix-front
body-parser                               1.18.2         1.20.0          1.20.0  helix-front
codelyzer                                  5.2.2          5.2.2           6.0.2  helix-front
concurrently                               3.5.1          3.6.1           7.1.0  helix-front
core-js                                    2.5.3         2.6.12          3.22.5  helix-front
d3-shape                                   1.3.7          1.3.7           3.1.0  helix-front
dotenv                                     4.0.0          4.0.0          16.0.1  helix-front
express-session                           1.17.2         1.17.3          1.17.3  helix-front
jasmine-core                               2.5.2          2.5.2           4.1.1  helix-front
jasmine-spec-reporter                      3.2.0          3.2.0           7.0.0  helix-front
karma                                      1.4.1          1.4.1          6.3.19  helix-front
karma-chrome-launcher                      2.0.0          2.0.0           3.1.1  helix-front
karma-cli                                  1.0.1          1.0.1           2.0.0  helix-front
karma-coverage-istanbul-reporter           0.2.3          0.2.3           3.0.3  helix-front
karma-jasmine                              1.1.1          1.1.2           5.0.0  helix-front
karma-jasmine-html-reporter                0.2.2          0.2.2           1.7.0  helix-front
ldapjs                                     1.0.2          1.0.2           2.3.2  helix-front
lodash                                   4.17.15        4.17.21         4.17.21  helix-front
ngx-clipboard                             12.1.2         12.3.1          15.1.0  helix-front
ngx-json-viewer                            2.4.0          2.4.0           3.0.2  helix-front
ngx-vis                                    0.1.0          0.1.0           3.1.0  helix-front
nodemon                                   1.11.0         1.11.0          2.0.16  helix-front
protractor                                 5.1.2          5.1.2           7.0.0  helix-front
request                                   2.83.0         2.88.2          2.88.2  helix-front
rxjs                                       6.5.5          6.6.7           7.5.5  helix-front
ts-node                                    2.0.0          2.0.0          10.7.0  helix-front
tsickle                                   0.38.1         0.38.1          0.46.0  helix-front
tslib                                     1.14.1         1.14.1           2.4.0  helix-front
tslint                                     5.8.0         5.20.1           6.1.3  helix-front
typescript                                 3.8.3          3.8.3           4.6.4  helix-front
vis                                       4.21.0         4.21.0      4.21.0-EOL  helix-front
zone.js                                   0.10.3         0.10.3          0.11.5  helix-front

[micahstubbs]

[micahstubbs]

Bound CSS styles and classes previously were applied with a "last change wins" strategy, but now follow a defined precedence. Learn more about Styling Precedence.

[micahstubbs]

If you use ngForm element selector to create Angular Forms, you should instead use ng-form.

We used this in two places.

[micahstubbs]

We have updated the tsconfig.app.json to limit the files compiled. If you rely on other files being included in the compilation, such as a typings.d.ts file, you need to manually add it to the compilation.

It doesn't look like this applies to us.

[micahstubbs]

With Angular 9 Ivy is now the default rendering engine, for any compatibility problems that might arise, read the Ivy compatibility guide.

In your application projects, you can remove entryComponents NgModules and any uses of ANALYZE_FOR_ENTRY_COMPONENTS. They are no longer required with the Ivy compiler and runtime. You may need to keep these if building a library that will be consumed by a View Engine application.

This may cause problems. Let's test and see.

[micahstubbs]

Let's test the upgrade from Angular 8.2 to Angular 9.1.

• npm install works
• npm rm type:check:watch shows 0 TypeScript errors
• npm run lint runs and passes All files pass linting.
• npm run build works
• npm start works, with 0 errors in the browser console.
• npm run test runs and passes.

npm start works as expected, and recognizes our proxy config in proxy.conf.json.

Helix UI renders with 0 errors and 1 warning in the browser console. The warning is understandable since the piwik telemetry library is not configured.

npm run test results