Upgrade helix-front to Angular 13.3 #2132

micahstubbs · 2022-06-01T23:12:55Z

Issue

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

Description

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

This PR upgrades helix-front to Angular 13.3.

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

Tests

Let's test the upgrade from Angular 12.2 to Angular 13.3.

yarn successfully installs dependencies
yarn type:check:watch shows 0 TypeScript errors
yarn lint runs and passes All files pass linting.
yarn build works
yarn start works, with 0 errors in the browser console.
yarn test runs and passes.

yarn start works as expected, and recognizes our proxy config in proxy.conf.json. The Helix UI renders with 0 errors in the browser console.

yarn 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.

micahstubbs

Initial self-review complete.

author Micah Stubbs <micah.stubbs@gmail.com> 1651701734 -0700 committer Micah Stubbs <micah.stubbs@gmail.com> 1654124891 -0700 parent ed990b8 author Micah Stubbs <micah.stubbs@gmail.com> 1651701734 -0700 committer Micah Stubbs <micah.stubbs@gmail.com> 1654124832 -0700 ng update @angular/cli --from=5.2.11 --to=6 --migrate-only 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 register proxy.conf.json in ng serve builder in angular.json 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> 1654125111 -0700 parent ed990b8 author Micah Stubbs <micah.stubbs@gmail.com> 1651701734 -0700 committer Micah Stubbs <micah.stubbs@gmail.com> 1654124891 -0700 parent ed990b8 author Micah Stubbs <micah.stubbs@gmail.com> 1651701734 -0700 committer Micah Stubbs <micah.stubbs@gmail.com> 1654124832 -0700 ng update @angular/cli --from=5.2.11 --to=6 --migrate-only 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 register proxy.conf.json in ng serve builder in angular.json 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 ng update @angular/core@11 @angular/cli@11 --force ng update @angular/material@11 --force npm i @swimlane/ngx-datatable@19.0.0 npm i @swimlane/ngx-graph@8.0.0-rc.2 npm i rxjs@6.6.3 npm i jasmine-core@3.8 npm i timsort@0.3.0 npm run lint --fix ng update @angular/core@12 @angular/cli@12 --force ng update @angular/material@12 --force ng update @angular/cli@12 --migrate-only production-by-default npm i @angular/flex-layout@12.0.0-beta.35 npm i @swimlane/ngx-datatable@20.0.0 npm i tsickle@0.43.0 update bundle budget to 3.44MB ng update @angular/core@13 @angular/cli@13 ng update @angular/material@13 specify tsconfig for e2e project for migration tools npm i @angular/flex-layout@13.0.0-beta.38 pin @swimlane/ngx-graph#9faac9665c5e769ae28a0ee6d872428b18bd07ce specify @swimlane/ngx-graph@8.0.0 exactly for Angular 13 support prefer yarn yarn add propagating-hammerjs@1.4.6 for vis-timeline nvm use 12.22.12 ng g @angular-eslint/schematics:convert-tslint-to-eslint helix-front ng g @angular-eslint/schematics:convert-tslint-to-eslint helix-front-e2e nvm use 14.15.5 and remove tslint nvm use 14.17.6 for @typescript-eslint/experimental-utils@5.17.0 yarn lint:fix disable linting rules from plugins that were previously disabled use yarn for type checking scripts resolve typescript errors border-radius fix the build add HelixUserRequest and HelixSession types use new HelixUserRequest type in main helix controller as well improve error handling in server

micahstubbs

Self-review after rebase and linting complete. LGTM.

micahstubbs · 2022-06-03T20:01:30Z

@somecodemonkey this PR is ready for your review. Thanks for sharing your frontend expertise!

somecodemonkey · 2022-06-03T20:42:25Z

🚢

micahstubbs · 2022-06-03T21:06:32Z

This PR is ready to be merged, approved by @somecodemonkey

Final commit message: Upgrade helix-front to Angular 13.3 Fix #2114

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 13.3 #2115

Closed

10 tasks

micahstubbs force-pushed the 2114/upgrade-to-angular-13.3-clean branch from 00278e4 to ec2ce76 Compare June 2, 2022 16:59

micahstubbs mentioned this pull request Jun 2, 2022

helix-front e2e tests fail: SessionNotCreatedError: session not created: Chrome version must be between 71 and 75 #2075

Closed

micahstubbs force-pushed the 2114/upgrade-to-angular-13.3-clean branch 2 times, most recently from 397c6af to 3e5b33e Compare June 3, 2022 19:37

micahstubbs commented Jun 3, 2022

View reviewed changes

micahstubbs added 5 commits June 3, 2022 12:50

remove duplicate semicolon

c7d8c34

add missing trailing newline

4f72faf

add trailing newline to tsconfig.json

34d3120

micahstubbs force-pushed the 2114/upgrade-to-angular-13.3-clean branch from b744505 to 34d3120 Compare June 3, 2022 19:52

micahstubbs added 2 commits June 3, 2022 12:52

delete package-lock.json. prefer yarn

6df19b0

yarn lint:fix

6dba8b6

micahstubbs commented Jun 3, 2022

View reviewed changes

junkaixue merged commit 8860a16 into apache:master Jun 3, 2022

micahstubbs deleted the 2114/upgrade-to-angular-13.3-clean branch June 3, 2022 21:12

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade helix-front to Angular 13.3 #2132

Upgrade helix-front to Angular 13.3 #2132

micahstubbs commented Jun 1, 2022 •

edited

Loading

micahstubbs left a comment

micahstubbs left a comment

micahstubbs commented Jun 3, 2022

somecodemonkey commented Jun 3, 2022

micahstubbs commented Jun 3, 2022 •

edited

Loading

Upgrade helix-front to Angular 13.3 #2132

Upgrade helix-front to Angular 13.3 #2132

Conversation

micahstubbs commented Jun 1, 2022 • edited Loading

Issue

Description

Tests

Documentation

Code Quality

micahstubbs left a comment

Choose a reason for hiding this comment

micahstubbs left a comment

Choose a reason for hiding this comment

micahstubbs commented Jun 3, 2022

somecodemonkey commented Jun 3, 2022

micahstubbs commented Jun 3, 2022 • edited Loading

Final commit message: Upgrade helix-front to Angular 13.3 Fix #2114

micahstubbs commented Jun 1, 2022 •

edited

Loading

micahstubbs commented Jun 3, 2022 •

edited

Loading