Upgrade helix-front to Angular 10.2 #2129

micahstubbs · 2022-06-01T22:17:39Z

Issues

My PR addresses the following Helix issues and references them in the PR description:

Fix #2095

Description

Here are some details about my PR, including screenshots of any UI changes:

This PR upgrades helix-front to Angular 10.2.

This PR completely contains earlier helix-front upgrade PRs #2094, #2092, #2087, #2083, and #2078. These previous Angular major-version PRs should be merged first.

Testing

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

npm install works
npm run 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 2 warnings in the browser console. The warning is understandable since the piwik telemetry library is not configured.

npm run test results

Documentation

In case of new functionality, my PR adds documentation in the following wiki page:

Not applicable since this PR does not contain new functionality, only tooling and dependency upgrades.

Code Quality

My diff has been formatted using helix-style.xml
(helix-style-intellij.xml if IntelliJ IDE is used)

Not applicable since this PR does not make any changes to the Java codebase.

author Micah Stubbs <micah.stubbs@gmail.com> 1651701734 -0700 committer Micah Stubbs <micah.stubbs@gmail.com> 1654121552 -0700 parent ed990b8 author Micah Stubbs <micah.stubbs@gmail.com> 1651701734 -0700 committer Micah Stubbs <micah.stubbs@gmail.com> 1654121488 -0700 ng update @angular/cli --from=5.2.11 --to=6 --migrate-only add engines, remove volta since it conflicts with necessary global angular-cli ngx-dag@0.0.2 --> @swimlane/ngx-graph@6.0.0 npm i -D rxjs-tslint, add rxjs specific linting rules, add lint:tslint alternative linting script npm install @angular/cdk@6.1.0 npm install @angular/{animations,cdk,common,compiler,compiler-cli,core,forms,material,platform-browser,platform-browser-dynamic,platform-server,router}@6.1.0 npm i ajv@6.9.1 npm i codelyzer@6.0.1 npm i ngx-clipboard@11.1.5 npm i tsickle@0.32.1 restore rxjs-compat@6.0.0-rc.0 to fix rxjs issue at npm run build WIP state with new Reactive Form Revert "WIP state with new Reactive Form" This reverts commit f9e2e37.

@ViewChild

author Micah Stubbs <micah.stubbs@gmail.com> 1652219675 -0700 committer Micah Stubbs <micah.stubbs@gmail.com> 1654121803 -0700 parent ed990b8 author Micah Stubbs <micah.stubbs@gmail.com> 1651701734 -0700 committer Micah Stubbs <micah.stubbs@gmail.com> 1654121552 -0700 parent ed990b8 author Micah Stubbs <micah.stubbs@gmail.com> 1651701734 -0700 committer Micah Stubbs <micah.stubbs@gmail.com> 1654121488 -0700 ng update @angular/cli --from=5.2.11 --to=6 --migrate-only add engines, remove volta since it conflicts with necessary global angular-cli ngx-dag@0.0.2 --> @swimlane/ngx-graph@6.0.0 npm i -D rxjs-tslint, add rxjs specific linting rules, add lint:tslint alternative linting script npm install @angular/cdk@6.1.0 npm install @angular/{animations,cdk,common,compiler,compiler-cli,core,forms,material,platform-browser,platform-browser-dynamic,platform-server,router}@6.1.0 npm i ajv@6.9.1 npm i codelyzer@6.0.1 npm i ngx-clipboard@11.1.5 npm i tsickle@0.32.1 restore rxjs-compat@6.0.0-rc.0 to fix rxjs issue at npm run build WIP state with new Reactive Form Revert "WIP state with new Reactive Form" This reverts commit f9e2e37. upgrade to typescript@^3.2.4 pin typescript at 3.2.4 manually update @angular/material to ^7.2.16 npm i @angular/flex-layout@7.0.0-beta.24 npm i tsickle@0.34.2 npm i @swimlane/ngx-datatable@14.0.0 npm i @swimlane/ngx-graph@6.0.0-rc.2 ObservableMedia --> MediaObserver to handle breaking change introduce in @angular/flex-layout@7.0.0-beta.23 npm i @swimlane/ngx-charts@11.2.0 manually upgrade to Angular 8.2.14 and associated major deps fix new TypeScript errors update bundle target to ES2015 since Angular 8 now automatically creates an ES5 compat build too @ViewChild {static: true} NG_DISABLE_VERSION_CHECK=1 npx @angular/cli@8 update @angular/material@8 --force use @angular/core@8.2.3 and friends, fix bad upgrade script that jumped ahead to v9 npm i typescript@3.5.3 npm i zone.js@~0.9.1 npm i tsickle@0.37.0 npm i @angular/flex-layout@8.0.0-beta.27 npm i @swimlane/ngx-datatable@16.0.0 npm i @ngtools/webpack@9.0.0-next.7 npm uninstall node-sass && npm i sass nvm use 10.9.0 && npm i manually update material imports, use deep imports npm i -D @angular-devkit/build-angular@0.803.29 npm i ngx-clipboard@12.1.2 npm i @swimlane/ngx-charts@13.0.4 npm i @swimlane/ngx-graph@7.0.0 npm i @swimlane/ngx-datatable@16.0.3 npm i @swimlane/ngx-datatable@16.1.0 update ngx-datatable style paths: no longer a release folder nvm use 10.13.0 Angular CLI update for packages - @angular/core@9, @angular/cli@9 @angular/cli migration - workspace-version-9 Angular Workspace migration. Update an Angular CLI workspace to version 9. @angular/cli migration - schematic-options-9 Replace deprecated 'styleext' and 'spec' Angular schematic options. npm i tsickle@0.38.1 add generic type to ModuleWithProviders in app routing module npm i rxjs@6.5.5 NG_DISABLE_VERSION_CHECK=1 npx @angular/cli@9 update @angular/material@9 --force npm i @angular/flex-layout@9.0.0-beta.31 ngForm --> ng-form npm i angulartics2@9.1.0 Anglartics2Piwik --> Angulartics2Matomo Revert "Anglartics2Piwik --> Angulartics2Matomo" This reverts commit 30d00dc. update piwik import specify one budget of 500k for initial js needed to bootstrap app ng-form --> ngForm npm i ngx-vis@3.1.0 install peer deps for ngx-vis npm i ngx-vis@2.3.2 Revert "npm i ngx-vis@2.3.2" This reverts commit 0dd8588. update dashboard network vis code to new syntax from ngx-vis@3 increase build budget to 3503kb, using current es5 build size as the baseline use array instead to DataSet to fix tests temporarily disable tracking lib angulartics to work around v9 bug, re-enable at v10 fix lint config path. should be client add npm run lint:fix script npm run lint:fix disable linting rules that generate new errors for now remove obsolete property decorator linting rules remove deprecated linting rules remove duplicate import, properly turn off linting rules with new failures npm i upgrade helix-front to Angular 10.2 remove entryComponents in shared.module.ts since Ivy renderer does not use these npx @angular/cli@10 update @angular/core@10 @angular/cli@10 npx @angular/cli@10 update @angular/material@10 --force npm i @angular/flex-layout@10.0.0-beta.32 npm i jasmine-core@3.8 npm i codelyzer@6.0.2 npm i angulartics2@10.1.0 npm i @swimlane/ngx-graph@7.2.0 npm i @swimlane/ngx-graph@7.2.0 npm i @swimlane/ngx-datatable@18.0.0 npm i @swimlane/ngx-charts@16.0.0 nvm use 12.20.2 async --> waitForAsync async --> waitForAsync in the rest of the tests mock http calls in config detail component guard data loading use HttpClientTestingModule to mock http calls handle case where not found is returned add error handling at login service fix errors with better error handling in user.ts

