upgrade helix-front to Angular 12.2 #2112

micahstubbs · 2022-05-24T00:51:14Z

https://update.angular.io/?l=3&v=11.0-12.0

see:

upgrade helix-front to Angular 11.2 #2105
upgrade helix-front to Angular 10.2 #2095
upgrade helix-front to Angular 9.1 #2092
upgrade helix-front to Angular 8.2 #2088
upgrade helix-front to Angular 7.2 #2084
upgrade helix-front to Angular 6.1 #2053 for prior upgrades, as well as motivation, details, and history.

micahstubbs · 2022-05-24T00:53:53Z

Angular CLI version	Angular version	Node.js version	TypeScript version	RxJS version
~12.2.0	~12.2.0	^12.14.1 \|\| ^14.15.5	>= 4.2.4 <= 4.3.5	^6.5.5 \|\| ^7.0.1

https://gist.github.com/LayZeeDK/c822cc812f75bb07b7c55d07ba2719b3

micahstubbs · 2022-05-24T00:58:49Z

ng update @angular/core@12 @angular/cli@12 --force
The installed Angular CLI version is outdated.
Installing a temporary Angular CLI versioned 12.2.17 to perform the update.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Using package manager: 'npm'
Collecting installed dependencies...
Found 71 dependencies.
Fetching dependency metadata from registry...
    Updating package.json with dependency @angular-devkit/build-angular @ "12.2.17" (was "0.1102.19")...
    Updating package.json with dependency @angular/cli @ "12.2.17" (was "11.2.19")...
    Updating package.json with dependency @angular/compiler-cli @ "12.2.16" (was "11.2.14")...
    Updating package.json with dependency typescript @ "4.3.5" (was "4.0.8")...
    Updating package.json with dependency @angular/animations @ "12.2.16" (was "11.2.14")...
    Updating package.json with dependency @angular/common @ "12.2.16" (was "11.2.14")...
    Updating package.json with dependency @angular/compiler @ "12.2.16" (was "11.2.14")...
    Updating package.json with dependency @angular/core @ "12.2.16" (was "11.2.14")...
    Updating package.json with dependency @angular/forms @ "12.2.16" (was "11.2.14")...
    Updating package.json with dependency @angular/platform-browser @ "12.2.16" (was "11.2.14")...
    Updating package.json with dependency @angular/platform-browser-dynamic @ "12.2.16" (was "11.2.14")...
    Updating package.json with dependency @angular/platform-server @ "12.2.16" (was "11.2.14")...
    Updating package.json with dependency @angular/router @ "12.2.16" (was "11.2.14")...
    Updating package.json with dependency zone.js @ "0.11.5" (was "0.10.3")...
  UPDATE package.json (3367 bytes)
✔ Packages successfully installed.
** Executing migrations of package '@angular/cli' **

❯ Remove deprecated options from 'angular.json' that are no longer present in v12.
  UPDATE angular.json (4047 bytes)
  Migration completed.

❯ Update 'zone.js' to version 0.11.x.
  Read more about this here: https://github.com/angular/angular/blob/master/packages/zone.js/CHANGELOG.md#breaking-changes-since-zonejs-v0111
  UPDATE package.json (3368 bytes)
  UPDATE client/polyfills.ts (2441 bytes)
  UPDATE client/test.ts (1081 bytes)
✔ Packages installed successfully.
  Migration completed.

❯ Remove 'emitDecoratorMetadata' TypeScript compiler option.
  Decorator metadata is no longer needed by Angular.
  Read more about this here: https://www.typescriptlang.org/docs/handbook/decorators.html#metadata
  UPDATE tsconfig.json (432 bytes)
  Migration completed.

❯ Lazy loading syntax migration.
  Update lazy loading string syntax to use dynamic imports.
  Migration completed.

❯ Remove deprecated ViewEngine-based i18n build and extract options.
  Options present in the configuration will be converted to use non-deprecated options.
  Migration completed.

❯ Updates Web Worker consumer usage to use the new syntax supported directly by Webpack 5.
  Migration completed.

❯ Remove invalid 'skipTests' option in '@schematics/angular:module' Angular schematic options.
  Migration completed.

❯ Replace the deprecated '--prod' in package.json scripts.
  UPDATE package.json (3388 bytes)
  Migration completed.

** Executing migrations of package '@angular/core' **

❯ In Angular version 12, the type of ActivatedRouteSnapshot.fragment is nullable.
  This migration automatically adds non-null assertions to it.
  Migration completed.

❯ `XhrFactory` has been moved from `@angular/common/http` to `@angular/common`.
  Migration completed.

❯ Automatically migrates shadow-piercing selector from `/deep/` to the recommended alternative `::ng-deep`.
  Migration completed.

micahstubbs · 2022-05-24T01:02:51Z

ng update @angular/material@12 --force
Using package manager: 'npm'
Collecting installed dependencies...
Found 71 dependencies.
Fetching dependency metadata from registry...
                  Package "@angular/flex-layout" has an incompatible peer dependency to "@angular/cdk" (requires "^11.0.0", would install "12.2.13").
    Updating package.json with dependency @angular/cdk @ "12.2.13" (was "11.2.13")...
    Updating package.json with dependency @angular/material @ "12.2.13" (was "11.2.13")...
  UPDATE package.json (3387 bytes)
✔ Packages successfully installed.
** Executing migrations of package '@angular/cdk' **

❯ Updates the Angular CDK to v12.
    Could not find TypeScript project for project: helix-front-e2e

      ✓  Updated Angular CDK to version 12

  Migration completed.

** Executing migrations of package '@angular/material' **

❯ Updates Angular Material to v12.
    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
    Migrated 14 files to the new Angular Material theming API.

      ✓  Updated Angular Material to version 12

  UPDATE client/theme.scss (1415 bytes)
  UPDATE client/app/cluster/cluster.component.scss (273 bytes)
  UPDATE client/app/cluster/cluster-list/cluster-list.component.scss (379 bytes)
  UPDATE client/app/history/history-list/history-list.component.scss (256 bytes)
  UPDATE client/app/instance/instance-list/instance-list.component.scss (275 bytes)
  UPDATE client/app/resource/partition-list/partition-list.component.scss (332 bytes)
  UPDATE client/app/resource/resource-detail/resource-detail.component.scss (224 bytes)
  UPDATE client/app/shared/data-table/data-table.component.scss (296 bytes)
  UPDATE client/app/shared/detail-header/detail-header.component.scss (842 bytes)
  UPDATE client/app/shared/disabled-label/disabled-label.component.scss (373 bytes)
  UPDATE client/app/shared/node-viewer/node-viewer.component.scss (551 bytes)
  UPDATE client/app/shared/state-label/state-label.component.scss (414 bytes)
  UPDATE client/app/workflow/workflow-dag/workflow-dag.component.scss (329 bytes)
  UPDATE client/app/workflow/workflow-detail/workflow-detail.component.scss (363 bytes)
  Migration completed.

micahstubbs · 2022-05-24T01:15:09Z

ng update @angular/cli@12 --migrate-only production-by-default
Package specifier has no effect when using "migrate-only" option.
Using package manager: 'npm'
Collecting installed dependencies...
Found 71 dependencies.
** Executing 'production-by-default' of package '@angular/cli' **

❯ Optional migration to update Angular CLI workspace configurations to 'production' mode by default.
    Skipping updating "e2e" target configuration as a "production" configuration is not defined.
  UPDATE angular.json (4226 bytes)
  Migration completed.

micahstubbs · 2022-05-24T02:22:50Z

new peer dep warnings:

@angular/flex-layout@11.0.0-beta.33 --> @angular/cdk@^11.0.0
@swimlane/ngx-datatable@19.0.0 --> @angular/common@^11.0.2
@swimlane/ngx-datatable@19.0.0 --> @angular/core@^11.0.2
@swimlane/ngx-datatable@19.0.0 --> @angular/platform-browser@^11.0.2
ngx-vis@3.1.0 --> keycharm@^0.2.0
rxjs-tslint@0.1.8 --> tslint@^5.0.0
tsickle@0.39.1 --> typescript@~4.0.5

micahstubbs · 2022-05-24T02:24:22Z

npm i @angular/flex-layout@12.0.0-beta.35

blame
tags

micahstubbs · 2022-05-24T02:26:04Z

npm i @swimlane/ngx-datatable@20.0.0

blame
tags

micahstubbs · 2022-05-24T02:28:13Z

npm i tsickle@0.43.0

blame
tags

micahstubbs · 2022-05-24T02:29:22Z

