upgrade helix-front to Angular 10.2 #2095
Comments
https://gist.github.com/LayZeeDK/c822cc812f75bb07b7c55d07ba2719b3 |
|
Now, let's run the upgrade script # temporarily, else we see
# Node.js version v12.11.1 detected.
# The Angular CLI requires a minimum Node.js version of either v12.20, v14.15, or v16.10.
nvm use 12.20
# then
npx @angular/cli@10 update @angular/core@10 @angular/cli@10
Your global Angular CLI version (10.2.4) is greater than your local version (9.1.15). The local Angular CLI version is used.
To disable this warning use "ng config -g cli.warnings.versionMismatch false".
The installed local Angular CLI version is older than the latest stable version.
Installing a temporary version to perform the update.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Using package manager: 'npm'
Collecting installed dependencies...
Found 70 dependencies.
Fetching dependency metadata from registry...
Updating package.json with dependency @angular-devkit/build-angular @ "0.1002.4" (was "0.901.15")...
Updating package.json with dependency @angular/cli @ "10.2.4" (was "9.1.15")...
Updating package.json with dependency @angular/compiler-cli @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency typescript @ "4.0.8" (was "3.8.3")...
Updating package.json with dependency @angular/animations @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency @angular/common @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency @angular/compiler @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency @angular/core @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency @angular/forms @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency @angular/platform-browser @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency @angular/platform-browser-dynamic @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency @angular/platform-server @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency @angular/router @ "10.2.5" (was "9.1.13")...
UPDATE package.json (3228 bytes)
✔ Packages successfully installed.
** Executing migrations of package '@angular/cli' **
❯ Update Browserslist configuration file name to '.browserslistrc' from deprecated 'browserslist'.
Migration completed.
❯ Update tslint to version 6 and adjust rules to maintain existing behavior.
tslint configuration does not extend "tslint:recommended" or it extends multiple configurations.
Skipping rule changes as some rules might conflict.
UPDATE package.json (3229 bytes)
UPDATE tslint.json (2751 bytes)
Migration completed.
❯ Remove deprecated 'es5BrowserSupport' browser builder option.
The inclusion for ES5 polyfills will be determined from the browsers listed in the browserslist configuration.
Migration completed.
❯ Replace deprecated and removed 'styleext' and 'spec' Angular schematic options with 'style' and 'skipTests', respectively.
Migration completed.
❯ Remove deprecated options from 'angular.json' that are no longer present in v10.
Migration completed.
❯ Add the tslint deprecation rule to tslint JSON configuration files.
UPDATE tslint.json (2807 bytes)
Migration completed.
❯ Update library projects to use tslib version 2 as a direct dependency.
Read more about this here: https://v10.angular.io/guide/migration-update-libraries-tslib
Migration completed.
❯ Update workspace dependencies to match a new v10 project.
Package "rxjs-compat" found in the workspace package.json. This package typically was used during migration from RxJs version 5 to 6 during the Angular 5 timeframe and may no longer be needed.
Read more about this: https://rxjs-dev.firebaseapp.com/guide/v6/migration
UPDATE package.json (3228 bytes)
✔ Packages installed successfully.
Migration completed.
❯ Update 'module' and 'target' TypeScript compiler options.
Read more about this here: https://v10.angular.io/guide/migration-update-module-and-target-compiler-options
UPDATE tsconfig.json (467 bytes)
Migration completed.
❯ Removing "Solution Style" TypeScript configuration file support.
Migration has already been executed.
Migration completed.
** Executing migrations of package '@angular/core' **
❯ Missing @Injectable and incomplete provider definition migration.
As of 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.
❯ ModuleWithProviders migration.
As of Angular 10, the ModuleWithProviders type requires a generic.
This migration adds the generic where it is missing.
Read more about this here: https://v10.angular.io/guide/migration-module-with-providers
Migration completed.
❯ Undecorated classes with Angular features migration.
In version 10, classes that use Angular features and do not have an Angular decorator are no longer supported.
Read more about this here: https://v10.angular.io/guide/migration-undecorated-classes
Migration completed. |
|
formatted log, same content as above:
setupTo disable this warning use "ng config -g cli.warnings.versionMismatch false".
The installed local Angular CLI version is older than the latest stable version.
Installing a temporary version to perform the update.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Using package manager: 'npm'
Collecting installed dependencies...
Found 70 dependencies.
Fetching dependency metadata from registry...package updatesUpdating package.json with dependency @angular-devkit/build-angular @ "0.1002.4" (was "0.901.15")...
Updating package.json with dependency @angular/cli @ "10.2.4" (was "9.1.15")...
Updating package.json with dependency @angular/compiler-cli @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency typescript @ "4.0.8" (was "3.8.3")...
Updating package.json with dependency @angular/animations @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency @angular/common @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency @angular/compiler @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency @angular/core @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency @angular/forms @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency @angular/platform-browser @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency @angular/platform-browser-dynamic @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency @angular/platform-server @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency @angular/router @ "10.2.5" (was "9.1.13")...
UPDATE package.json (3228 bytes)
# ✔ Packages successfully installed.Executing migrations of package '@angular/cli'❯ Update Browserslist configuration file name to '.browserslistrc' from deprecated 'browserslist'.
❯ Update tslint to version 6 and adjust rules to maintain existing behavior.
|
|
We'll come back to this action item about tslint, possibly borrowing from work already done during the first effort to upgrade to Angular 13 in this PR #2054.
|
|
Now lets: npx @angular/cli@10 update @angular/material@10 --force
Using package manager: 'npm'
Collecting installed dependencies...
Found 70 dependencies.
Fetching dependency metadata from registry...
Package "@angular/flex-layout" has an incompatible peer dependency to
"@angular/cdk" (requires "^9.0.0-rc.8", would install "10.2.7").
Updating package.json with dependency @angular/cdk @ "10.2.7" (was "9.2.4")...
Updating package.json with dependency @angular/material @ "10.2.7" (was "9.2.4")...
UPDATE package.json (3229 bytes)
✔ Packages installed successfully.
** Executing migrations of package '@angular/cdk' **
❯ Updates the Angular CDK to v10
Could not find TypeScript project for project: helix-front-e2e
✓ Updated Angular CDK to version 10
Migration completed.
** Executing migrations of package '@angular/material' **
❯ Updates Angular Material to v10
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 10
Migration completed. |
|
Let's fix this peer dep warning: Package "@angular/flex-layout" has an incompatible peer dependency to
"@angular/cdk" (requires "^9.0.0-rc.8", would install "10.2.7")npm i @angular/flex-layout@10.0.0-beta.32 |
|
new peer dep warnings: @swimlane/ngx-charts@13.0.4 --> @angular/animations@7.x || 8.x || 9.x
@swimlane/ngx-charts@13.0.4 --> @angular/cdk@7.x || 8.x || 9.x
@swimlane/ngx-charts@13.0.4 --> @angular/core@7.x || 8.x || 9.x
@swimlane/ngx-charts@13.0.4 --> @angular/common@7.x || 8.x || 9.x
@swimlane/ngx-charts@13.0.4 --> @angular/forms@7.x || 8.x || 9.x
@swimlane/ngx-charts@13.0.4 --> @angular/platform-browser@7.x || 8.x || 9.x
@swimlane/ngx-charts@13.0.4 --> @angular/platform-browser-dynamic@7.x || 8.x || 9.x
@swimlane/ngx-charts@13.0.4 --> tslib@^1.10.0@swimlane/ngx-datatable@17.1.0 --> @angular/common@~9.1.0
@swimlane/ngx-datatable@17.1.0 --> @angular/core@~9.1.0
@swimlane/ngx-datatable@17.1.0 --> @angular/platform-browser@~9.1.0
@swimlane/ngx-datatable@17.1.0 --> tslib@^1.10.0@swimlane/ngx-graph@7.0.0 --> @angular/animations@6.x || 7.x || 8.x || 9.x
@swimlane/ngx-graph@7.0.0 --> @angular/common@6.x || 7.x || 8.x || 9.x
@swimlane/ngx-graph@7.0.0 --> @angular/core@6.x || 7.x || 8.x || 9.x
@swimlane/ngx-graph@7.0.0 --> @angular/cdk@6.x || 7.x || 8.x || 9.x
@swimlane/ngx-graph@7.0.0 --> tslib@^1.10.0angulartics2@9.1.0 --> tslib@^1.10.0
codelyzer@5.2.2 --> @angular/compiler@>=2.3.1 <10.0.0 || >9.0.0-beta <10.0.0 || >9.1.0-beta <10.0.0 || >9.2.0-beta <10.0.0
codelyzer@5.2.2 --> @angular/core@>=2.3.1 <10.0.0 || >9.0.0-beta <10.0.0 || >9.1.0-beta <10.0.0 || >9.2.0-beta <10.0.0
karma-jasmine-html-reporter@1.7.0 --> jasmine-core@>=3.8
ngx-vis@3.1.0 --> keycharm@^0.2.0
rxjs-tslint@0.1.8 --> tslint@^5.0.0
tsickle@0.38.1 --> typescript@~3.8.2 |
rxjs-tslint@0.1.8 --> tslint@^5.0.0
npm i tslint@5 |
karma-jasmine-html-reporter@1.7.0 --> jasmine-core@>=3.8
npm i jasmine-core@3.8 |
codelyzer@5.2.2
--> @angular/core@>=2.3.1 <10.0.0 || >9.0.0-beta <10.0.0 || >9.1.0-beta <10.0.0 || >9.2.0-beta <10.0.0
npm i codelyzer@6.0.2 |
angulartics2@9.1.0 --> tslib@^1.10.0
# actually, let's ignore this and upgrade angulartics2
npm i angulartics2@10.1.0 |
@swimlane/ngx-graph@7.0.0 --> @angular/animations@6.x || 7.x || 8.x || 9.x
@swimlane/ngx-graph@7.0.0 --> @angular/common@6.x || 7.x || 8.x || 9.x
@swimlane/ngx-graph@7.0.0 --> @angular/core@6.x || 7.x || 8.x || 9.x
@swimlane/ngx-graph@7.0.0 --> @angular/cdk@6.x || 7.x || 8.x || 9.x
@swimlane/ngx-graph@7.0.0 --> tslib@^1.10.0npm i @swimlane/ngx-graph@7.2.0 |
@swimlane/ngx-datatable@17.1.0 --> @angular/common@~9.1.0
@swimlane/ngx-datatable@17.1.0 --> @angular/core@~9.1.0
@swimlane/ngx-datatable@17.1.0 --> @angular/platform-browser@~9.1.0
@swimlane/ngx-datatable@17.1.0 --> tslib@^1.10.0npm i @swimlane/ngx-datatable@18.0.0 |
@swimlane/ngx-charts@13.0.4 --> @angular/animations@7.x || 8.x || 9.x
@swimlane/ngx-charts@13.0.4 --> @angular/cdk@7.x || 8.x || 9.x
@swimlane/ngx-charts@13.0.4 --> @angular/core@7.x || 8.x || 9.x
@swimlane/ngx-charts@13.0.4 --> @angular/common@7.x || 8.x || 9.x
@swimlane/ngx-charts@13.0.4 --> @angular/forms@7.x || 8.x || 9.x
@swimlane/ngx-charts@13.0.4 --> @angular/platform-browser@7.x || 8.x || 9.x
@swimlane/ngx-charts@13.0.4 --> @angular/platform-browser-dynamic@7.x || 8.x || 9.x
@swimlane/ngx-charts@13.0.4 --> tslib@^1.10.0npm i @swimlane/ngx-charts@16.0.0 |
ngx-vis@3.1.0 --> keycharm@^0.2.0in package.json: "ngx-vis": "visjs/ngx-vis#bbb3fb7865c4437f4d5d3c9a0a05ef9d9d26a1fc",which depends on the version of keycharm that our other deps use: "keycharm": "^0.3.0",raised visjs/ngx-vis#426 to fix Edit: that created some TypeScript errors about not being able to import let's try this commit instead, which is the most recent commit on the develop branch that passed the CI tests. "ngx-vis": "visjs/ngx-vis#d03c5f2eb4ca300678027c563011dcfb5edf5696"Here are the TypeScript errors. Oh well, will just tolerate this peer dep warning for now. client/app/dashboard/dashboard.component.spec.ts:4:27 - error TS2307: Cannot find module 'ngx-vis' or its corresponding type declarations.
4 import { VisModule } from 'ngx-vis';
~~~~~~~~~
client/app/dashboard/dashboard.component.ts:13:61 - error TS2307: Cannot find module 'ngx-vis' or its corresponding type declarations.
13 import {Data, Edge, Node, Options, VisNetworkService } from 'ngx-vis';
~~~~~~~~~
client/app/dashboard/dashboard.module.ts:4:27 - error TS2307: Cannot find module 'ngx-vis' or its corresponding type declarations.
4 import { VisModule } from 'ngx-vis';
~~~~~~~~~
[7:21:00 PM] Found 3 errors. Watching for file changes. |
npm i
removed 1 package, updated 1 package & audited 2105 packages in 179.86s
105 packages are looking for funding
run `npm fund` for details
found 104 vulnerabilities (6 low, 55 moderate, 27 high, 16 critical)
run `npm audit fix` to fix them, or `npm audit` for details🎉 hooray, no more peer dep warnings! 🕵️ need to fix those security warnings soon however. |
|
Let's test the upgrade from Angular 9.1 to Angular 10.2.
|
npm run lint
> helix-front@1.2.1 lint /helix/helix-front
> ng lint
Linting "helix-front"...
An unhandled exception occurred: error TS5083:
Cannot read file '/helix/helix-front/src/tsconfig.app.json'.
See "/private/var/folders/z5/t6s4vsk92clf48xxvn72hdqm0000gn/T/ng-t61gGt/angular-errors.log" for further details.
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! helix-front@1.2.1 lint: `ng lint`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the helix-front@1.2.1 lint script.
npm ERR! This is probably not a problem with npm.
There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /.npm/_logs/2022-05-17T02_24_25_641Z-debug.log |
|
ah hah! For odd historical reasons, we use That's the problem. Let's fix this problem in "lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"client/tsconfig.app.json",
"client/tsconfig.spec.json"
],
"exclude": []
}
} |
npm run lint
> helix-front@1.2.1 lint /helix/helix-front
> ng lint
Linting "helix-front"...
no-use-before-declare is deprecated. Since TypeScript 2.9. Please use the built-in compiler checks instead.
typeof-compare is deprecated. Starting from TypeScript 2.2 the compiler includes this check which makes this rule redundant.
Could not find implementations for the following rules specified in the configuration:
use-input-property-decorator
use-output-property-decorator
use-host-property-decorator
Try upgrading TSLint and/or ensuring that you have all necessary custom rules installed.
If TSLint was recently upgraded, you may have old rules configured which need to be cleaned up.
/helix/helix-front/client/app/app.component.ts:60:27
ERROR: 60:27 triple-equals == should be ===
ERROR: 91:41 quotemark " should be '
/helix/helix-front/client/app/cluster/cluster-list/cluster-list.component.ts:19:17
ERROR: 19:17 no-inferrable-types Type string trivially inferred from a string literal, remove type annotation
ERROR: 20:14 no-inferrable-types Type boolean trivially inferred from a boolean literal, remove type annotation
ERROR: 21:8 no-inferrable-types Type boolean trivially inferred from a boolean literal, remove type annotation
/helix/helix-front/client/app/cluster/cluster.component.ts:27:1
ERROR: 27:1 no-trailing-whitespace trailing whitespace
/helix/helix-front/client/app/cluster/shared/cluster.model.ts:26:9
ERROR: 26:9 prefer-const Identifier 'ins' is never reassigned; use 'const' instead of 'let'.
ERROR: 27:14 prefer-const Identifier 'instance' is never reassigned; use 'const' instead of 'let'.
/helix/helix-front/client/app/configuration/config-detail/config-detail.component.ts:58:21
ERROR: 58:21 triple-equals != should be !==
/helix/helix-front/client/app/core/helix.service.ts:74:9
ERROR: 74:9 prefer-const Identifier 'headers' is never reassigned; use 'const' instead of 'let'.
ERROR: 86:24 triple-equals == should be ===
/helix/helix-front/client/app/core/user.service.ts:34:9
ERROR: 34:9 prefer-const Identifier 'headers' is never reassigned; use 'const' instead of 'let'.
/helix/helix-front/client/app/dashboard/dashboard.component.ts:30:24
ERROR: 30:24 no-trailing-whitespace trailing whitespace
ERROR: 42:16 whitespace missing whitespace
ERROR: 75:21 triple-equals == should be ===
ERROR: 85:17 no-trailing-whitespace trailing whitespace
ERROR: 134:9 prefer-const Identifier 'width' is never reassigned; use 'const' instead of 'let'.
ERROR: 135:9 prefer-const Identifier 'height' is never reassigned; use 'const' instead of 'let'.
ERROR: 136:9 prefer-const Identifier 'dashboardDom' is never reassigned; use 'const' instead of 'let'.
ERROR: 151:16 no-shadowed-variable Shadowed name: '_'
ERROR: 258:27 no-shadowed-variable Shadowed name: 'instanceName'
/helix/helix-front/client/app/history/history-list/history-list.component.ts:39:11
ERROR: 39:11 prefer-const Identifier 'clusterName' is never reassigned; use 'const' instead of 'let'.
ERROR: 40:11 prefer-const Identifier 'instanceName' is never reassigned; use 'const' instead of 'let'.
ERROR: 41:11 prefer-const Identifier 'observable' is never reassigned; use 'const' instead of 'let'.
ERROR: 57:24 triple-equals == should be ===
ERROR: 63:24 triple-equals == should be ===
/helix/helix-front/client/app/history/shared/history.service.ts:26:9
ERROR: 26:9 prefer-const Identifier 'histories' is never reassigned; use 'const' instead of 'let'.
ERROR: 29:16 prefer-const Identifier 'record' is never reassigned; use 'const' instead of 'let'.
ERROR: 32:13 prefer-const Identifier 'history' is never reassigned; use 'const' instead of 'let'.
ERROR: 34:18 prefer-const Identifier 'seg' is never reassigned; use 'const' instead of 'let'.
ERROR: 35:15 prefer-const Identifier 'name' is never reassigned; use 'const' instead of 'let'.
ERROR: 36:15 prefer-const Identifier 'value' is never reassigned; use 'const' instead of 'let'.
ERROR: 37:20 triple-equals == should be ===
ERROR: 39:27 triple-equals == should be ===
ERROR: 41:27 triple-equals == should be ===
ERROR: 43:27 triple-equals == should be ===
/helix/helix-front/client/app/instance/instance-list/instance-list.component.ts:46:9
ERROR: 46:9 prefer-const Identifier 'row' is never reassigned; use 'const' instead of 'let'.
/helix/helix-front/client/app/instance/shared/instance.service.ts:39:92
ERROR: 39:92 triple-equals != should be !==
ERROR: 55:9 prefer-const Identifier 'node' is never reassigned; use 'const' instead of 'let'.
/helix/helix-front/client/app/resource/resource-list/resource-list.component.ts:91:1
ERROR: 91:1 max-line-length Exceeds maximum line length of 140
/helix/helix-front/client/app/resource/shared/resource.model.ts:14:92
ERROR: 14:92 triple-equals != should be !==
ERROR: 45:65 triple-equals != should be !==
ERROR: 70:5 forin for (... in ...) statements must be filtered with an if statement
ERROR: 70:14 prefer-const Identifier 'partitionName' is never reassigned; use 'const' instead of 'let'.
ERROR: 71:11 prefer-const Identifier 'partition' is never reassigned; use 'const' instead of 'let'.
ERROR: 75:30 triple-equals != should be !==
ERROR: 76:18 prefer-const Identifier 'replicaName' is never reassigned; use 'const' instead of 'let'.
ERROR: 83:37 triple-equals != should be !==
ERROR: 84:9 forin for (... in ...) statements must be filtered with an if statement
ERROR: 84:18 prefer-const Identifier 'replicaName' is never reassigned; use 'const' instead of 'let'.
ERROR: 92:9 forin for (... in ...) statements must be filtered with an if statement
ERROR: 92:18 prefer-const Identifier 'replicaName' is never reassigned; use 'const' instead of 'let'.
/helix/helix-front/client/app/resource/shared/resource.service.ts:18:13
ERROR: 18:13 prefer-const Identifier 'res' is never reassigned; use 'const' instead of 'let'.
ERROR: 19:18 prefer-const Identifier 'name' is never reassigned; use 'const' instead of 'let'.
ERROR: 34:13 prefer-const Identifier 'res' is never reassigned; use 'const' instead of 'let'.
ERROR: 36:20 prefer-const Identifier 'resource' is never reassigned; use 'const' instead of 'let'.
ERROR: 64:13 prefer-const Identifier 'ret' is never reassigned; use 'const' instead of 'let'.
ERROR: 72:9 forin for (... in ...) statements must be filtered with an if statement
ERROR: 72:18 prefer-const Identifier 'partition' is never reassigned; use 'const' instead of 'let'.
ERROR: 73:15 prefer-const Identifier 'par' is never reassigned; use 'const' instead of 'let'.
/helix/helix-front/client/app/shared/data-table/data-table.component.ts:48:9
ERROR: 48:9 prefer-const Identifier 'data' is never reassigned; use 'const' instead of 'let'.
/helix/helix-front/client/app/shared/input-inline/input-inline.component.ts:13:3
ERROR: 13:3 no-output-rename @Outputs should not be renamed
ERROR: 15:19 no-inferrable-types Type string trivially inferred from a string literal, remove type annotation
ERROR: 16:17 no-inferrable-types Type number trivially inferred from a number literal, remove type annotation
ERROR: 17:17 no-inferrable-types Type number trivially inferred from a number literal, remove type annotation
ERROR: 18:23 no-inferrable-types Type number trivially inferred from a number literal, remove type annotation
ERROR: 19:23 no-inferrable-types Type number trivially inferred from a number literal, remove type annotation
ERROR: 20:18 no-inferrable-types Type string trivially inferred from a string literal, remove type annotation
ERROR: 21:22 no-inferrable-types Type boolean trivially inferred from a boolean literal, remove type annotation
ERROR: 24:3 member-ordering Declaration of instance field not allowed after declaration of instance method. Instead, this should come at the beginning of the class/interface.
ERROR: 25:3 member-ordering Declaration of instance field not allowed after declaration of instance method. Instead, this should come at the beginning of the class/interface.
ERROR: 25:24 no-inferrable-types Type string trivially inferred from a string literal, remove type annotation
ERROR: 26:3 member-ordering Declaration of instance field not allowed after declaration of instance method. Instead, this should come at the beginning of the class/interface.
ERROR: 26:23 no-inferrable-types Type string trivially inferred from a string literal, remove type annotation
ERROR: 27:3 member-ordering Declaration of instance field not allowed after declaration of instance method. Instead, this should come at the beginning of the class/interface.
ERROR: 27:22 no-inferrable-types Type boolean trivially inferred from a boolean literal, remove type annotation
ERROR: 29:3 member-ordering Declaration of instance field not allowed after declaration of instance method. Instead, this should come at the beginning of the class/interface.
ERROR: 29:12 no-inferrable-types Type boolean trivially inferred from a boolean literal, remove type annotation
ERROR: 31:3 member-ordering Declaration of instance field not allowed after declaration of instance method. Instead, this should come at the beginning of the class/interface.
ERROR: 31:19 no-inferrable-types Type string trivially inferred from a string literal, remove type annotation
ERROR: 43:3 member-ordering Declaration of instance field not allowed after declaration of instance method. Instead, this should come at the beginning of the class/interface.
ERROR: 43:22 no-inferrable-types Type string trivially inferred from a string literal, remove type annotation
ERROR: 46:3 member-ordering Declaration of instance field not allowed after declaration of instance method. Instead, this should come at the beginning of the class/interface.
ERROR: 47:3 member-ordering Declaration of instance field not allowed after declaration of instance method. Instead, this should come at the beginning of the class/interface.
/helix/helix-front/client/app/shared/json-viewer/json-viewer.component.spec.ts:12:15
ERROR: 12:15 whitespace missing whitespace
/helix/helix-front/client/app/shared/json-viewer/json-viewer.component.ts:21:11
ERROR: 21:11 prefer-const Identifier 'path' is never reassigned; use 'const' instead of 'let'.
/helix/helix-front/client/app/shared/key-value-pairs/key-value-pairs.component.ts:7:24
ERROR: 7:24 directive-selector The selector should be used as an attribute (https://angular.io/guide/styleguide#style-02-06)
ERROR: 8:35 one-line missing whitespace
/helix/helix-front/client/app/shared/material.module.ts:102:32
ERROR: 102:32 eofline file should end with a newline
/helix/helix-front/client/app/shared/models/node.model.ts:76:9
ERROR: 76:9 prefer-const Identifier 'obj' is never reassigned; use 'const' instead of 'let'.
/helix/helix-front/client/app/shared/node-viewer/node-viewer.component.ts:26:3
ERROR: 26:3 no-output-rename @Outputs should not be renamed
ERROR: 29:3 no-output-rename @Outputs should not be renamed
ERROR: 32:3 no-output-rename @Outputs should not be renamed
ERROR: 183:15 prefer-const Identifier 'newNode' is never reassigned; use 'const' instead of 'let'.
ERROR: 212:9 prefer-const Identifier 'newNode' is never reassigned; use 'const' instead of 'let'.
ERROR: 226:9 prefer-const Identifier 'newNode' is never reassigned; use 'const' instead of 'let'.
ERROR: 228:11 whitespace missing whitespace
ERROR: 236:1 max-line-length Exceeds maximum line length of 140
ERROR: 243:1 max-line-length Exceeds maximum line length of 140
ERROR: 253:1 max-line-length Exceeds maximum line length of 140
ERROR: 272:9 prefer-const Identifier 'newNode' is never reassigned; use 'const' instead of 'let'.
ERROR: 274:11 whitespace missing whitespace
ERROR: 282:1 max-line-length Exceeds maximum line length of 140
ERROR: 287:1 max-line-length Exceeds maximum line length of 140
ERROR: 292:1 max-line-length Exceeds maximum line length of 140
ERROR: 297:1 max-line-length Exceeds maximum line length of 140
ERROR: 310:1 max-line-length Exceeds maximum line length of 140
/helix/helix-front/client/app/workflow/job-detail/job-detail.component.spec.ts:5:29
ERROR: 5:29 rxjs-proper-imports outdated import path
/helix/helix-front/client/app/workflow/job-list/job-list.component.ts:39:19
ERROR: 39:19 radix Missing radix parameter
/helix/helix-front/client/app/workflow/shared/workflow.model.ts:50:90
ERROR: 50:90 triple-equals == should be ===
ERROR: 67:9 prefer-const Identifier 'result' is never reassigned; use 'const' instead of 'let'.
/helix/helix-front/client/app/workflow/workflow-dag/workflow-dag.component.ts:28:28
ERROR: 28:28 whitespace missing whitespace
/helix/helix-front/client/testing/testing.module.ts:8:45
ERROR: 8:45 whitespace missing whitespace
Lint errors found in the listed files. |
|
Let's fix the errors that can be automatically fixed with npm run lint:fix
> helix-front@1.2.1 lint:fix /helix/helix-front
> ng lint -- --fix
Linting "helix-front"...
no-use-before-declare is deprecated. Since TypeScript 2.9. Please use the built-in compiler checks instead.
typeof-compare is deprecated. Starting from TypeScript 2.2 the compiler includes this check which makes this rule redundant.
Could not find implementations for the following rules specified in the configuration:
use-input-property-decorator
use-output-property-decorator
use-host-property-decorator
Try upgrading TSLint and/or ensuring that you have all necessary custom rules installed.
If TSLint was recently upgraded, you may have old rules configured which need to be cleaned up.
/helix/helix-front/client/app/app.component.ts:60:27
ERROR: 60:27 triple-equals == should be ===
/helix/helix-front/client/app/configuration/config-detail/config-detail.component.ts:58:21
ERROR: 58:21 triple-equals != should be !==
/helix/helix-front/client/app/core/helix.service.ts:86:24
ERROR: 86:24 triple-equals == should be ===
/helix/helix-front/client/app/dashboard/dashboard.component.ts:75:21
ERROR: 75:21 triple-equals == should be ===
ERROR: 151:16 no-shadowed-variable Shadowed name: '_'
ERROR: 258:27 no-shadowed-variable Shadowed name: 'instanceName'
/helix/helix-front/client/app/history/history-list/history-list.component.ts:57:24
ERROR: 57:24 triple-equals == should be ===
ERROR: 63:24 triple-equals == should be ===
/helix/helix-front/client/app/history/shared/history.service.ts:37:20
ERROR: 37:20 triple-equals == should be ===
ERROR: 39:27 triple-equals == should be ===
ERROR: 41:27 triple-equals == should be ===
ERROR: 43:27 triple-equals == should be ===
/helix/helix-front/client/app/instance/shared/instance.service.ts:39:92
ERROR: 39:92 triple-equals != should be !==
/helix/helix-front/client/app/resource/resource-list/resource-list.component.ts:91:1
ERROR: 91:1 max-line-length Exceeds maximum line length of 140
/helix/helix-front/client/app/resource/shared/resource.model.ts:14:92
ERROR: 14:92 triple-equals != should be !==
ERROR: 45:65 triple-equals != should be !==
ERROR: 70:5 forin for (... in ...) statements must be filtered with an if statement
ERROR: 75:30 triple-equals != should be !==
ERROR: 83:37 triple-equals != should be !==
ERROR: 84:9 forin for (... in ...) statements must be filtered with an if statement
ERROR: 92:9 forin for (... in ...) statements must be filtered with an if statement
/helix/helix-front/client/app/resource/shared/resource.service.ts:72:9
ERROR: 72:9 forin for (... in ...) statements must be filtered with an if statement
/helix/helix-front/client/app/shared/input-inline/input-inline.component.ts:24:3
ERROR: 24:3 no-output-rename @Outputs should not be renamed
/helix/helix-front/client/app/shared/key-value-pairs/key-value-pairs.component.ts:7:24
ERROR: 7:24 directive-selector The selector should be used as an attribute (https://angular.io/guide/styleguide#style-02-06)
/helix/helix-front/client/app/shared/node-viewer/node-viewer.component.ts:26:3
ERROR: 26:3 no-output-rename @Outputs should not be renamed
ERROR: 29:3 no-output-rename @Outputs should not be renamed
ERROR: 32:3 no-output-rename @Outputs should not be renamed
ERROR: 236:1 max-line-length Exceeds maximum line length of 140
ERROR: 243:1 max-line-length Exceeds maximum line length of 140
ERROR: 253:1 max-line-length Exceeds maximum line length of 140
ERROR: 282:1 max-line-length Exceeds maximum line length of 140
ERROR: 287:1 max-line-length Exceeds maximum line length of 140
ERROR: 292:1 max-line-length Exceeds maximum line length of 140
ERROR: 297:1 max-line-length Exceeds maximum line length of 140
ERROR: 310:1 max-line-length Exceeds maximum line length of 140
/helix/helix-front/client/app/workflow/job-detail/job-detail.component.spec.ts:2:1
ERROR: 2:1 rxjs-collapse-imports duplicate RxJS import
/helix/helix-front/client/app/workflow/job-list/job-list.component.ts:39:19
ERROR: 39:19 radix Missing radix parameter
/helix/helix-front/client/app/workflow/shared/workflow.model.ts:50:90
ERROR: 50:90 triple-equals == should be ===
Lint errors found in the listed files. |
|
Much better now. npm run lint
> helix-front@1.2.1 lint /Users/m/workspace/helix/helix-front
> ng lint
Linting "helix-front"...
All files pass linting.
Linting "helix-front-e2e"...
All files pass linting. |
|
Let's test the upgrade from Angular 9.1 to Angular 10.2.
|
|
The build appears to have worked: npm run build
> helix-front@1.2.1 build //helix/helix-front
> rm -rf dist && mkdir dist && ng build --aot --prod && tsc -p server
Compiling @angular/core : es2015 as esm2015
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/cdk/keycodes : es2015 as esm2015
Compiling @angular/cdk/observers : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/cdk/collections : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/cdk/platform : es2015 as esm2015
Compiling @angular/cdk/bidi : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/cdk/a11y : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/cdk/portal : es2015 as esm2015
Compiling @angular/cdk/scrolling : es2015 as esm2015
Compiling @angular/flex-layout/core : es2015 as esm2015
Compiling @angular/cdk/layout : es2015 as esm2015
Compiling @angular/material/core : es2015 as esm2015
Compiling @angular/cdk/text-field : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/flex-layout/extended : es2015 as esm2015
Compiling @angular/cdk/overlay : es2015 as esm2015
Compiling @angular/material/button : es2015 as esm2015
Compiling @angular/flex-layout/flex : es2015 as esm2015
Compiling @angular/flex-layout/grid : es2015 as esm2015
Compiling @angular/material/form-field : es2015 as esm2015
Compiling @angular/material/divider : es2015 as esm2015
Compiling @angular/cdk/accordion : es2015 as esm2015
Compiling ngx-window-token : es2015 as esm2015
Compiling @swimlane/ngx-charts : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/material/dialog : es2015 as esm2015
Compiling @angular/material/snack-bar : es2015 as esm2015
Compiling @angular/flex-layout : es2015 as esm2015
Compiling ngx-vis : es2015 as esm2015
Compiling @swimlane/ngx-datatable : es2015 as esm2015
Compiling ngx-json-viewer : es2015 as esm2015
Compiling @angular/material/button-toggle : es2015 as esm2015
Compiling @angular/material/card : es2015 as esm2015
Compiling @angular/material/checkbox : es2015 as esm2015
Compiling @angular/material/toolbar : es2015 as esm2015
Compiling @angular/material/tooltip : es2015 as esm2015
Compiling @angular/material/slide-toggle : es2015 as esm2015
Compiling @angular/material/input : es2015 as esm2015
Compiling @angular/material/icon : es2015 as esm2015
Compiling @angular/material/progress-bar : es2015 as esm2015
Compiling @angular/material/progress-spinner : es2015 as esm2015
Compiling @angular/material/sidenav : es2015 as esm2015
Compiling @angular/material/list : es2015 as esm2015
Compiling @angular/material/menu : es2015 as esm2015
Compiling @angular/material/tabs : es2015 as esm2015
Compiling @angular/material/expansion : es2015 as esm2015
Compiling ngx-clipboard : es2015 as esm2015
Compiling @swimlane/ngx-charts : es2015 as esm2015
Compiling @swimlane/ngx-graph : es2015 as esm2015
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.
chunk {0} runtime-es2015.66c79b9d36e7169e27b0.js (runtime) 1.45 kB [entry] [rendered]
chunk {0} runtime-es5.66c79b9d36e7169e27b0.js (runtime) 1.45 kB [entry] [rendered]
chunk {2} polyfills-es2015.deb0d8e5034b51998b80.js (polyfills) 72.9 kB [initial] [rendered]
chunk {3} polyfills-es5.e12cf05afdc1c5175350.js (polyfills-es5) 166 kB [initial] [rendered]
chunk {1} main-es2015.a00d672fee77a542ef09.js (main) 3 MB [initial] [rendered]
chunk {1} main-es5.a00d672fee77a542ef09.js (main) 3.14 MB [initial] [rendered]
chunk {4} styles.9d3d26be34fb30376d71.css (styles) 95.4 kB [initial] [rendered]
Date: 2022-05-17T02:55:39.137Z - Hash: 2a7f043c7933cd744e5e - Time: 144826ms
WARNING in //helix/helix-front/client/app/dashboard/dashboard.component.ts depends on 'lodash'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
WARNING in //helix/helix-front/node_modules/@swimlane/ngx-graph/__ivy_ngcc__/fesm2015/swimlane-ngx-graph.js depends on 'webcola'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
WARNING in //helix/helix-front/node_modules/@swimlane/ngx-graph/__ivy_ngcc__/fesm2015/swimlane-ngx-graph.js depends on 'dagre'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies |
|
Some to perhaps look at later:
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies |
|
❌ 3 test failures from
|
|
Test pass after:
|
|
Let's test the upgrade from Angular 9.1 to Angular 10.2.
Helix UI renders with 0 errors and 2 warnings in the browser console. The warning is understandable since the piwik telemetry library is not configured.
|
10 tasks
47 specs, 3 failures, 10 pending specs, randomized with seed
[37875](http://localhost:9876/context.html?seed=37875)
[Spec List](http://localhost:9876/#) | Failures
[DashboardComponent](http://localhost:9876/context.html?spec=DashboardComponent)
TypeError: Cannot read properties of null (reading 'params')
error properties: Object({ longStack: 'TypeError: Cannot read properties of null (reading 'params')
at DashboardComponent.wEpf.DashboardComponent.initDashboard (http://localhost:9876/_karma_webpack_/client/app/dashboard/dashboard.component.ts:141:23)
at apply (http://localhost:9876/_karma_webpack_/client/app/dashboard/dashboard.component.ts:151:26)
at ZoneDelegate.invokeTask (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone.js:421:35)
at ProxyZoneSpec.onInvokeTask (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/proxy.js:148:43)
at ZoneDelegate.invokeTask (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone.js:420:40)
at Object.onInvokeTask (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone.js:295:104)
at ZoneDelegate.invokeTask (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone.js:420:40)
at Object.onInvokeTask (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/_ ...
TypeError: Cannot read properties of null (reading 'params')
at DashboardComponent.wEpf.DashboardComponent.initDashboard (http://localhost:9876/_karma_webpack_/client/app/dashboard/dashboard.component.ts:141:23)
at apply (http://localhost:9876/_karma_webpack_/client/app/dashboard/dashboard.component.ts:151:26)
at ZoneDelegate.invokeTask (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone.js:421:35)
at ProxyZoneSpec.onInvokeTask (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/proxy.js:148:43)
at ZoneDelegate.invokeTask (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone.js:420:40)
at Object.onInvokeTask (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone.js:295:104)
at ZoneDelegate.invokeTask (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone.js:420:40)
at Object.onInvokeTask (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:27546:33)
at ZoneDelegate.invokeTask (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone.js:420:40)
at Zone.runTask (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone.js:188:51)
at ____________________Elapsed_146_ms__At__Wed_May_18_2022_17_44_59_GMT_0700__Pacific_Daylight_Time_ (http://localhost)
at Object.onScheduleTask (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/long-stack-trace-zone.js:110:26)
at ZoneDelegate.scheduleTask (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone.js:400:55)
at Object.onScheduleTask (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone.js:294:84)
at ZoneDelegate.scheduleTask (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone.js:400:55)
at Zone.scheduleTask (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone.js:231:47)
at Zone.scheduleMacroTask (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone.js:254:29)
at scheduleMacroTaskWithCurrentZone (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone.js:1183:29)
at http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone.js:3068:32
[ResourceListComponent](http://localhost:9876/context.html?spec=ResourceListComponent) > [should create](http://localhost:9876/context.html?spec=ResourceListComponent%20should%20create)
Uncaught Http failure response for http://localhost:9876/api/helix/list: 404 Not Found thrown
[JobDetailComponent](http://localhost:9876/context.html?spec=JobDetailComponent) > [should create](http://localhost:9876/context.html?spec=JobDetailComponent%20should%20create)
Uncaught Http failure response for http://localhost:9876/api/user/can: 404 Not Found thrown
|
|
This causes the one of the issues:
the solution is the replace |
|
This answer solves many test failures: https://stackoverflow.com/questions/48126724/karma-testing-in-angular-5-failed-http-failure-response |
|
Adding a bit more error handling resolves the rest of the errors. Hooray! |
|
Let's test the upgrade from Angular 9.1 to Angular 10.2.
Helix UI renders with 0 errors and 2 warnings in the browser console. The warning is understandable since the piwik telemetry library is not configured.
|
This was referenced May 24, 2022
10 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://update.angular.io/?l=3&v=9.1-10.2
see:
The text was updated successfully, but these errors were encountered: