Closed micahstubbs closed 2 years ago
Angular CLI version | Angular version | Node.js version | TypeScript version | RxJS version |
---|---|---|---|---|
~10.2.4 | ~10.2.5 | ^10.13.0 || ^12.11.1 | >= 3.9.4 <= 4.0.8 | ^6.5.5 |
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:
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.
Migration completed.
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.
The inclusion for ES5 polyfills will be determined from the browsers listed in the browserslist configuration. Migration completed.
Migration completed.
Migration completed.
UPDATE tslint.json (2807 bytes)
Migration completed.
Read more about this here: https://v10.angular.io/guide/migration-update-libraries-tslib Migration completed.
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.
Read more about this here: https://v10.angular.io/guide/migration-update-module-and-target-compiler-options
UPDATE tsconfig.json (467 bytes)
Migration completed.
Migration has already been executed. Migration completed.
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.
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.
In Angular 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.
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.
tslint configuration does not extend "tslint:recommended" or it extends multiple configurations.
Skipping rule changes as some rules might conflict.
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.0
angulartics2@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.0
npm 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.0
npm 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.0
npm i @swimlane/ngx-charts@16.0.0
ngx-vis@3.1.0 --> keycharm@^0.2.0
in 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 https://github.com/visjs/ngx-vis/issues/426 to fix
Edit: that created some TypeScript errors about not being able to import ngx-vis
.
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 install
worksnpm run type:check:watch
shows 0 TypeScript errorsnpm run lint
runs and passes All files pass linting.
npm run build
worksnpm start
works, with 0 errors in the browser console.npm run test
runs and passes. 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 client
instead of src
as the directory name for our source code.
That's the problem.
Let's fix this problem in angular.json
:
"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 ng lint -- --fix
:
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.
npm install
worksnpm run type:check:watch
shows 0 TypeScript errorsnpm run lint
runs and passes All files pass linting.
npm run build
worksnpm start
works, with 0 errors in the browser console.npm run test
runs and passes.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:
WARNING in //helix/helix-front/client/app/dashboard/dashboard.component.ts depends on 'lodash'. CommonJS or AMD dependencies can cause optimization bailouts.
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.
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
:x: 3 test failures from npm run test
:
Test pass after:
nvm use 12.20.2
npm i && npm run test
Let's test the upgrade from Angular 9.1 to Angular 10.2.
npm install
worksnpm run type:check:watch
shows 0 TypeScript errorsnpm run lint
runs and passes All files pass linting.
npm run build
worksnpm 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 2 warnings in the browser console. The warning is understandable since the piwik telemetry library is not configured.
npm run test
results
47 specs, 3 failures, 10 pending specs, randomized with seed
[37875](http://localhost:9876/context.html?seed=37875)
DEPRECATION: An asynchronous function called its 'done' callback more than once. This is a bug in the spec, beforeAll, beforeEach, afterAll, or afterEach function in question. This will be treated as an error in a future version. See https://jasmine.github.io/tutorials/upgrading_to_Jasmine_4.0#deprecations-due-to-calling-done-multiple-times for more information.
(in spec: ClusterComponent should contain cluster list) Note: This message will be shown only once. Set the verboseDeprecations config property to true to see every occurrence.
[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:
You may see ExpressionChangedAfterItHasBeenChecked errors that were not detected before when using the async pipe. The error could previously have gone undetected because two WrappedValues are considered "equal" in all cases for the purposes of the check, even if their respective unwrapped values are not. In version 10, WrappedValue has been removed.
the solution is the replace async
with waitForAsync
.
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.
npm install
worksnpm run type:check:watch
shows 0 TypeScript errorsnpm run lint
runs and passes All files pass linting.
npm run build
worksnpm 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 2 warnings in the browser console. The warning is understandable since the piwik telemetry library is not configured.
npm run test
results
https://update.angular.io/?l=3&v=9.1-10.2
see:
2092 for the 9.1 upgrade
2088 for the 8.2 upgrade
2084 for the 7.2 upgrade
2053 for motivation, details, and history.