upgrade helix-front to Angular 9.1 #2092

micahstubbs · 2022-05-12T19:59:04Z

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 · 2022-05-12T20:00:46Z

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 · 2022-05-12T20:07:38Z

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 · 2022-05-12T20:10:32Z

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 · 2022-05-12T20:16:44Z

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 · 2022-05-12T20:24:10Z

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 · 2022-05-12T20:29:38Z

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 · 2022-05-12T20:33:50Z

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 · 2022-05-12T20:38:43Z

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 · 2022-05-12T20:40:47Z

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 · 2022-05-12T20:41:34Z

micahstubbs · 2022-05-12T20:43:39Z

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 · 2022-05-12T20:44:48Z

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

We used this in two places.

micahstubbs · 2022-05-12T20:45:25Z

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 · 2022-05-12T20:46:00Z

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 · 2022-05-12T20:48:33Z

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

micahstubbs · 2022-05-12T20:49:09Z

npm i 
audited 2036 packages in 7.283s

93 packages are looking for funding
  run `npm fund` for details

found 154 vulnerabilities (16 low, 65 moderate, 49 high, 24 critical)
  run `npm audit fix` to fix them, or `npm audit` for details

micahstubbs · 2022-05-12T21:18:23Z

Here are the full logs from running npm run build. It fails with several errors. Let's work through each error here, one by one.

micahstubbs · 2022-05-12T22:01:38Z

Deep Import Warning

Warning: Entry point 'angulartics2' contains deep imports into

/helix/helix-front/node_modules/rxjs/ReplaySubject
/helix/helix-front/node_modules/rxjs/add/operator/filter

This is probably not a problem, but may cause the compilation of entry points to be out of order.

npm i angulartics2@9.1.0

blame
commit
tags

This works, and uncovers the piwik deep import change.

import { Angulartics2Piwik } from 'angulartics2/piwik';

is what we need to do now.

micahstubbs · 2022-05-12T22:22:38Z

Bundle Size Warnings

WARNING in Exceeded maximum budget. All figures kB.

file	budget	excess	total
client/app/history/history-list/history-list.component.scss	6	56.2	62.2
client/app/resource/resource-detail/resource-detail.component.scss	6	56.2	62.2
client/app/cluster/cluster-list/cluster-list.component.scss	6	56.3	62.3
client/app/shared/node-viewer/node-viewer.component.scss	6	56.5	62.5
client/app/shared/data-table/data-table.component.scss	6	56.3	62.3

Let's improve the usefulness of this by specifying one budget of 500k for the initial js needed to bootstrap the app.

              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb"
                }
              ],

https://angular.io/guide/build#configuring-size-budgets

micahstubbs · 2022-05-12T22:24:45Z

no ng-form directive found

client/app/shared/dialog/input-dialog/input-dialog.component.html:20:43 - error NG8003: 
# No directive found with exportAs 'ng-form'.

20 <form (ngSubmit)="onSubmit()" #inputForm="ng-form">
                                             ~~~~~~~

  client/app/shared/dialog/input-dialog/input-dialog.component.ts:7:16
    7   templateUrl: './input-dialog.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component InputDialogComponent.

client/app/shared/dialog/confirm-dialog/confirm-dialog.component.html:20:43 - error NG8003:
# No directive found with exportAs 'ng-form'.

20 <form (ngSubmit)="onCancel()" #inputForm="ng-form">
                                             ~~~~~~~

  client/app/shared/dialog/confirm-dialog/confirm-dialog.component.ts:7:16
    7   templateUrl: './confirm-dialog.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ConfirmDialogComponent.

https://stackoverflow.com/questions/39559296/typescript-s-angular-framework-error-there-is-no-directive-with-exportas-set

Find: ng-form
Replace: ngForm

fixes this issue.

micahstubbs · 2022-05-12T22:31:23Z

ngx-vis: not compatible with Angular Ivy

ERROR in node_modules/ngx-vis/ngx-vis.d.ts:2:22 - error NG6002: 
# Appears in the NgModule.imports of DashboardModule, 
# but could not be resolved to an NgModule class.

# This likely means that the library (ngx-vis) 
# which declares VisModule has not been processed correctly by ngcc, 
# or is not compatible with Angular Ivy. 

# Check if a newer version of the library is available, and update if so. 
# Also consider checking with the library's authors 
# to see if the library is expected to be compatible with Ivy.

2 export declare class VisModule {

Let's try:

npm i ngx-vis@3.1.0

blame
tags

micahstubbs · 2022-05-12T22:36:44Z

a few new peer dep warnings:

ngx-vis@3.1.0 requires vis-data@^6.5.1
ngx-vis@3.1.0 requires vis-util@^4.0.0
vis-network@7.10.2 requires @egjs/hammerjs@^2.0.0
vis-network@7.10.2 requires component-emitter@^1.3.0
vis-network@7.10.2 requires uuid@^3.4.0 || ^7.0.0 || ^8.0.0
vis-network@7.10.2 requires vis-data@^6.2.1
vis-network@7.10.2 requires vis-util@^3.0.0 || ^4.0.0
vis-timeline@7.5.1 requires @egjs/hammerjs@^2.0.0
vis-timeline@7.5.1 requires component-emitter@^1.3.0
vis-timeline@7.5.1 requires keycharm@^0.3.0 || ^0.4.0
vis-timeline@7.5.1 requires uuid@^3.4.0 || ^7.0.0 || ^8.0.0
vis-timeline@7.5.1 requires vis-data@^6.3.0 || ^7.0.0
vis-timeline@7.5.1 requires vis-util@^3.0.0 || ^4.0.0 || ^5.0.0
vis-timeline@7.5.1 requires xss@^1.0.0

Let's install the required peer deps that have obvious versions:

npm i vis-data@6.5.1 
npm i vis-util@4.0.0
npm i @egjs/hammerjs@2.0.17
npm i component-emitter@1.3.0

as well as the ones with less obvious versions:

npm i uuid@7
npm i keycharm@0.3.0
npm i xss@1

We are left with this warning. We will ignore it for now.

npm WARN ngx-vis@3.1.0 requires a peer of keycharm@^0.2.0 but none is installed. You must install peer dependencies yourself.

micahstubbs · 2022-05-12T22:49:08Z

Ah hah! We have a new error. It seems there are breaking changes in ngx-vis.

ERROR in client/app/dashboard/dashboard.component.ts:13:10 - error TS2305: 
Module '"../../../node_modules/ngx-vis/ngxvis"' has no exported member 'VisNode'.

13 import { VisNode, VisNodes, VisEdges, VisNetworkService, VisNetworkData, VisNetworkOptions } from 'ngx-vis';
            ~~~~~~~
client/app/dashboard/dashboard.component.ts:13:19 - error TS2305: 
Module '"../../../node_modules/ngx-vis/ngxvis"' has no exported member 'VisNodes'.

13 import { VisNode, VisNodes, VisEdges, VisNetworkService, VisNetworkData, VisNetworkOptions } from 'ngx-vis';
                     ~~~~~~~~
client/app/dashboard/dashboard.component.ts:13:29 - error TS2305: 
Module '"../../../node_modules/ngx-vis/ngxvis"' has no exported member 'VisEdges'.

13 import { VisNode, VisNodes, VisEdges, VisNetworkService, VisNetworkData, VisNetworkOptions } from 'ngx-vis';
                               ~~~~~~~~
client/app/dashboard/dashboard.component.ts:13:58 - error TS2305: 
Module '"../../../node_modules/ngx-vis/ngxvis"' has no exported member 'VisNetworkData'.

13 import { VisNode, VisNodes, VisEdges, VisNetworkService, VisNetworkData, VisNetworkOptions } from 'ngx-vis';
                                                            ~~~~~~~~~~~~~~
client/app/dashboard/dashboard.component.ts:13:74 - error TS2305: 
Module '"../../../node_modules/ngx-vis/ngxvis"' has no exported member 'VisNetworkOptions'.

13 import { VisNode, VisNodes, VisEdges, VisNetworkService, VisNetworkData, VisNetworkOptions } from 'ngx-vis';

possibly related https://stackoverflow.com/questions/66987715/why-am-i-getting-no-exported-member-errors-when-attempting-to-upgrade-angular

micahstubbs · 2022-05-12T22:59:28Z

Actually, let's try this instead, since it is the last version before the breaking changes were introduced:

npm i ngx-vis@2.3.2

Sigh, it looks like need to roll up our sleeves and upgrade our code to adapt to the breaking changes.

ERROR in node_modules/ngx-vis/ngx-vis.d.ts:2:22 - error NG6002: Appears in the NgModule.imports of DashboardModule, but could not be resolved to an NgModule class.

This likely means that the library (ngx-vis) which declares VisModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

2 export declare class VisModule {
                       ~~~~~~~~~
client/app/dashboard/dashboard.module.ts:21:14 - error NG6002: Appears in the NgModule.imports of AppModule, but itself has errors

21 export class DashboardModule { }
                ~~~~~~~~~~~~~~~

micahstubbs · 2022-05-13T19:50:33Z

It looks like we can refer to these diffs in the demo/network/network-example.component.ts example to figure out how to migrate our own code that uses the network drawing features of ngx-vis.

Okay, it looks like those diffs had all the information that we needed. This should be fixed. The dashboard network vis code should now be updated to use the new syntax from ngx-vis@3.

micahstubbs · 2022-05-13T20:28:11Z

🎉 build successful

npm run build

> helix-front@1.2.1 build /helix/helix-front
> rm -rf dist && mkdir dist && ng build --aot --prod && tsc -p server

Generating ES5 bundles for differential loading...
ES5 bundle generation complete.

chunk {0} runtime-es2015.0dae8cbc97194c7caed4.js (runtime) 1.45 kB [entry] [rendered]
chunk {0} runtime-es5.0dae8cbc97194c7caed4.js (runtime) 1.45 kB [entry] [rendered]
chunk {2} polyfills-es2015.5f609f3a45acf61c5516.js (polyfills) 72.9 kB [initial] [rendered]
chunk {3} polyfills-es5.37963c72e258c43b9fb8.js (polyfills-es5) 166 kB [initial] [rendered]
chunk {1} main-es2015.678e317952713d0c3cc5.js (main) 3.01 MB [initial] [rendered]
chunk {1} main-es5.678e317952713d0c3cc5.js (main) 3.17 MB [initial] [rendered]
chunk {4} styles.7cb77b61ea0f6a800d90.css (styles) 89.9 kB [initial] [rendered]
Date: 2022-05-13T20:27:35.303Z - Hash: 9b4f4b2b06b29a310a50 - Time: 121044ms

WARNING in budgets: Exceeded maximum budget for initial-es2015. Budget 500 kB was not met by 2.68 MB with a total of 3.17 MB.

WARNING in budgets: Exceeded maximum budget for initial-es5. Budget 500 kB was not met by 2.93 MB with a total of 3.42 MB.

micahstubbs · 2022-05-13T20:31:28Z

              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "3503kb"
                }
              ],

