Bump automate UI from Angular 8 -> Angular 9 #3082

msorens · 2020-03-11T22:55:55Z

🔩 Description: What code changed, and why?

This PR bumps our Angular framework from v8 to v9, current at the time of writing. Furthermore, this PR also includes freshening almost every other 3rd party package used by automate-ui, with just a few exceptions noted below.
The steps for this global version update are detailed below.

Migrate Angular

This did two things:

Update the various @angular packages in package.json.
Automatically apply migration patches to our code base.

Commands:
ng update @angular/core @angular/cli
ng update @angular/material
ng update @nguniversal/express-engine (because npm outdated now revealed this was needed)

Reference: https://update.angular.io/#8.2:9.0l2

Update all other npm packages to current (or constrained) version

This was done with a combination of npm install, npm update, and npm audit fix.
The remaining items are all explicitly constrained:

$ npm outdated
Package                         Current      Wanted       Latest  Location
@nguniversal/express-engine  9.0.0-rc.2  9.0.0-rc.2        9.0.2  automate-ui
@types/jasmine                   3.3.10      3.3.10        3.5.9  automate-ui
@types/node                    12.12.29    12.12.29       13.9.0  automate-ui
diff2html                        2.12.2      2.12.2        3.1.3  automate-ui
immutable                         3.8.2       3.8.2  4.0.0-rc.12  automate-ui
rrule                             2.4.1       2.4.1        2.6.4  automate-ui
tslint                           5.20.1      5.20.1        6.1.0  automate-ui
typescript                        3.7.5       3.7.5        3.8.3  automate-ui

Reasons for these constraints are detailed in the README.md file.

Patch code incompatibilities due to all of the above

The few necessary patches, included in various commits herein, have achieved these milestones:

build (ng build)
unit tests (via wallaby in VSCode)
unit tests (make unit via command-line)
e2e tests (protractor via make e2e)
lint (make lint)
launch application (make serve)
application runs with no errors in browser
application runs with no warnings in browser

There are some breaking changes in Angular 9, but it does not appear that that broke anything for us. 🤞

⛓️ Related Resources

Last Angular Update (v6 -> v8): #1707
Update node (v10 -> v12): #2579
Bump other UI packages: #2576
Bump other UI packages again: #3057 (while working on Angular 9 issues)

👍 Definition of Done

With Angular 9 / TypeScript 3.7 ecosystem, Automate-UI and all of its unit and integration tests still function properly.

👟 How to Build and Test the Change

Do your usual hab studio setup notably including building automate-ui-devproxy.

Then (line numbers shown for reference):

[1] cd components/automate-ui
[2] mv node_modules /location/to/save/your/old/node_modules
[3] npm install
[4] make serve

Notes:
Line [2] is only needed if you want to be able to easily resume what you were doing before you tried out this PR! Once you are done evaluating, move or delete your new node_modules and restore your copy made in line [2].
Line [3] generates the new node_modules directory for this PR.
Line [4] starts automate-ui.

✅ Checklist

I have read the CONTRIBUTING document.
Tests added/updated?
Docs added/updated?
All commits have been signed-off for the Developer Certification of Origin.

msorens · 2020-03-12T06:01:42Z

components/automate-ui/README.md

@@ -83,13 +83,16 @@ That is a guess on my part, could not really confirm what version one should be



Note: The best way to get through all these files quickly is to go through the commits one by one.

msorens · 2020-03-12T06:01:55Z

components/automate-ui/README.md

@@ -83,13 +83,16 @@ That is a guess on my part, could not really confirm what version one should be

 **Package diff2html: ^2.12.2**



This section of the readme details the constrained packages; just a couple updates here.

msorens · 2020-03-12T06:02:14Z

components/automate-ui/angular.json

@@ -11,6 +11,7 @@
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {


Automatic changes done by the Angular migration.

msorens · 2020-03-12T06:02:34Z

components/automate-ui/package.json

@@ -24,23 +24,23 @@
  },
  "private": true,
  "dependencies": {


The key changed file; most done by the Angular migration; a few done manually by me.

msorens · 2020-03-12T06:02:55Z

components/automate-ui/src/app/app-routing.module.ts

@@ -78,7 +78,7 @@ const routes: Routes = [
        },
        {


More automatic updates.

msorens · 2020-03-12T06:03:10Z

components/automate-ui/src/app/components/authorized/authorized.component.spec.ts

@@ -63,7 +63,7 @@ describe('AuthorizedComponent', () => {
        AuthorizedComponent
      ]
    }).compileComponents();
-    const store: Store<NgrxStateAtom> = TestBed.get(Store);
+    const store: Store<NgrxStateAtom> = TestBed.inject(Store);


Most of the files in the PR are this breaking change that had to be updated.

msorens · 2020-03-12T06:06:59Z

components/automate-ui/src/styles/mixins/_mat-theming.scss

-@mixin cdk-high-contrast($target: active) {
-  @media (-ms-high-contrast: $target) {
-    @content;
+@mixin cdk-high-contrast($target: active, $encapsulation: 'any') {


Updated this file to the latest version from angular material. (This file is an excerpt from _theming.scss and the version we had failed to compile.)

Nice work sniffing this out!

That was @scottopherson's good work. 😁

Great work @scottopherson !

tarablack01

Great job! 👍🏻 LGTM

SEAjamieD

I'm seeing a few different errors in the console while clicking around.

the first one happens on entry

ng-validate.js:1 Uncaught TypeError: ng.probe is not a function
    at Object.e.isDebugMode (ng-validate.js:1)
    at l (ng-validate.js:24)
    at Object.602 (ng-validate.js:24)
    at r (ng-validate.js:1)
    at Object.603 (ng-validate.js:24)
    at r (ng-validate.js:1)
    at ng-validate.js:1
    at ng-validate.js:1

Another one popped up when clicking on Settings > API Tokens

core.js:5882 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'hidden': 'undefined'. Current value: 'false'. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook?
    at throwErrorIfNoChangesMode (core.js:8080)
    at bindingUpdated (core.js:19770)
    at Module.ɵɵproperty (core.js:20936)
    at UIComponent_Template (ui.component.html:32)
    at executeTemplate (core.js:11937)
    at refreshView (core.js:11784)
    at refreshComponent (core.js:13224)
    at refreshChildComponents (core.js:11515)
    at refreshView (core.js:11836)
    at refreshDynamicEmbeddedViews (core.js:13149)

Thats all i'm coming across so far

SEAjamieD · 2020-03-12T15:47:11Z

components/automate-ui/src/styles/mixins/_mat-theming.scss

-@mixin cdk-high-contrast($target: active) {
-  @media (-ms-high-contrast: $target) {
-    @content;
+@mixin cdk-high-contrast($target: active, $encapsulation: 'any') {


Nice work sniffing this out!

lancewf

I went through the event feed, compliance, and client runs pages with no problems. I did see the errors Jamie saw with the Settings -> Users page (below).

core.js:5882 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'hidden': 'undefined'. Current value: 'false'. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook?
at throwErrorIfNoChangesMode (core.js:8080)
at bindingUpdated (core.js:19770)
at Module.ɵɵproperty (core.js:20936)
at UIComponent_Template (ui.component.html:32)
at executeTemplate (core.js:11937)
at refreshView (core.js:11784)
at refreshComponent (core.js:13224)
at refreshChildComponents (core.js:11515)
at refreshView (core.js:11836)
at refreshDynamicEmbeddedViews (core.js:13149)

msorens · 2020-03-16T16:22:14Z

We resolved the ng.probe is not a function issue: that was due to having the Augury browser extension installed -- see angular/angular#30737

@Injectable

Reference: https://next.angular.io/guide/updating-to-version-9 $ ng update @angular/core @angular/cli The installed 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 74 dependencies. Fetching dependency metadata from registry... Updating package.json with dependency @angular/cli @ "9.0.5" (was "8.3.25")... Updating package.json with dependency @angular/core @ "9.0.5" (was "8.2.14")... Updating package.json with dependency @angular-devkit/build-angular @ "0.900.5" (was "0.803.25")... Updating package.json with dependency @angular/language-service @ "9.0.5" (was "8.2.14")... Updating package.json with dependency @angular-devkit/core @ "9.0.5" (was "8.3.25")... Updating package.json with dependency @angular-devkit/schematics @ "9.0.5" (was "8.3.25")... Updating package.json with dependency @angular/compiler-cli @ "9.0.5" (was "8.2.14")... Updating package.json with dependency @angular/animations @ "9.0.5" (was "8.2.14")... Updating package.json with dependency @angular/platform-browser @ "9.0.5" (was "8.2.14")... Updating package.json with dependency typescript @ "3.7.5" (was "3.5.3")... Updating package.json with dependency @angular/platform-browser-dynamic @ "9.0.5" (was "8.2.14")... Updating package.json with dependency @angular/platform-server @ "9.0.5" (was "8.2.14")... Updating package.json with dependency @angular/compiler @ "9.0.5" (was "8.2.14")... Updating package.json with dependency @angular/forms @ "9.0.5" (was "8.2.14")... Updating package.json with dependency @angular/common @ "9.0.5" (was "8.2.14")... Updating package.json with dependency @angular/router @ "9.0.5" (was "8.2.14")... Updating package.json with dependency zone.js @ "0.10.2" (was "0.9.1")... UPDATE package.json (4000 bytes) ✔ Packages installed successfully. ** Executing migrations of package '@angular/cli' ** ❯ Angular Workspace migration. Update an Angular CLI workspace to version 9. Package "@angular-devkit/schematics" found in the workspace package.json. This package typically does not need to be installed manually. If it is not being used by project code, it can be removed from the package.json. Package "@angular-devkit/core" found in the workspace package.json. This package typically does not need to be installed manually. If it is not being used by project code, it can be removed from the package.json. UPDATE angular.json (5000 bytes) UPDATE src/tsconfig.app.json (273 bytes) UPDATE package.json (4000 bytes) ✔ Packages installed successfully. Migration completed. ❯ Lazy loading syntax migration. Update lazy loading syntax to use dynamic imports. UPDATE src/app/app-routing.module.ts (10991 bytes) Migration completed. ❯ Replace deprecated 'styleext' and 'spec' Angular schematic options. UPDATE angular.json (4997 bytes) Migration completed. ** Executing migrations of package '@angular/core' ** ❯ Static flag migration. Removes the `static` flag from dynamic queries. As of Angular 9, the "static" flag defaults to false and is no longer required for your view and content queries. Read more about this here: https://v9.angular.io/guide/migration-dynamic-flag UPDATE src/app/pages/+compliance/+profile/+profile-overview/profile-overview.component.ts (8376 bytes) Migration completed. ❯ Missing @Injectable and incomplete provider definition migration. In 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 UPDATE src/app/helpers/history-selection/history-selection.ts (1538 bytes) Migration completed. ❯ ModuleWithProviders migration. In Angular 9, the ModuleWithProviders type without a generic has been deprecated. This migration adds the generic where it is missing. Read more about this here: https://v9.angular.io/guide/migration-module-with-providers UPDATE src/app/pages/+compliance/shared/shared.module.ts (1195 bytes) Migration completed. ❯ Renderer to Renderer2 migration. As of Angular 9, the Renderer class is no longer available. Renderer2 should be used instead. Read more about this here: https://v9.angular.io/guide/migration-renderer Migration completed. ❯ Undecorated classes with decorated fields migration. As of Angular 9, it is no longer supported to have Angular field decorators on a class that does not have an Angular decorator. Read more about this here: https://v9.angular.io/guide/migration-undecorated-classes Migration completed. ❯ Undecorated classes with DI migration. As of Angular 9, it is no longer supported to use Angular DI on a class that does not have an Angular decorator. Read more about this here: https://v9.angular.io/guide/migration-undecorated-classes Migration completed. Your project has been updated to Angular version 9! For more info, please see: https://v9.angular.io/guide/updating-to-version-9 Signed-off-by: michael sorens <[email protected]>

$ ng update @angular/material Using package manager: 'npm' Collecting installed dependencies... Found 74 dependencies. Fetching dependency metadata from registry... Updating package.json with dependency @angular/material @ "9.1.1" (was "8.2.3")... Updating package.json with dependency @angular/cdk @ "9.1.1" (was "8.2.3")... UPDATE package.json (3999 bytes) ✔ Packages installed successfully. ** Executing migrations of package '@angular/material' ** ❯ Updates Angular Material to v9 Could not find TypeScript project for project: automate-ui-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 9 UPDATE src/app/page-components/delete-data-feed-dialog/delete-data-feed-dialog.component.ts (405 bytes) UPDATE src/app/pages/data-feed/data-feed.component.ts (4183 bytes) UPDATE src/app/pages/data-feed/data-feed.component.spec.ts (4235 bytes) Migration completed. ** Executing migrations of package '@angular/cdk' ** ❯ Updates the Angular CDK to v9 Could not find TypeScript project for project: automate-ui-e2e ✓ Updated Angular CDK to version 9 Migration completed. Signed-off-by: michael sorens <[email protected]>

`npm outdated` now revealed this needed updating. $ ng update @nguniversal/express-engine Using package manager: 'npm' Collecting installed dependencies... Found 74 dependencies. Fetching dependency metadata from registry... Package "@nguniversal/express-engine" has a missing peer dependency of "express" @ "^4.15.2". Updating package.json with dependency @nguniversal/express-engine @ "9.0.1" (was "8.2.6")... UPDATE package.json (3999 bytes) ✔ Packages installed successfully. ** Executing migrations of package '@nguniversal/express-engine' ** ❯ Update @nguniversal/express-engine to version 9. UPDATE package.json (3999 bytes) ✔ Packages installed successfully. Migration completed. Signed-off-by: michael sorens <[email protected]>

Change TestBed.get -> TestBed.inject in 60 files $ make lint WARNING: /Users/msorens/code/go/src/github.com/chef/automate/components/automate-ui/src/app/modules/team/team-details/team-details.component.spec.ts:225:22 - get is deprecated: from v9.0.0 use TestBed.inject . . . Signed-off-by: michael sorens <[email protected]>

$make lint ERROR: /Users/msorens/code/go/src/github.com/chef/automate/components/automate-ui/src/app/helpers/history-selection/history-selection.ts:3:28 - " should be ' Signed-off-by: michael sorens <[email protected]>

Fixes: ``` SassError: wrong number of arguments (2 for 1) for `cdk-high-contrast' ``` Signed-off-by: Scott Christopherson <[email protected]>

$ ng build ERROR in src/app/pages/+compliance/shared/shared.module.ts:28:21 - error TS2304: Cannot find name 'ModuleWithProviders'. 28 static forRoot(): ModuleWithProviders<ComplianceSharedModule> { ~~~~~~~~~~~~~~~~~~~ Signed-off-by: michael sorens <[email protected]>

We were encountering this error from `ng build`: ``` ERROR in The target entry-point "ngx-cookie" has missing dependencies: - express-serve-static-core ``` The workaround is from this: salemdar/ngx-cookie#106 Signed-off-by: michael sorens <[email protected]>

The angular upgrade indicated: Package "@angular-devkit/schematics" found in the workspace package.json. This package typically does not need to be installed manually. If it is not being used by project code, it can be removed from the package.json. Package "@angular-devkit/core" found in the workspace package.json. This package typically does not need to be installed manually. If it is not being used by project code, it can be removed from the package.json. Signed-off-by: michael sorens <[email protected]>

This allows migrating them to 9.x Signed-off-by: michael sorens <[email protected]>

$ npm update + @ngrx/[email protected] + @ngrx/[email protected] + @ngrx/[email protected] + @ngrx/[email protected] + @ngrx/[email protected] updated 5 packages and audited 17029 packages in 12.309s found 2 moderate severity vulnerabilities run `npm audit fix` to fix them, or `npm audit` for details > @angular/[email protected] postinstall /Users/msorens/code/go/src/github.com/chef/automate/components/automate-ui/node_modules/@angular/cli > node ./bin/postinstall/script.js npm WARN [email protected] requires a peer of @nguniversal/express-engine@>=5.0.0 but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of fibers@>= 3.1.0 but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of html-webpack-plugin@^2.21.0 || ~3 || >=4.0.0-alpha.2 <5 but none is installed. You must install peer dependencies yourself. + @angular/[email protected] + @angular/[email protected] + @angular/[email protected] + @angular/[email protected] + @angular/[email protected] + @angular/[email protected] + @angular/[email protected] + @angular/[email protected] + @angular/[email protected] + @angular/[email protected] + @angular/[email protected] + @angular/[email protected] + @angular/[email protected] + @angular-devkit/[email protected] + @angular/[email protected] updated 39 packages and audited 17029 packages in 100.993s There was a warning about ngx-cookie, but that will be going away very soon: npm WARN [email protected] requires a peer of @nguniversal/express-engine@>=5.0.0 but none is installed. You must install peer dependencies yourself. Signed-off-by: michael sorens <[email protected]>

Signed-off-by: michael sorens <[email protected]>

@Injectable

Fixes: ``` WARN: 'DEPRECATED: DI is instantiating a token "MockLicenseFacadeService" that inherits its @Injectable decorator but does not provide one itself. This will become an error in v10. Please add @Injectable() to the "MockLicenseFacadeService" class.' WARN: 'DEPRECATED: DI is instantiating a token "MockLicenseFacadeService" that inherits its @Injectable decorator but does not provide one itself. This will become an error in v10. Please add @Injectable() to the "MockLicenseFacadeService" class.' WARN: 'DEPRECATED: DI is instantiating a token "MockLayoutFacadeService" that inherits its @Injectable decorator but does not provide one itself. This will become an error in v10. Please add @Injectable() to the "MockLayoutFacadeService" class.' WARN: 'DEPRECATED: DI is instantiating a token "MockLayoutFacadeService" that inherits its @Injectable decorator but does not provide one itself. This will become an error in v10. Please add @Injectable() to the "MockLayoutFacadeService" class.' ``` Signed-off-by: Scott Christopherson <[email protected]>

Trying out the `setTimeout` workaround described by others in angular/angular#15634 Signed-off-by: Scott Christopherson <[email protected]>

WARNING: /Users/msorens/code/go/src/github.com/chef/automate/components/automate-ui/src/app/entities/jobs/job.reducer.ts:28:35 - addAll is deprecated: addAll has been renamed. Use setAll instead. Signed-off-by: michael sorens <[email protected]>

scottopherson

Haven't encountered any new unresolved issues in the past week. Thanks for drivin this forward, LGTM 👍

lancewf

Everything looks good. I do not see that error anymore. I did find an error but it is on master also, so I am creating a new issue (#3130).

SEAjamieD

Thanks for all your work on this!

@Injectable

* Migration to Angular 9 Reference: https://next.angular.io/guide/updating-to-version-9 $ ng update @angular/core @angular/cli The installed 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 74 dependencies. Fetching dependency metadata from registry... Updating package.json with dependency @angular/cli @ "9.0.5" (was "8.3.25")... Updating package.json with dependency @angular/core @ "9.0.5" (was "8.2.14")... Updating package.json with dependency @angular-devkit/build-angular @ "0.900.5" (was "0.803.25")... Updating package.json with dependency @angular/language-service @ "9.0.5" (was "8.2.14")... Updating package.json with dependency @angular-devkit/core @ "9.0.5" (was "8.3.25")... Updating package.json with dependency @angular-devkit/schematics @ "9.0.5" (was "8.3.25")... Updating package.json with dependency @angular/compiler-cli @ "9.0.5" (was "8.2.14")... Updating package.json with dependency @angular/animations @ "9.0.5" (was "8.2.14")... Updating package.json with dependency @angular/platform-browser @ "9.0.5" (was "8.2.14")... Updating package.json with dependency typescript @ "3.7.5" (was "3.5.3")... Updating package.json with dependency @angular/platform-browser-dynamic @ "9.0.5" (was "8.2.14")... Updating package.json with dependency @angular/platform-server @ "9.0.5" (was "8.2.14")... Updating package.json with dependency @angular/compiler @ "9.0.5" (was "8.2.14")... Updating package.json with dependency @angular/forms @ "9.0.5" (was "8.2.14")... Updating package.json with dependency @angular/common @ "9.0.5" (was "8.2.14")... Updating package.json with dependency @angular/router @ "9.0.5" (was "8.2.14")... Updating package.json with dependency zone.js @ "0.10.2" (was "0.9.1")... UPDATE package.json (4000 bytes) ✔ Packages installed successfully. ** Executing migrations of package '@angular/cli' ** ❯ Angular Workspace migration. Update an Angular CLI workspace to version 9. Package "@angular-devkit/schematics" found in the workspace package.json. This package typically does not need to be installed manually. If it is not being used by project code, it can be removed from the package.json. Package "@angular-devkit/core" found in the workspace package.json. This package typically does not need to be installed manually. If it is not being used by project code, it can be removed from the package.json. UPDATE angular.json (5000 bytes) UPDATE src/tsconfig.app.json (273 bytes) UPDATE package.json (4000 bytes) ✔ Packages installed successfully. Migration completed. ❯ Lazy loading syntax migration. Update lazy loading syntax to use dynamic imports. UPDATE src/app/app-routing.module.ts (10991 bytes) Migration completed. ❯ Replace deprecated 'styleext' and 'spec' Angular schematic options. UPDATE angular.json (4997 bytes) Migration completed. ** Executing migrations of package '@angular/core' ** ❯ Static flag migration. Removes the `static` flag from dynamic queries. As of Angular 9, the "static" flag defaults to false and is no longer required for your view and content queries. Read more about this here: https://v9.angular.io/guide/migration-dynamic-flag UPDATE src/app/pages/+compliance/+profile/+profile-overview/profile-overview.component.ts (8376 bytes) Migration completed. ❯ Missing @Injectable and incomplete provider definition migration. In 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 UPDATE src/app/helpers/history-selection/history-selection.ts (1538 bytes) Migration completed. ❯ ModuleWithProviders migration. In Angular 9, the ModuleWithProviders type without a generic has been deprecated. This migration adds the generic where it is missing. Read more about this here: https://v9.angular.io/guide/migration-module-with-providers UPDATE src/app/pages/+compliance/shared/shared.module.ts (1195 bytes) Migration completed. ❯ Renderer to Renderer2 migration. As of Angular 9, the Renderer class is no longer available. Renderer2 should be used instead. Read more about this here: https://v9.angular.io/guide/migration-renderer Migration completed. ❯ Undecorated classes with decorated fields migration. As of Angular 9, it is no longer supported to have Angular field decorators on a class that does not have an Angular decorator. Read more about this here: https://v9.angular.io/guide/migration-undecorated-classes Migration completed. ❯ Undecorated classes with DI migration. As of Angular 9, it is no longer supported to use Angular DI on a class that does not have an Angular decorator. Read more about this here: https://v9.angular.io/guide/migration-undecorated-classes Migration completed. Your project has been updated to Angular version 9! For more info, please see: https://v9.angular.io/guide/updating-to-version-9 Signed-off-by: michael sorens <[email protected]> * Migration to Angular Material 9 $ ng update @angular/material Using package manager: 'npm' Collecting installed dependencies... Found 74 dependencies. Fetching dependency metadata from registry... Updating package.json with dependency @angular/material @ "9.1.1" (was "8.2.3")... Updating package.json with dependency @angular/cdk @ "9.1.1" (was "8.2.3")... UPDATE package.json (3999 bytes) ✔ Packages installed successfully. ** Executing migrations of package '@angular/material' ** ❯ Updates Angular Material to v9 Could not find TypeScript project for project: automate-ui-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 9 UPDATE src/app/page-components/delete-data-feed-dialog/delete-data-feed-dialog.component.ts (405 bytes) UPDATE src/app/pages/data-feed/data-feed.component.ts (4183 bytes) UPDATE src/app/pages/data-feed/data-feed.component.spec.ts (4235 bytes) Migration completed. ** Executing migrations of package '@angular/cdk' ** ❯ Updates the Angular CDK to v9 Could not find TypeScript project for project: automate-ui-e2e ✓ Updated Angular CDK to version 9 Migration completed. Signed-off-by: michael sorens <[email protected]> * Migration to @nguniversal 9 `npm outdated` now revealed this needed updating. $ ng update @nguniversal/express-engine Using package manager: 'npm' Collecting installed dependencies... Found 74 dependencies. Fetching dependency metadata from registry... Package "@nguniversal/express-engine" has a missing peer dependency of "express" @ "^4.15.2". Updating package.json with dependency @nguniversal/express-engine @ "9.0.1" (was "8.2.6")... UPDATE package.json (3999 bytes) ✔ Packages installed successfully. ** Executing migrations of package '@nguniversal/express-engine' ** ❯ Update @nguniversal/express-engine to version 9. UPDATE package.json (3999 bytes) ✔ Packages installed successfully. Migration completed. Signed-off-by: michael sorens <[email protected]> * Post-upgrade lint: update deprecated method Change TestBed.get -> TestBed.inject in 60 files $ make lint WARNING: /Users/msorens/code/go/src/github.com/chef/automate/components/automate-ui/src/app/modules/team/team-details/team-details.component.spec.ts:225:22 - get is deprecated: from v9.0.0 use TestBed.inject . . . Signed-off-by: michael sorens <[email protected]> * Post-upgrade compilation fix: ModuleWithProviders $ ng build ERROR in src/app/pages/+compliance/shared/shared.module.ts:28:21 - error TS2304: Cannot find name 'ModuleWithProviders'. 28 static forRoot(): ModuleWithProviders<ComplianceSharedModule> { ~~~~~~~~~~~~~~~~~~~ Signed-off-by: michael sorens <[email protected]> * Post-upgrade lint: fix quotes $make lint ERROR: /Users/msorens/code/go/src/github.com/chef/automate/components/automate-ui/src/app/helpers/history-selection/history-selection.ts:3:28 - " should be ' Signed-off-by: michael sorens <[email protected]> * Update cdk-high-contrast overwrite Fixes: ``` SassError: wrong number of arguments (2 for 1) for `cdk-high-contrast' ``` Signed-off-by: Scott Christopherson <[email protected]> * Lock in package version due to bug We were encountering this error from `ng build`: ``` ERROR in The target entry-point "ngx-cookie" has missing dependencies: - express-serve-static-core ``` The workaround is from this: salemdar/ngx-cookie#106 Signed-off-by: michael sorens <[email protected]> * Removing unneeded explicit dependencies The angular upgrade indicated: Package "@angular-devkit/schematics" found in the workspace package.json. This package typically does not need to be installed manually. If it is not being used by project code, it can be removed from the package.json. Package "@angular-devkit/core" found in the workspace package.json. This package typically does not need to be installed manually. If it is not being used by project code, it can be removed from the package.json. Signed-off-by: michael sorens <[email protected]> * Release the lock on ngrx packages to 8.x This allows migrating them to 9.x Signed-off-by: michael sorens <[email protected]> * Update ngrx to 9.0 and bump angular minor versions $ npm update + @ngrx/[email protected] + @ngrx/[email protected] + @ngrx/[email protected] + @ngrx/[email protected] + @ngrx/[email protected] updated 5 packages and audited 17029 packages in 12.309s found 2 moderate severity vulnerabilities run `npm audit fix` to fix them, or `npm audit` for details > @angular/[email protected] postinstall /Users/msorens/code/go/src/github.com/chef/automate/components/automate-ui/node_modules/@angular/cli > node ./bin/postinstall/script.js npm WARN [email protected] requires a peer of @nguniversal/express-engine@>=5.0.0 but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of fibers@>= 3.1.0 but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of html-webpack-plugin@^2.21.0 || ~3 || >=4.0.0-alpha.2 <5 but none is installed. You must install peer dependencies yourself. + @angular/[email protected] + @angular/[email protected] + @angular/[email protected] + @angular/[email protected] + @angular/[email protected] + @angular/[email protected] + @angular/[email protected] + @angular/[email protected] + @angular/[email protected] + @angular/[email protected] + @angular/[email protected] + @angular/[email protected] + @angular/[email protected] + @angular-devkit/[email protected] + @angular/[email protected] updated 39 packages and audited 17029 packages in 100.993s There was a warning about ngx-cookie, but that will be going away very soon: npm WARN [email protected] requires a peer of @nguniversal/express-engine@>=5.0.0 but none is installed. You must install peer dependencies yourself. Signed-off-by: michael sorens <[email protected]> * npm audit fix Signed-off-by: michael sorens <[email protected]> * Resync dependency changes in doc file Signed-off-by: michael sorens <[email protected]> * Suppress DI deprecation warning in unit test output Fixes: ``` WARN: 'DEPRECATED: DI is instantiating a token "MockLicenseFacadeService" that inherits its @Injectable decorator but does not provide one itself. This will become an error in v10. Please add @Injectable() to the "MockLicenseFacadeService" class.' WARN: 'DEPRECATED: DI is instantiating a token "MockLicenseFacadeService" that inherits its @Injectable decorator but does not provide one itself. This will become an error in v10. Please add @Injectable() to the "MockLicenseFacadeService" class.' WARN: 'DEPRECATED: DI is instantiating a token "MockLayoutFacadeService" that inherits its @Injectable decorator but does not provide one itself. This will become an error in v10. Please add @Injectable() to the "MockLayoutFacadeService" class.' WARN: 'DEPRECATED: DI is instantiating a token "MockLayoutFacadeService" that inherits its @Injectable decorator but does not provide one itself. This will become an error in v10. Please add @Injectable() to the "MockLayoutFacadeService" class.' ``` Signed-off-by: Scott Christopherson <[email protected]> * Suppress layoutFacade ExpressionChangedAfterItHasBeenCheckedError Trying out the `setTimeout` workaround described by others in angular/angular#15634 Signed-off-by: Scott Christopherson <[email protected]> * Update deprecated method name WARNING: /Users/msorens/code/go/src/github.com/chef/automate/components/automate-ui/src/app/entities/jobs/job.reducer.ts:28:35 - addAll is deprecated: addAll has been renamed. Use setAll instead. Signed-off-by: michael sorens <[email protected]> Co-authored-by: michael sorens <[email protected]> Co-authored-by: Scott Christopherson <[email protected]>

msorens added automate-auth ui automate-ui chore auth-team anything that needs to be on the auth team board labels Mar 11, 2020

msorens self-assigned this Mar 11, 2020

msorens requested review from a team March 11, 2020 22:56

msorens commented Mar 12, 2020

View reviewed changes

tarablack01 approved these changes Mar 12, 2020

View reviewed changes

SEAjamieD reviewed Mar 12, 2020

View reviewed changes

susanev added this to the Auth: Sprint 10 milestone Mar 12, 2020

lancewf reviewed Mar 13, 2020

View reviewed changes

msorens and others added 14 commits March 17, 2020 08:19

Post-upgrade lint: fix quotes

17bc683

$make lint ERROR: /Users/msorens/code/go/src/github.com/chef/automate/components/automate-ui/src/app/helpers/history-selection/history-selection.ts:3:28 - " should be ' Signed-off-by: michael sorens <[email protected]>

Update cdk-high-contrast overwrite

6bc4bb9

Fixes: ``` SassError: wrong number of arguments (2 for 1) for `cdk-high-contrast' ``` Signed-off-by: Scott Christopherson <[email protected]>

Release the lock on ngrx packages to 8.x

f54e85f

This allows migrating them to 9.x Signed-off-by: michael sorens <[email protected]>

npm audit fix

01653e4

Signed-off-by: michael sorens <[email protected]>

Resync dependency changes in doc file

8ec6e1a

Signed-off-by: michael sorens <[email protected]>

Scott Christopherson and others added 2 commits March 17, 2020 08:20

Suppress layoutFacade ExpressionChangedAfterItHasBeenCheckedError

9eb7496

Trying out the `setTimeout` workaround described by others in angular/angular#15634 Signed-off-by: Scott Christopherson <[email protected]>

Update deprecated method name

7eb5f22

WARNING: /Users/msorens/code/go/src/github.com/chef/automate/components/automate-ui/src/app/entities/jobs/job.reducer.ts:28:35 - addAll is deprecated: addAll has been renamed. Use setAll instead. Signed-off-by: michael sorens <[email protected]>

msorens force-pushed the ms/angular-9-upgrade branch from 8aaaeed to 7eb5f22 Compare March 17, 2020 15:31

scottopherson approved these changes Mar 17, 2020

View reviewed changes

lancewf approved these changes Mar 17, 2020

View reviewed changes

SEAjamieD approved these changes Mar 17, 2020

View reviewed changes

msorens merged commit 6ad6a7e into master Mar 17, 2020

msorens deleted the ms/angular-9-upgrade branch March 17, 2020 21:53

This was referenced Nov 15, 2020

Bump Angular version from 9.1.4 to 11.x -- in two steps #4439

Closed

Bring all automate-ui dependencies up-to-date #4440

Open

ekmixon mentioned this pull request Jan 10, 2023

[Snyk] Fix for 1 vulnerabilities ekmixon/automate#104

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bump automate UI from Angular 8 -> Angular 9 #3082

Bump automate UI from Angular 8 -> Angular 9 #3082

msorens commented Mar 11, 2020 •

edited

Loading

msorens Mar 12, 2020

msorens Mar 12, 2020

msorens Mar 12, 2020

msorens Mar 12, 2020

msorens Mar 12, 2020

msorens Mar 12, 2020

msorens Mar 12, 2020

SEAjamieD Mar 12, 2020

msorens Mar 16, 2020

SEAjamieD Mar 17, 2020

tarablack01 left a comment

SEAjamieD left a comment

SEAjamieD Mar 12, 2020

lancewf left a comment

msorens commented Mar 16, 2020

scottopherson left a comment

lancewf left a comment •

edited

Loading

SEAjamieD left a comment

		@@ -83,13 +83,16 @@ That is a guess on my part, could not really confirm what version one should be

		@@ -83,13 +83,16 @@ That is a guess on my part, could not really confirm what version one should be

		Package diff2html: ^2.12.2

Bump automate UI from Angular 8 -> Angular 9 #3082

Bump automate UI from Angular 8 -> Angular 9 #3082

Conversation

msorens commented Mar 11, 2020 • edited Loading

🔩 Description: What code changed, and why?

Migrate Angular

Update all other npm packages to current (or constrained) version

Patch code incompatibilities due to all of the above

⛓️ Related Resources

👍 Definition of Done

👟 How to Build and Test the Change

✅ Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tarablack01 left a comment

Choose a reason for hiding this comment

SEAjamieD left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lancewf left a comment

Choose a reason for hiding this comment

msorens commented Mar 16, 2020

scottopherson left a comment

Choose a reason for hiding this comment

lancewf left a comment • edited Loading

Choose a reason for hiding this comment

SEAjamieD left a comment

Choose a reason for hiding this comment

msorens commented Mar 11, 2020 •

edited

Loading

lancewf left a comment •

edited

Loading