Let's test the upgrade from Angular 11.2 to Angular 12.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 in the browser console.

npm run test results

micahstubbs · 2022-05-24T02:32:50Z

npm run build

> helix-front@1.2.1 build /helix/helix-front
> rm -rf dist && mkdir dist && ng build --aot --configuration production && tsc -p server

Warning: Support was requested for IE 11 in the project's browserslist configuration. IE 11 support is deprecated since Angular v12.
For more information, see https://angular.io/guide/browser-support
⠋ Generating browser application bundles (phase: setup)...
Compiling @angular/flex-layout/core : es2015 as esm2015

Compiling @angular/flex-layout/extended : es2015 as esm2015

Compiling @angular/flex-layout/flex : es2015 as esm2015

Compiling @angular/flex-layout/grid : es2015 as esm2015

Compiling @angular/flex-layout : es2015 as esm2015

Compiling @swimlane/ngx-datatable : es2015 as esm2015
✔ Browser application bundle generation complete.
✔ ES5 bundle generation complete.
✔ Copying assets complete.
⠋ Generating index html...1 rules skipped due to selector errors:
  0% -> Unmatched selector: %
✔ Index html generation complete.

Initial Chunk Files                      | Names                |      Size
main-es5.fbbd70a0cfbdc32bae32.js         | main                 |   3.17 MB
main-es2015.fbbd70a0cfbdc32bae32.js      | main                 |   3.04 MB
polyfills-es5.256f3c261511e781e052.js    | polyfills-es5        | 170.42 kB
styles.c26ab05561dddbbe6a71.css          | styles               | 101.91 kB
polyfills-es2015.5f80bac55d8febac24ff.js | polyfills            |  68.58 kB
runtime-es2015.dbb53c2a5bd7cf8c9a23.js   | runtime              |   1.45 kB
runtime-es5.dbb53c2a5bd7cf8c9a23.js      | runtime              |   1.45 kB

                                         | Initial ES5 Total    |   3.44 MB
                                         | Initial ES2015 Total |   3.21 MB

Build at: 2022-05-24T02:31:59.410Z - Hash: f2ce8819a64025f93e50 - Time: 114056ms

Warning: /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

Warning: /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: /helix/helix-front/node_modules/ngx-vis/__ivy_ngcc__/fesm2015/ngxvis.js depends on 'vis-network'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /helix/helix-front/node_modules/ngx-vis/__ivy_ngcc__/fesm2015/ngxvis.js depends on 'vis-timeline'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: bundle initial-es5 exceeded maximum budget. Budget 3.42 MB was not met by 15.64 kB with a total of 3.44 MB.

micahstubbs changed the title ~~upgrade helix-front to Angular 12~~ upgrade helix-front to Angular 12.2 May 24, 2022

micahstubbs mentioned this issue May 24, 2022

Upgrade to Angular 12.2 #2113

Closed

10 tasks

micahstubbs mentioned this issue Jun 1, 2022

Upgrade helix-front to Angular 12.2 #2131

Merged

10 tasks

junkaixue closed this as completed in #2131 Jun 3, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

upgrade helix-front to Angular 12.2 #2112

upgrade helix-front to Angular 12.2 #2112

micahstubbs commented May 24, 2022

micahstubbs commented May 24, 2022

micahstubbs commented May 24, 2022

micahstubbs commented May 24, 2022

micahstubbs commented May 24, 2022

micahstubbs commented May 24, 2022

micahstubbs commented May 24, 2022

micahstubbs commented May 24, 2022

micahstubbs commented May 24, 2022

micahstubbs commented May 24, 2022 •

edited

micahstubbs commented May 24, 2022

upgrade helix-front to Angular 12.2 #2112

upgrade helix-front to Angular 12.2 #2112

Comments

micahstubbs commented May 24, 2022

micahstubbs commented May 24, 2022

micahstubbs commented May 24, 2022

micahstubbs commented May 24, 2022

micahstubbs commented May 24, 2022

micahstubbs commented May 24, 2022

new peer dep warnings:

micahstubbs commented May 24, 2022

micahstubbs commented May 24, 2022

micahstubbs commented May 24, 2022

micahstubbs commented May 24, 2022 • edited

micahstubbs commented May 24, 2022

micahstubbs commented May 24, 2022 •

edited