upgrade helix-front to Angular 13#2054
Conversation
|
This PR is currently work in progress. There is a known build failure in the EDIT: now fixed by temporarily disabling css minification in prod build. current blocking issue: #2054 (comment)
|
|
Here is the commit log from my original branch. This is helpful if you want to see the path I took to upgrade the project. At a high level, I upgraded Angular one major version at a time, from Angular 5 to Angular 13. Along the way, I upgraded other dependencies as needed. commit log up until PR creationprefer yarn HttpModule --> HttpClientModule preserveWhitespaces: off use two dashes for args to ng commands in package.json @angular/compiler: "6.1.10", install dart sass, set node@v6 update to angular@6 npm install @angular/cli@7 @angular/core@7 npm install @angular/material@7 npm install @angular/animations@7 npm install @angular/cdk@7 @angular/common@7 @angular/compiler@7 @angular/forms@7 @angular/http@7 @angular/platform-browser@7 @angular/platform-browser-dynamic@7 npm install rxjs@6 update to angular@8 ng update @angular/cdk@9 --force ng update @angular/cdk@9 --force remove ~ from angular/material imports in scss files ng update @angular/material@9 remove entryComponents npx @angular/cli@10 update @angular/core@10 @angular/cli@10 npx @angular/cli@10 update @angular/material@10 npm install --save-dev typescript@~3.9 npm install tslint@6 tslib@2 stop using styleExt npx @angular/cli@11 update @angular/core@11 @angular/cli@11 --force npx @angular/cli@11 update @angular/material@11 npm install --save-dev typescript@4 migrate to angular.json. npx @angular/cli@12 update @angular/material@12 npx @angular/cli@13 update @angular/core@13 @angular/cli@13 --force npx @angular/cli@13 update @angular/material@13 --force npm install rxjs@^7.4.0 prefer yarn, add yarn.lock migrate from @angular/http to @angular/common/http use latest version of core-js remove unknown compiler option preserveWhiteSpacesg ng add @angular-eslint/schematics yarn add @typescript-eslint/eslint-plugin-tslint eslint-config-prettier --dev commit .eslintrc.js eslint file generate from tsli nt along with log file of rules that could not be converted rm tslint.json Revert "rm tslint.json" yarn lint remove root: true from .eslintrc.js add yarn lint:errors:only script convert all failing linting rules to warn, fix later in another PR for reviewer ease upgrade to @angular/flex-layout@13.0.0-beta.38 upgrade to @swimlane/ngx-charts@20.1.0 upgrade @types/node@17.0.23 remove unused dependency codelyzer upgrade @swimlane/ngx-datatable@20.0.0 upgrade to ngx-clipboard@15.1.0 upgrade to ngx-vis@3.1.0 add peer deps for ngx-vis add peer deps for ngx-vis dep vis-network add peer deps for ngx-vis dep vis-timeline update styles to angular13 syntax ng update @angular-eslint/schematics yarn add --dev @angular-devkit/build-angular yarn add --dev @angular/compiler-cli omit --prod from build command since it is the default update reference from .angular-cli.json to angular.json move --aot to production build options remove outDir add lint config to angular.json based on SAP spartacus angular.json ng update @angular-eslint/schematics regenerate yarn.lock use ngx-json-viewer version that is upgraded to angular13 pin latest commit of ngx-datatable that supports angular 13 upgrade ngx-vis dependency upgrade to angulartics2@12.0.0 migrate from ngx-dag to @swimlane/ngx-graph fix css property border-radius typo fix sass undefined variable error try a different way to specify latest commit for @swimlane/ngx-datatable set swimlane/ngx-datable#master add types yarn scripts add missing space in scss import prettier ignore scss files add type declaration for third party library @swimlane/ngx-datatable specify a type for ModuleWithProviders AppRoutingModule --> appRoutingModule Angulartics2Piwik --> Angulartics2Matomo add comment about Piwik --> Matomo rename in angulartics2 fix angular material imports fix rxjs imports and tune linting rules turn off eslint quotes rule and add for now noop prettier config to document project preference for single quoted strings lint and fix type errors in user controller fix linting and typescript errors in helix controller skipLibCheck: true do not type check node_modules fix all remaining typescript errors yarn lint:fix update material theme defs fix mat color palette references update mat.get-color-from-palette and mat.define-palette usage update path to ngx-datatable styles fix paths for ngx-datatable styles import scss file material theme for ngx-datatable upgrade to sass@1.50.0 import style from source for ngx-datatable move library type declarations in app root client dir rm top level types dir replace material ease-out transition with css equivalent add helpful comment for transition migrate styles to use new mat.-palette for getting colors get hi-warn color directly from theme get more colors directly from theme one more place to get color directly from theme use relative path to theme convert remaining theme import to @use from relative path |
| "includePaths": [ | ||
| "client/" | ||
| ] | ||
| } |
There was a problem hiding this comment.
This change is recommended by this StackOverflow Answer from earlier today.
However, I still see this error:
./client/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Transform failed with 1 error:
helix/helix-front/client/app/cluster/cluster-list/cluster-list.component.scss:17:100: ERROR: Unterminated string token
at helix/helix-front/node_modules/@ngtools/webpack/src/ivy/loader.js:81:18
at runMicrotasks (<anonymous>)
at processTicksAndRejections (internal/process/task_queues.js:97:5)There was a problem hiding this comment.
Here is the docs page for this option: https://angular.io/guide/workspace-config#style-preprocessor-options
|
Trying the approach mentioned in this thread now https://stackoverflow.com/questions/64656557/angular-throwing-material-errors-after-upgrading-to-version-9 |
| "no-unused-expression": true, | ||
| "no-use-before-declare": true, | ||
| "no-var-keyword": true, | ||
| "object-literal-sort-keys": false, |
There was a problem hiding this comment.
probably should remove since we have tslint-to-eslint-config.log
|
Why we need to do this upgrade? |
|
hi @junkaixue, thanks for the question. Two acute problems motivate upgrading the web app
for example: Other developer ergonomics issues also motivate the upgrade:
You can read more in #2053 😄 |
|
Closed in favor of #2078, for now. |
2 participants
Issues
Fix #2053 #1573 #1574
Description
This PR upgrades helix-front to Angular 13. In order to do this, it upgrades many other dependencies, and makes necessary code changes in response to breaking changes from dependencies. This PR also fixes or ignores TypeScript and Linting errors that arise when upgrading type-checking and linting tools.
Tests
Currently work in progress. There is a known build failure in the
yarn buildscript, which @micahstubbs is currently debugging.current blocking issue: #2054 (comment)
Changes that Break Backward Compatibility (Optional)
N/A
Documentation (Optional)
No new functionality, only dependency upgrades to unblock development for future new functionality.