micahstubbs · 2022-06-02T20:26:39Z

helix-front/package.json

@@ -67,8 +68,8 @@
    "rxjs": "^6.5.5",
    "rxjs-compat": "^6.0.0-rc.0",
    "sass": "^1.51.0",
-    "tsickle": "^0.38.1",
-    "tslib": "^1.10.0",
+    "tsickle": "github:angular/tsickle#fdf6e86717648f1b9603752cb83486fa6dcac38f",


This is necessary because tsickle did not publish a release which supports "typescript": "4.0.8" which we need for other packages.

Details in this Github issue comment: #2095 (comment)

micahstubbs · 2022-06-02T20:28:11Z

helix-front/tslint.json

@@ -12,7 +12,7 @@
    ],
    "curly": true,
    "eofline": true,
-    "forin": true,
+    "forin": { "severity": "off" },


We can re-enable these rules which produced errors after upgrading our linting libraries later, in a future standalone PR.

micahstubbs

Self-review complete.

Some small comments for other reviewers.

LGTM.

somecodemonkey · 2022-06-02T22:11:10Z

LGTM

micahstubbs · 2022-06-02T22:13:56Z

This PR is ready to be merged, approved by @somecodemonkey
Final commit message:

Upgrade helix-front to Angular 10 Fix #2095

Fix security vulnerabilities in helix-front dependencies. 
Upgrade helix-front dependencies to improve contributor productivity.

micahstubbs mentioned this pull request Jun 1, 2022

Upgrade helix-front to Angular 10.2 #2104

Closed

10 tasks

micahstubbs force-pushed the 2095/upgrade-to-angular-10.2-clean branch from 5bdb25c to f2ba822 Compare June 2, 2022 16:51

micahstubbs added 2 commits June 2, 2022 13:15

micahstubbs force-pushed the 2095/upgrade-to-angular-10.2-clean branch from f2ba822 to b1e26d3 Compare June 2, 2022 20:17

remove duplicate semicolon

4f1a02b

micahstubbs commented Jun 2, 2022

View reviewed changes

add trailing newline to tsconfig.json

795ca7f

micahstubbs commented Jun 2, 2022

View reviewed changes

NealSun96 merged commit 3a9990c into apache:master Jun 2, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade helix-front to Angular 10.2 #2129

Upgrade helix-front to Angular 10.2 #2129

micahstubbs commented Jun 1, 2022

micahstubbs Jun 2, 2022

micahstubbs Jun 2, 2022

micahstubbs left a comment

somecodemonkey commented Jun 2, 2022

micahstubbs commented Jun 2, 2022

Upgrade helix-front to Angular 10.2 #2129

Upgrade helix-front to Angular 10.2 #2129

Conversation

micahstubbs commented Jun 1, 2022

Issues

Description

Testing

Documentation

Code Quality

micahstubbs Jun 2, 2022

Choose a reason for hiding this comment

micahstubbs Jun 2, 2022

Choose a reason for hiding this comment

micahstubbs left a comment

Choose a reason for hiding this comment

somecodemonkey commented Jun 2, 2022

micahstubbs commented Jun 2, 2022

Upgrade helix-front to Angular 10 Fix #2095