This will silence the bundle size warnings.

micahstubbs · 2022-05-13T20:32:16Z

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

❌ 3 Test Failures

micahstubbs · 2022-05-13T20:36:58Z

Let's look at these test failures one by one.

Failed: R3InjectorError(DynamicTestModule)[Angulartics2Piwik -> Angulartics2 -> RouterlessTracking -> RouterlessTracking]: 
  NullInjectorError: No provider for RouterlessTracking!

NullInjectorError: R3InjectorError(DynamicTestModule)[Angulartics2Piwik -> Angulartics2 -> RouterlessTracking -> RouterlessTracking]: 
  NullInjectorError: No provider for RouterlessTracking!
    at NullInjector.push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.NullInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:937:1)
    at R3Injector.push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.R3Injector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:11616:1)
    at R3Injector.push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.R3Injector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:11616:1)
    at injectInjectorOnly (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:822:1)
    at Module.ɵɵinject (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:827:1)
    at Object.Angulartics2_Factory [as factory] (http://localhost:9876/_karma_webpack_/node_modules/angulartics2/__ivy_ngcc__/fesm5/angulartics2.js:139:102)
    at R3Injector.push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.R3Injector.hydrate (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:11788:1)
    at R3Injector.push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.R3Injector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:11605:1)
    at injectInjectorOnly (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:822:1)
    at Module.ɵɵinject (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:827:1)

