Skip to content

Commit

Permalink
Bump automate UI from Angular 8 -> Angular 9 (#3082)
Browse files Browse the repository at this point in the history
* 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 <msorens@chef.io>

* 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 <msorens@chef.io>

* 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 <msorens@chef.io>

* 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 <msorens@chef.io>

* 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 <msorens@chef.io>

* 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 <msorens@chef.io>

* Update cdk-high-contrast overwrite

Fixes:

```
SassError: wrong number of arguments (2 for 1) for `cdk-high-contrast'
```

Signed-off-by: Scott Christopherson <scott@chef.io>

* 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 <msorens@chef.io>

* 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 <msorens@chef.io>

* Release the lock on ngrx packages to 8.x

This allows migrating them to 9.x

Signed-off-by: michael sorens <msorens@chef.io>

* Update ngrx to 9.0 and bump angular minor versions

$ npm update
+ @ngrx/store@9.0.0
+ @ngrx/store-devtools@9.0.0
+ @ngrx/router-store@9.0.0
+ @ngrx/effects@9.0.0
+ @ngrx/entity@9.0.0
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/cli@9.0.6 postinstall /Users/msorens/code/go/src/github.com/chef/automate/components/automate-ui/node_modules/@angular/cli
> node ./bin/postinstall/script.js

npm WARN ngx-cookie@4.1.2 requires a peer of @nguniversal/express-engine@>=5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN sass-loader@8.0.0 requires a peer of fibers@>= 3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-subresource-integrity@1.3.4 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/language-service@9.0.6
+ @angular/cli@9.0.6
+ @angular/common@9.0.6
+ @angular/animations@9.0.6
+ @angular/compiler-cli@9.0.6
+ @angular/platform-browser-dynamic@9.0.6
+ @angular/platform-browser@9.0.6
+ @angular/platform-server@9.0.6
+ @angular/forms@9.0.6
+ @angular/router@9.0.6
+ @angular/cdk@9.1.2
+ @angular/compiler@9.0.6
+ @angular/material@9.1.2
+ @angular-devkit/build-angular@0.900.6
+ @angular/core@9.0.6
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 ngx-cookie@4.1.2 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 <msorens@chef.io>

* npm audit fix

Signed-off-by: michael sorens <msorens@chef.io>

* Resync dependency changes in doc file

Signed-off-by: michael sorens <msorens@chef.io>

* 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 <scott@chef.io>

* Suppress layoutFacade ExpressionChangedAfterItHasBeenCheckedError

Trying out the `setTimeout` workaround described by others in angular/angular#15634

Signed-off-by: Scott Christopherson <scott@chef.io>

* 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 <msorens@chef.io>

Co-authored-by: michael sorens <msorens@users.noreply.github.com>
Co-authored-by: Scott Christopherson <scott@chef.io>
  • Loading branch information
3 people authored Mar 17, 2020
1 parent 3310af2 commit 6ad6a7e
Show file tree
Hide file tree
Showing 89 changed files with 4,221 additions and 3,757 deletions.
21 changes: 13 additions & 8 deletions components/automate-ui/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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**

Reason: Trying to install the latest version `npm install diff2html@3.0.0` reports these errors:
Reason: After installing the latest version (`npm install diff2html@3`) then `ng build` reports these errors:

```text
delta-viewer.component.ts:3:10 - error TS2305: Module '"../../../../node_modules/diff2html/lib/diff2html"' has no exported member 'Diff2Html'.
ERROR in Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: File to import not found or unreadable: ~diff2html/dist/diff2html.
on line 4 of /Users/msorens/code/go/src/github.com/chef/automate/components/automate-ui/src/app/page-components/delta-viewer/delta-viewer.component.scss
>> @import "~diff2html/dist/diff2html";
```

Reference https://github.com/rtfpessoa/diff2html
Reference: https://github.com/rtfpessoa/diff2html

**Package immutable: ^3.8.2**

Expand All @@ -100,7 +103,7 @@ Per https://github.com/chef/automate/pull/1867, future versions have made a brea

**Package tslint: ^5.20.1**

Reason: Trying to install the latest version `npm install tslint@6.0.0` reports these warnings
Reason: Trying to install the latest version `npm install tslint@6` reports these warnings
so maintaining at highest version of 5.x.x:

```text
Expand All @@ -121,15 +124,17 @@ so maintaining at highest version of 3.5.x:
@ngtools/webpack@8.3.21 requires a peer of typescript@>=3.4 < 3.6 but none is installed.
```

**Package zone.js: ~0.9.1**
**Package @nguniversal/express-engine: 9.0.0-rc.2**

Reason: Trying to install the latest version `npm install zone.js@0.10.2` reports this warning
so maintaining at current version.
Reason: `ng build` reported this error:

```text
@angular/core@8.2.14 requires a peer of zone.js@~0.9.1
ERROR in The target entry-point "ngx-cookie" has missing dependencies:
- express-serve-static-core
```

Reference: https://github.com/salemdar/ngx-cookie/issues/106

## Angular Module Architecture

As a very brief introduction to the Angular architecture, it all starts with app.module.ts,
Expand Down
15 changes: 14 additions & 1 deletion components/automate-ui/angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"aot": true,
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
Expand All @@ -29,6 +30,12 @@
},
"configurations": {
"no_auth": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
Expand All @@ -37,6 +44,12 @@
]
},
"production": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
Expand Down Expand Up @@ -155,7 +168,7 @@
"schematics": {
"@schematics/angular:component": {
"prefix": "app",
"styleext": "scss"
"style": "scss"
},
"@schematics/angular:directive": {
"prefix": "app"
Expand Down
Loading

0 comments on commit 6ad6a7e

Please sign in to comment.