https://stackoverflow.com/questions/41918756/angular2-exception-no-provider-for-angulartics2googleanalytics

https://stackoverflow.com/questions/53103500/angulartics2-run-error-on-build-with-piwik

https://angularfirst.com/the-ngmodule-forroot-convention/

micahstubbs · 2022-05-13T21:25:27Z

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

This was referenced May 13, 2022

Upgrade helix-front to Angular 9.1 #2094

Closed

upgrade helix-front to Angular 10.2 #2095

Closed

Upgrade helix-front to Angular 10.2 #2104

Closed

upgrade helix-front to Angular 11.2 #2105

Closed

This was referenced May 24, 2022

Upgrade helix-front to Angular 11.2 #2111

Closed

upgrade helix-front to Angular 12.2 #2112

Closed

Upgrade to Angular 12.2 #2113

Closed

upgrade helix-front to Angular 13.3 #2114

Closed

Upgrade helix-front to Angular 13.3 #2115

Closed

micahstubbs added a commit to micahstubbs/helix that referenced this issue May 29, 2022

upgrade helix-front to Angular 9.1. fix apache#2092

5d50307

micahstubbs mentioned this issue May 29, 2022

Upgrade helix-front to Angular 9.1 #2125

Merged

10 tasks

micahstubbs added a commit to micahstubbs/helix that referenced this issue Jun 1, 2022

upgrade helix-front to Angular 9.1. fix apache#2092

5061dbd

micahstubbs added a commit to micahstubbs/helix that referenced this issue Jun 1, 2022

upgrade helix-front to Angular 9.1. fix apache#2092

effb757

This was referenced Jun 1, 2022

Upgrade helix-front to Angular 10.2 #2129

Merged

Upgrade helix-front to Angular 11.2 #2130

Merged

Upgrade helix-front to Angular 12.2 #2131

Merged

Upgrade helix-front to Angular 13.3 #2132

Merged

micahstubbs added a commit to micahstubbs/helix that referenced this issue Jun 2, 2022

upgrade helix-front to Angular 9.1. fix apache#2092

d3a8b6d

NealSun96 closed this as completed in #2125 Jun 2, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

upgrade helix-front to Angular 9.1 #2092

upgrade helix-front to Angular 9.1 #2092

micahstubbs commented May 12, 2022

micahstubbs commented May 12, 2022

micahstubbs commented May 12, 2022 •

edited

Loading

micahstubbs commented May 12, 2022 •

edited

Loading

micahstubbs commented May 12, 2022 •

edited

Loading

micahstubbs commented May 12, 2022 •

edited

Loading

micahstubbs commented May 12, 2022 •

edited

Loading

micahstubbs commented May 12, 2022 •

edited

Loading

micahstubbs commented May 12, 2022

micahstubbs commented May 12, 2022

micahstubbs commented May 12, 2022

micahstubbs commented May 12, 2022

micahstubbs commented May 12, 2022

micahstubbs commented May 12, 2022

micahstubbs commented May 12, 2022 •

edited

Loading

micahstubbs commented May 12, 2022 •

edited

Loading

micahstubbs commented May 12, 2022

micahstubbs commented May 12, 2022

micahstubbs commented May 12, 2022 •

edited

Loading

micahstubbs commented May 12, 2022 •

edited

Loading

micahstubbs commented May 12, 2022 •

edited

Loading

micahstubbs commented May 12, 2022 •

edited

Loading

micahstubbs commented May 12, 2022 •

edited

Loading

micahstubbs commented May 12, 2022 •

edited

Loading

micahstubbs commented May 12, 2022 •

edited

Loading

micahstubbs commented May 13, 2022 •

edited

Loading

micahstubbs commented May 13, 2022

micahstubbs commented May 13, 2022

micahstubbs commented May 13, 2022 •

edited

Loading

micahstubbs commented May 13, 2022 •

edited

Loading

micahstubbs commented May 13, 2022

upgrade helix-front to Angular 9.1 #2092

upgrade helix-front to Angular 9.1 #2092

Comments

micahstubbs commented May 12, 2022

micahstubbs commented May 12, 2022

micahstubbs commented May 12, 2022 • edited Loading

micahstubbs commented May 12, 2022 • edited Loading

micahstubbs commented May 12, 2022 • edited Loading

tsickle version

problem

solution

ModuleWithProviders migration

problem

solution

micahstubbs commented May 12, 2022 • edited Loading

micahstubbs commented May 12, 2022 • edited Loading

micahstubbs commented May 12, 2022 • edited Loading

micahstubbs commented May 12, 2022

micahstubbs commented May 12, 2022

micahstubbs commented May 12, 2022

micahstubbs commented May 12, 2022

micahstubbs commented May 12, 2022

micahstubbs commented May 12, 2022

micahstubbs commented May 12, 2022 • edited Loading

micahstubbs commented May 12, 2022 • edited Loading

micahstubbs commented May 12, 2022

micahstubbs commented May 12, 2022

micahstubbs commented May 12, 2022 • edited Loading

Deep Import Warning

micahstubbs commented May 12, 2022 • edited Loading

Bundle Size Warnings

micahstubbs commented May 12, 2022 • edited Loading

no ng-form directive found

micahstubbs commented May 12, 2022 • edited Loading

ngx-vis: not compatible with Angular Ivy

micahstubbs commented May 12, 2022 • edited Loading

micahstubbs commented May 12, 2022 • edited Loading

micahstubbs commented May 12, 2022 • edited Loading

micahstubbs commented May 13, 2022 • edited Loading

micahstubbs commented May 13, 2022

micahstubbs commented May 13, 2022

micahstubbs commented May 13, 2022 • edited Loading

micahstubbs commented May 13, 2022 • edited Loading

micahstubbs commented May 13, 2022

micahstubbs commented May 12, 2022 •

edited

Loading

micahstubbs commented May 12, 2022 •

edited

Loading

micahstubbs commented May 12, 2022 •

edited

Loading

micahstubbs commented May 12, 2022 •

edited

Loading

micahstubbs commented May 12, 2022 •

edited

Loading

micahstubbs commented May 12, 2022 •

edited

Loading

micahstubbs commented May 12, 2022 •

edited

Loading

micahstubbs commented May 12, 2022 •

edited

Loading

micahstubbs commented May 12, 2022 •

edited

Loading

micahstubbs commented May 12, 2022 •

edited

Loading

micahstubbs commented May 12, 2022 •

edited

Loading

micahstubbs commented May 12, 2022 •

edited

Loading

micahstubbs commented May 12, 2022 •

edited

Loading

micahstubbs commented May 12, 2022 •

edited

Loading

micahstubbs commented May 12, 2022 •

edited

Loading

micahstubbs commented May 13, 2022 •

edited

Loading

micahstubbs commented May 13, 2022 •

edited

Loading

micahstubbs commented May 13, 2022 •

edited

Loading