Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

upgrade helix-front to Angular 8.2 #2088

Closed
micahstubbs opened this issue May 11, 2022 · 47 comments · Fixed by #2089
Closed

upgrade helix-front to Angular 8.2 #2088

micahstubbs opened this issue May 11, 2022 · 47 comments · Fixed by #2089

Comments

@micahstubbs
Copy link
Contributor

micahstubbs commented May 11, 2022 •
edited
Loading

https://update.angular.io/?l=3&v=7.2-8.2

see #2084 for the 7.2 upgrade and #2053 for motivation, details, and history.

Screen Shot 2022-05-11 at 11 50 39 AM
@micahstubbs
Copy link
Contributor Author

micahstubbs commented May 11, 2022 •
edited
Loading

First, let's manually update to these versions for these important deps:

Angular CLI version Angular version Node.js version TypeScript version RxJS version
~8.3.29 ~8.2.14 ^10.9.0 ~3.5.3 ^6.4.0

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

@micahstubbs
Copy link
Contributor Author

micahstubbs commented May 11, 2022 •
edited
Loading

And then, in all of our terminal windows:

nvm use 10.9.0
# Now using node v10.9.0 (npm v6.2.0)

@micahstubbs
Copy link
Contributor Author 

NG_DISABLE_VERSION_CHECK=1 npx @angular/cli@8 update @angular/cli@8 @angular/core@8
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.
Node.js version v10.9.0 detected.
The Angular CLI requires a minimum Node.js version of either v12.20, v14.15, or v16.10.

Please update your Node.js version or visit https://nodejs.org/ for additional instructions.

Okay, let's temporarily use node@12.20

nvm use 12.20
Now using node v12.20.2 (npm v6.14.11)

Now, this is better:

NG_DISABLE_VERSION_CHECK=1 npx @angular/cli@8 update @angular/cli@8 @angular/core@8
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 65 dependencies.
Fetching dependency metadata from registry...
Package '@angular/cli' is already up to date.
Package '@angular/core' is already up to date.

@micahstubbs
Copy link
Contributor Author

micahstubbs commented May 11, 2022 •
edited
Loading 

yarn type:check:watch 
#  Found 9 errors. Watching for file changes.

Let's fix those new TypeScript errors real quick.

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html

Errors fixed! They were all the same: @ViewChild(child, opts) now requires the second arg, opts. We pass in {static: true} to solve the TypeScript error and keep the old behavior.

If you use ViewChild or ContentChild, we're updating the way we resolve these queries to give developers more control. You must now specify that change detection should run before results are set. Example: @ContentChild('foo', {static: false}) foo !: ElementRef;. ng update will update your queries automatically, but it will err on the side of making your queries static for compatibility. Learn more on angular.io.

@micahstubbs
Copy link
Contributor Author 

NG_DISABLE_VERSION_CHECK=1 npx @angular/cli@8 update @angular/material@8 --force
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 65 dependencies.
Fetching dependency metadata from registry...
                  Package "@swimlane/ngx-graph" has an incompatible peer dependency to "@angular/animations" (requires "7.x" (extended), would install "9.1.13").
                  Package "@angular/flex-layout" has an incompatible peer dependency to "@angular/cdk" (requires "^7.0.0-rc.0", would install "8.2.3").
                  Package "@swimlane/ngx-datatable" has an incompatible peer dependency to "@angular/common" (requires "<8.0.0" (extended), would install "9.1.13").
                  Package "@swimlane/ngx-datatable" has an incompatible peer dependency to "@angular/compiler" (requires "<8.0.0" (extended), would install "9.1.13").
                  Package "@angular/http" has an incompatible peer dependency to "@angular/core" (requires "7.2.16" (extended), would install "9.1.13").
                  Package "@angular/http" has an incompatible peer dependency to "@angular/platform-browser" (requires "7.2.16" (extended), would install "9.1.13").
                  Package "@swimlane/ngx-datatable" has an incompatible peer dependency to "@angular/platform-browser-dynamic" (requires "<8.0.0" (extended), would install "9.1.13").
    Updating package.json with dependency @angular/compiler-cli @ "9.1.13" (was "7.2.16")...
    Updating package.json with dependency typescript @ "3.8.3" (was "3.5.3")...
    Updating package.json with dependency @angular/animations @ "9.1.13" (was "7.2.16")...
    Updating package.json with dependency @angular/cdk @ "8.2.3" (was "7.3.7")...
    Updating package.json with dependency @angular/common @ "9.1.13" (was "7.2.16")...
    Updating package.json with dependency @angular/compiler @ "9.1.13" (was "7.2.16")...
    Updating package.json with dependency @angular/core @ "9.1.13" (was "8.2.14")...
    Updating package.json with dependency @angular/forms @ "9.1.13" (was "7.2.16")...
    Updating package.json with dependency @angular/material @ "8.2.3" (was "7.3.7")...
    Updating package.json with dependency @angular/platform-browser @ "9.1.13" (was "7.2.16")...
    Updating package.json with dependency @angular/platform-browser-dynamic @ "9.1.13" (was "7.2.16")...
    Updating package.json with dependency @angular/platform-server @ "9.1.13" (was "7.2.16")...
    Updating package.json with dependency @angular/router @ "9.1.13" (was "7.2.16")...
    Updating package.json with dependency zone.js @ "0.10.3" (was "0.8.29")...
  UPDATE package.json (3106 bytes)
✔ Packages successfully installed.

It looks like updating packages worked.

@micahstubbs
Copy link
Contributor Author

However, migrating to the new material 8 did not:

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

❯ Updates the Angular CDK to v8.

✖ Migration failed: Cannot read property 'green' of undefined
  See "/private/var/folders/z5/t6s4vsk92clf48xxvn72hdqm0000gn/T/ng-6aP8e7/angular-errors.log" for further details.

@micahstubbs
Copy link
Contributor Author

Here's that log file:

[error] Error: Incompatible peer dependencies found.
Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together.
You can use the '--force' option to ignore incompatible peer dependencies and instead address these warnings later.
    at _validateUpdatePackages (/private/var/folders/z5/t6s4vsk92clf48xxvn72hdqm0000gn/T/.ng-temp-packages-PK4X4Q/node_modules/@angular/cli/src/commands/update/schematic/index.js:187:15)
    at /private/var/folders/z5/t6s4vsk92clf48xxvn72hdqm0000gn/T/.ng-temp-packages-PK4X4Q/node_modules/@angular/cli/src/commands/update/schematic/index.js:694:13
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

@micahstubbs
Copy link
Contributor Author

Let's manually fix the peer dep warnings and then try to run the migration script again.

@angular/flex-layout@7.0.0-beta.24 requires @angular/cdk@^7.0.0-rc.0
@angular/http@7.2.16 requires @angular/core@7.2.16
@angular/http@7.2.16 requires @angular/platform-browser@7.2.16
@ngtools/webpack@7.3.10 requires @angular/compiler-cli@>=5.0.0 <8.0.0 || ^7.0.0-beta.0
@ngtools/webpack@7.3.10 requires typescript@>=2.4.0 < 3.3
@swimlane/ngx-charts@11.2.0 requires @angular/animations@7.x || 8.x
@swimlane/ngx-charts@11.2.0 requires @angular/core@7.x || 8.x
@swimlane/ngx-charts@11.2.0 requires @angular/common@7.x || 8.x
@swimlane/ngx-charts@11.2.0 requires @angular/forms@7.x || 8.x
@swimlane/ngx-charts@11.2.0 requires @angular/platform-browser@7.x || 8.x
@swimlane/ngx-charts@11.2.0 requires @angular/platform-browser-dynamic@7.x || 8.x
@swimlane/ngx-datatable@14.0.0 requires @angular/common@<8.0.0
@swimlane/ngx-datatable@14.0.0 requires @angular/compiler@<8.0.0
@swimlane/ngx-datatable@14.0.0 requires @angular/core@<8.0.0
@swimlane/ngx-datatable@14.0.0 requires @angular/platform-browser@<8.0.0
@swimlane/ngx-datatable@14.0.0 requires @angular/platform-browser-dynamic@<8.0.0
@swimlane/ngx-graph@6.0.0-rc.2 requires @angular/animations@7.x
@swimlane/ngx-graph@6.0.0-rc.2 requires @angular/common@7.x
@swimlane/ngx-graph@6.0.0-rc.2 requires @angular/core@7.x
@swimlane/ngx-graph@6.0.0-rc.2 requires @angular/cdk@7.x
@swimlane/ngx-charts@10.1.0 requires @angular/animations@7.x
@swimlane/ngx-charts@10.1.0 requires @angular/cdk@7.x
@swimlane/ngx-charts@10.1.0 requires @angular/core@7.x
@swimlane/ngx-charts@10.1.0 requires @angular/common@7.x
@swimlane/ngx-charts@10.1.0 requires @angular/forms@7.x
@swimlane/ngx-charts@10.1.0 requires @angular/platform-browser@7.x
@swimlane/ngx-charts@10.1.0 requires @angular/platform-browser-dynamic@7.x
@swimlane/ngx-charts@10.1.0 requires zone.js@^0.8.26
tsickle@0.34.2 requires typescript@~3.1.3 || ~3.2.0-rc

@micahstubbs
Copy link
Contributor Author

Ugh, it looks like manually upgrading some deps to v8 tricked the upgrade script, which dutitifully upgraded those deps to v9. 🤦‍♀️

Here's our peer dep list after fixing that, and setting all the Angular packages to 8.2.3.

@angular/animations@8.2.14 requires @angular/core@8.2.14
@angular/common@8.2.14 requires @angular/core@8.2.14
@angular/core@8.2.3 requires zone.js@~0.9.1
@angular/flex-layout@7.0.0-beta.24 requires @angular/cdk@^7.0.0-rc.0
@angular/forms@8.2.14 requires @angular/core@8.2.14
@angular/forms@8.2.14 requires @angular/platform-browser@8.2.14
@angular/platform-browser@8.2.3 requires @angular/common@8.2.3
@angular/platform-browser-dynamic@8.2.14 requires @angular/core@8.2.14
@angular/platform-browser-dynamic@8.2.14 requires @angular/platform-browser@8.2.14
@angular/platform-server@8.2.14 requires @angular/core@8.2.14
@angular/platform-server@8.2.14 requires @angular/platform-browser@8.2.14
@angular/router@8.2.14 requires @angular/core@8.2.14
@angular/router@8.2.14 requires @angular/platform-browser@8.2.14
@ngtools/webpack@7.3.10 requires @angular/compiler-cli@>=5.0.0 <8.0.0 || ^7.0.0-beta.0
@ngtools/webpack@7.3.10 requires typescript@>=2.4.0 < 3.3
@swimlane/ngx-datatable@14.0.0 requires @angular/common@<8.0.0
@swimlane/ngx-datatable@14.0.0 requires @angular/compiler@<8.0.0
@swimlane/ngx-datatable@14.0.0 requires @angular/core@<8.0.0
@swimlane/ngx-datatable@14.0.0 requires @angular/platform-browser@<8.0.0
@swimlane/ngx-datatable@14.0.0 requires @angular/platform-browser-dynamic@<8.0.0
@swimlane/ngx-graph@6.0.0-rc.2 requires @angular/animations@7.x
@swimlane/ngx-graph@6.0.0-rc.2 requires @angular/common@7.x
@swimlane/ngx-graph@6.0.0-rc.2 requires @angular/core@7.x
@swimlane/ngx-graph@6.0.0-rc.2 requires @angular/cdk@7.x
@swimlane/ngx-charts@10.1.0 requires @angular/animations@7.x
@swimlane/ngx-charts@10.1.0 requires @angular/cdk@7.x
@swimlane/ngx-charts@10.1.0 requires @angular/core@7.x
@swimlane/ngx-charts@10.1.0 requires @angular/common@7.x
@swimlane/ngx-charts@10.1.0 requires @angular/forms@7.x
@swimlane/ngx-charts@10.1.0 requires @angular/platform-browser@7.x
@swimlane/ngx-charts@10.1.0 requires @angular/platform-browser-dynamic@7.x
@swimlane/ngx-charts@10.1.0 requires zone.js@^0.8.26
tsickle@0.34.2 requires typescript@~3.1.3 || ~3.2.0-rc

@micahstubbs
Copy link
Contributor Author

micahstubbs commented May 11, 2022 •
edited
Loading

Let's standardize on Angular 8.2.14.

npm i 

npm ERR! code ETARGET
npm ERR! notarget No matching version found for @angular/material@8.2.14
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'helix-front'
npm ERR! notarget

ah, ok, let's find a compatible version of @angular/material.

Okay, 8.2.3 is the latest. let's use that.

npm i @angular/material@8.2.3

@micahstubbs
Copy link
Contributor Author

a few new peer dep warnings:

@angular/animations@8.2.14 requires @angular/core@8.2.14
@angular/common@8.2.14 requires @angular/core@8.2.14
@angular/flex-layout@7.0.0-beta.24 requires @angular/cdk@^7.0.0-rc.0
@angular/flex-layout@7.0.0-beta.24 requires @angular/core@>=7.0.0-rc.0
@angular/forms@8.2.14 requires @angular/core@8.2.14
@angular/forms@8.2.14 requires @angular/platform-browser@8.2.14
@angular/platform-browser-dynamic@8.2.14 requires @angular/core@8.2.14
@angular/platform-browser-dynamic@8.2.14 requires @angular/platform-browser@8.2.14
@angular/platform-server@8.2.14 requires @angular/core@8.2.14
@angular/platform-server@8.2.14 requires @angular/platform-browser@8.2.14
@angular/router@8.2.14 requires @angular/core@8.2.14
@angular/router@8.2.14 requires @angular/platform-browser@8.2.14
@ngtools/webpack@7.3.10 requires @angular/compiler-cli@>=5.0.0 <8.0.0 || ^7.0.0-beta.0
@ngtools/webpack@7.3.10 requires typescript@>=2.4.0 < 3.3
@swimlane/ngx-charts@11.2.0 requires @angular/cdk@7.x || 8.x
@swimlane/ngx-charts@11.2.0 requires @angular/core@7.x || 8.x
@swimlane/ngx-charts@11.2.0 requires @angular/platform-browser@7.x || 8.x
@swimlane/ngx-datatable@14.0.0 requires @angular/common@<8.0.0
@swimlane/ngx-datatable@14.0.0 requires @angular/compiler@<8.0.0
@swimlane/ngx-datatable@14.0.0 requires @angular/core@<8.0.0
@swimlane/ngx-datatable@14.0.0 requires @angular/platform-browser@<8.0.0
@swimlane/ngx-datatable@14.0.0 requires @angular/platform-browser-dynamic@<8.0.0
@swimlane/ngx-graph@6.0.0-rc.2 requires @angular/animations@7.x
@swimlane/ngx-graph@6.0.0-rc.2 requires @angular/common@7.x
@swimlane/ngx-graph@6.0.0-rc.2 requires @angular/core@7.x
@swimlane/ngx-graph@6.0.0-rc.2 requires @angular/cdk@7.x
@swimlane/ngx-charts@10.1.0 requires @angular/animations@7.x
@swimlane/ngx-charts@10.1.0 requires @angular/cdk@7.x
@swimlane/ngx-charts@10.1.0 requires @angular/core@7.x
@swimlane/ngx-charts@10.1.0 requires @angular/common@7.x
@swimlane/ngx-charts@10.1.0 requires @angular/forms@7.x
@swimlane/ngx-charts@10.1.0 requires @angular/platform-browser@7.x
@swimlane/ngx-charts@10.1.0 requires @angular/platform-browser-dynamic@7.x
@swimlane/ngx-charts@10.1.0 requires zone.js@^0.8.26
codelyzer@6.0.1 requires @angular/core@>=2.3.1 <12.0.0 || ^11.0.0-next || ^11.1.0-next || ^11.2.0-next
ngx-clipboard@11.1.9 requires @angular/core@>=6.0.0 || ^7.0.0-rc.0
ngx-json-viewer@2.4.0 requires @angular/core@>=5.0.0
ngx-vis@0.1.0 requires @angular/core@^2.4.0 || >=4.0.0
ngx-window-token@1.0.2 requires @angular/core@>=6.0.0 || ^7.0.0-rc.0
tsickle@0.34.2 requires typescript@~3.1.3 || ~3.2.0-rc
@angular/material@8.2.3 requires @angular/cdk@8.2.3
@angular/material@8.2.3 requires @angular/core@^8.0.0 || ^9.0.0-0

@micahstubbs
Copy link
Contributor Author

micahstubbs commented May 11, 2022 •
edited
Loading

shorter list:

 @angular/flex-layout@7.0.0-beta.24 requires @angular/cdk@^7.0.0-rc.0 
 @ngtools/webpack@7.3.10 requires @angular/compiler-cli@>=5.0.0 <8.0.0 || ^7.0.0-beta.0 
 @ngtools/webpack@7.3.10 requires typescript@>=2.4.0 < 3.3 
 @swimlane/ngx-datatable@14.0.0 requires @angular/common@<8.0.0 
 @swimlane/ngx-datatable@14.0.0 requires @angular/compiler@<8.0.0 
 @swimlane/ngx-datatable@14.0.0 requires @angular/core@<8.0.0 
 @swimlane/ngx-datatable@14.0.0 requires @angular/platform-browser@<8.0.0 
 @swimlane/ngx-datatable@14.0.0 requires @angular/platform-browser-dynamic@<8.0.0 
 @swimlane/ngx-graph@6.0.0-rc.2 requires @angular/animations@7.x 
 @swimlane/ngx-graph@6.0.0-rc.2 requires @angular/common@7.x 
 @swimlane/ngx-graph@6.0.0-rc.2 requires @angular/core@7.x 
 @swimlane/ngx-graph@6.0.0-rc.2 requires @angular/cdk@7.x 
 @swimlane/ngx-charts@10.1.0 requires @angular/animations@7.x 
 @swimlane/ngx-charts@10.1.0 requires @angular/cdk@7.x 
 @swimlane/ngx-charts@10.1.0 requires @angular/core@7.x 
 @swimlane/ngx-charts@10.1.0 requires @angular/common@7.x 
 @swimlane/ngx-charts@10.1.0 requires @angular/forms@7.x 
 @swimlane/ngx-charts@10.1.0 requires @angular/platform-browser@7.x 
 @swimlane/ngx-charts@10.1.0 requires @angular/platform-browser-dynamic@7.x 
 @swimlane/ngx-charts@10.1.0 requires zone.js@^0.8.26 
 tsickle@0.34.2 requires typescript@~3.1.3 || ~3.2.0-rc 
 @angular/core@8.2.14 requires zone.js@~0.9.1

@micahstubbs
Copy link
Contributor Author 

npm i tsickle@0.37.0

https://github.com/angular/tsickle/blame/c5dc152ca5104ce0a9aaf88872aadc9c3d816fce/package.json

@micahstubbs
Copy link
Contributor Author 

npm i @angular/flex-layout@8.0.0-beta.27

https://github.com/angular/flex-layout/blame/d0627087a5a388385312d6cf3d005915c947397a/package.json

@micahstubbs
Copy link
Contributor Author 

npm i @swimlane/ngx-graph@7.0.0-rc.1

blame
commit

@micahstubbs
Copy link
Contributor Author 

npm i @swimlane/ngx-datatable@16.0.0

blame

tags

@micahstubbs
Copy link
Contributor Author 

npm i @ngtools/webpack@9.0.0-next.7

blame
commit

@micahstubbs
Copy link
Contributor Author

micahstubbs commented May 11, 2022 •
edited
Loading

Wait, that doesn't look right. We are still seeing the peer dep complaint.

@ngtools/webpack@7.3.10 requires a peer of @angular/compiler-cli@>=5.0.0 <8.0.0 || ^7.0.0-beta.0
@ngtools/webpack@7.3.10 requires a peer of typescript@>=2.4.0 < 3.3

Let's dig a little deeper:

npm ls @ngtools/webpack
helix-front@1.2.1 /Users/m/workspace/helix/helix-front
├─┬ @angular-devkit/build-angular@0.13.10
│ └── @ngtools/webpack@7.3.10
└── @ngtools/webpack@9.0.0-next.7

@micahstubbs
Copy link
Contributor Author

micahstubbs commented May 11, 2022 •
edited
Loading

First, let's remove the unneeded direct dep:

npm uninstall @ngtools/webpack

@micahstubbs
Copy link
Contributor Author

micahstubbs commented May 11, 2022 •
edited
Loading 

    "@angular-devkit/build-angular": "git+https://github.com/angular/angular-cli#85011b36d31faf4bf8d3720d9e96e9989400b5fd",

blame
commit

@micahstubbs
Copy link
Contributor Author

Almost done. Here's what we see now:

npm i

npm WARN deprecated puppeteer@1.12.2: 
Version no longer supported. Upgrade to @latest

audited 1355 packages in 10.589s
found 185 vulnerabilities (14 low, 70 moderate, 70 high, 31 critical)
  run `npm audit fix` to fix them, or `npm audit` for details

@micahstubbs
Copy link
Contributor Author

Let's see if npm test still works:

npm run test

> helix-front@1.2.1 test /helix/helix-front
> ng test

An unhandled exception occurred: Could not find module "@angular-devkit/build-angular" from "/helix/helix-front".
See "/private/var/folders/z5/t6s4vsk92clf48xxvn72hdqm0000gn/T/ng-24u948/angular-errors.log" for further details.
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! helix-front@1.2.1 test: `ng test`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the helix-front@1.2.1 test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /.npm/_logs/2022-05-11T20_30_00_520Z-debug.log

[error] Error: Could not find module "@angular-devkit/build-angular" from "/helix/helix-front".
    at Object.resolve (/helix/helix-front/node_modules/@angular/cli/node_modules/@angular-devkit/core/node/resolve.js:154:11)
    at WorkspaceNodeModulesArchitectHost.resolveBuilder (/helix/helix-front/node_modules/@angular/cli/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js:31:40)
    at TestCommand.initialize (/helix/helix-front/node_modules/@angular/cli/models/architect-command.js:134:55)
    at process._tickCallback (internal/process/next_tick.js:68:7)
    at Function.Module.runMain (internal/modules/cjs/loader.js:745:11)
    at startup (internal/bootstrap/node.js:266:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:596:3)

@micahstubbs
Copy link
Contributor Author

Hah, no, it does not. We'll need to fix that.

Let's go back to the remaining steps in the upgrade checklist, and then revisit this test script failure.

https://update.angular.io/?l=3&v=7.2-8.2

Screen Shot 2022-05-11 at 1 32 38 PM

@micahstubbs
Copy link
Contributor Author 

npm uninstall node-sass && npm i sass

npm WARN deprecated puppeteer@1.12.2: Version no longer supported. Upgrade to @latest

removed 75 packages and audited 1279 packages in 18.742s
found 170 vulnerabilities (14 low, 63 moderate, 63 high, 30 critical)
  run `npm audit fix` to fix them, or `npm audit` for details

+ sass@1.51.0
added 16 packages from 59 contributors and audited 1295 packages in 11.808s
found 170 vulnerabilities (14 low, 63 moderate, 63 high, 30 critical)
  run `npm audit fix` to fix them, or `npm audit` for details

@micahstubbs
Copy link
Contributor Author

micahstubbs commented May 11, 2022 •
edited
Loading

Let's try:

NG_DISABLE_VERSION_CHECK=1 npx @angular/cli@8 update @angular/material@8 --migrate-only
# "from" option is required when using the "migrate-only" option without a migration name.

This worked:

 NG_DISABLE_VERSION_CHECK=1 npx @angular/cli@8 update @angular/material@8
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 63 dependencies.
Fetching dependency metadata from registry...
Package '@angular/material' is already up to date.

I guess there was no code-mod / migration? 🤔

@micahstubbs
Copy link
Contributor Author

micahstubbs commented May 11, 2022 •
edited
Loading

Instead of importing from @angular/material, you should import deeply from the specific component. E.g. @angular/material/button. ng update will do this automatically for you.

It seems that ng update did not do this for us. Hhhhhmmmm.

Let's temporarily install the appropriate version of @angular/cli globally and then try ng update again.

npm i -g @angular/cli@8.3.29

Well, that didn't work. Oh well.

@micahstubbs
Copy link
Contributor Author

Okay, I manually updated client/app/shared/material.module.ts to use the new deep imports.

@micahstubbs
Copy link
Contributor Author

micahstubbs commented May 11, 2022 •
edited
Loading

Let's test the upgrade from Angular 7.2 to Angular 8.2.

  • npm install works
  • npm rm 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 appears to work.

@micahstubbs
Copy link
Contributor Author 

npm i 

npm WARN deprecated puppeteer@1.12.2: Version no longer supported. Upgrade to @latest
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.

> fsevents@1.2.13 install /helix/helix-front/node_modules/fsevents
> node install.js

  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/obj.target/fse/fsevents.o
./Release/.deps/Release/obj.target/fse/fsevents.o.d.raw 
  SOLINK_MODULE(target) Release/fse.node
added 2 packages from 9 contributors and audited 1181 packages in 15.878s
found 133 vulnerabilities (13 low, 51 moderate, 46 high, 23 critical)
  run `npm audit fix` to fix them, or `npm audit` for details

@micahstubbs
Copy link
Contributor Author

micahstubbs commented May 11, 2022 •
edited
Loading 

npm run lint

> helix-front@1.2.1 lint /helix/helix-front
> ng lint

An unhandled exception occurred: Could not find module "@angular-devkit/build-angular" from "/helix/helix-front".
See "/private/var/folders/z5/t6s4vsk92clf48xxvn72hdqm0000gn/T/ng-6LS3dj/angular-errors.log" for further details.
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! helix-front@1.2.1 lint: `ng lint`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the helix-front@1.2.1 lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     .npm/_logs/2022-05-11T20_54_49_376Z-debug.log

@micahstubbs
Copy link
Contributor Author 

 find ./node_modules/ -name package.json | xargs grep @angular-devkit/build-angular
./node_modules//lodash/package.json:    "/@angular-devkit/build-angular/node-sass",
./node_modules//path-is-absolute/package.json:    "/@angular-devkit/build-angular/glob",
./node_modules//aws-sign2/package.json:    "/@angular-devkit/build-angular/request",
./node_modules//fast-json-stable-stringify/package.json:    "/@angular-devkit/build-angular/har-validator/ajv",
./node_modules//har-schema/package.json:    "/@angular-devkit/build-angular/har-validator",
./node_modules//@angular/cli/package.json:      "@angular-devkit/build-angular": "0.803.29",
./node_modules//once/package.json:    "/@angular-devkit/build-angular/glob",
./node_modules//tslib/package.json:    "/@angular-devkit/build-angular/rxjs",
./node_modules//caseless/package.json:    "/@angular-devkit/build-angular/request",
./node_modules//inherits/package.json:    "/@angular-devkit/build-angular/glob",
./node_modules//psl/package.json:    "/@angular-devkit/build-angular/tough-cookie",
./node_modules//is-typedarray/package.json:    "/@angular-devkit/build-angular/request",
./node_modules//chalk/package.json:    "/@angular-devkit/build-angular/node-sass",
./node_modules//http-signature/package.json:    "/@angular-devkit/build-angular/request",
./node_modules//minimatch/package.json:    "/@angular-devkit/build-angular",
./node_modules//minimatch/package.json:    "/@angular-devkit/build-angular/glob",
./node_modules//fs.realpath/package.json:    "/@angular-devkit/build-angular/glob",
./node_modules//forever-agent/package.json:    "/@angular-devkit/build-angular/request",
./node_modules//uri-js/package.json:    "/@angular-devkit/build-angular/har-validator/ajv",
./node_modules//delayed-stream/package.json:    "/@angular-devkit/build-angular/combined-stream",
./node_modules//asynckit/package.json:    "/@angular-devkit/build-angular/form-data",
./node_modules//isstream/package.json:    "/@angular-devkit/build-angular/request",
./node_modules//json-stringify-safe/package.json:    "/@angular-devkit/build-angular/request",
./node_modules//ajv/package.json:    "/@angular-devkit/build-angular",
./node_modules//tunnel-agent/package.json:    "/@angular-devkit/build-angular/request",
./node_modules//mkdirp/package.json:    "/@angular-devkit/build-angular/node-sass",
./node_modules//performance-now/package.json:    "/@angular-devkit/build-angular/request",
./node_modules//inflight/package.json:    "/@angular-devkit/build-angular/glob",

@micahstubbs
Copy link
Contributor Author

let's try:

npm i -D @angular-devkit/build-angular@0.803.29

since that is the version required by our current version of @angular/cli.

@micahstubbs
Copy link
Contributor Author

it worked!

npm run lint

> helix-front@1.2.1 lint /Users/m/workspace/helix/helix-front
> ng lint

Linting "helix-front"...
All files pass linting.
Linting "helix-front-e2e"...

Could not find implementations for the following rules specified in the configuration:
    use-input-property-decorator
    use-output-property-decorator
    use-host-property-decorator
Try upgrading TSLint and/or ensuring that you have all necessary custom rules installed.
If TSLint was recently upgraded, you may have old rules configured which need to be cleaned up.

All files pass linting.

Note that missing rules warning is fixed in #2077.

@micahstubbs
Copy link
Contributor Author

Let's test the upgrade from Angular 7.2 to Angular 8.2.

  • npm install works
  • npm rm 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 appears to work.

@micahstubbs
Copy link
Contributor Author 

npm run build

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


ERROR in ./client/styles.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Failed to find '@swimlane/ngx-datatable/release/index.css'
  in [
    /helix/helix-front/client
  ]
    at resolveModule.catch.catch (/helix/helix-front/node_modules/postcss-import/lib/resolve-id.js:35:13)
    at runLoaders (/helix/helix-front/node_modules/webpack/lib/NormalModule.js:313:20)
    at /helix/helix-front/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /helix/helix-front/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/helix/helix-front/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Promise.resolve.then.then.catch (/helix/helix-front/node_modules/postcss-loader/src/index.js:208:9)
 @ multi ./client/styles.scss ./client/theme.scss styles[0]
ERROR in Unexpected value 'undefined' exported by the module 'NgxDatatableModule in /helix/helix-front/node_modules/@swimlane/ngx-datatable/swimlane-ngx-datatable.d.ts'

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! helix-front@1.2.1 build: `rm -rf dist && mkdir dist && ng build --aot --prod && tsc -p server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the helix-front@1.2.1 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /.npm/_logs/2022-05-11T21_05_01_977Z-debug.log

@micahstubbs
Copy link
Contributor Author

Good news! There is a github issue for this exact error: swimlane/ngx-datatable#1741

@micahstubbs
Copy link
Contributor Author

micahstubbs commented May 11, 2022 •
edited
Loading 

npm i @swimlane/ngx-datatable@16.0.2

@micahstubbs
Copy link
Contributor Author

It seems we are rewarded with new errors:

npm run build

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


ERROR in ./client/app/app.module.ngfactory.js 144:6447-6459
"export 'DOCUMENT' (imported as 'i29') was not found in '@angular/platform-browser'
    at HarmonyImportSpecifierDependency._getErrors (/helix/helix-front/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:109:11)
    at HarmonyImportSpecifierDependency.getErrors (/helix/helix-front/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:68:16)
    at Compilation.reportDependencyErrorsAndWarnings (/helix/helix-front/node_modules/webpack/lib/Compilation.js:1425:22)
    at hooks.finishModules.callAsync.err (/helix/helix-front/node_modules/webpack/lib/Compilation.js:1221:10)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/helix/helix-front/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:42:1)
    at AsyncSeriesHook.lazyCompileHook (/helix/helix-front/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.finish (/helix/helix-front/node_modules/webpack/lib/Compilation.js:1216:28)
    at hooks.make.callAsync.err (/helix/helix-front/node_modules/webpack/lib/Compiler.js:662:17)
    at _done (eval at create (/helix/helix-front/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at _err4 (eval at create (/helix/helix-front/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:72:22)
    at _addModuleChain (/helix/helix-front/node_modules/webpack/lib/Compilation.js:1148:12)
    at processModuleDependencies.err (/helix/helix-front/node_modules/webpack/lib/Compilation.js:1060:9)
    at process._tickCallback (internal/process/next_tick.js:61:11)
 @ ./client/main.ts
 @ multi ./client/main.ts
ERROR in ./node_modules/ngx-clipboard/fesm2015/ngx-clipboard.js 166:29-37
"export 'DOCUMENT' was not found in '@angular/platform-browser'
    at HarmonyImportSpecifierDependency._getErrors (/helix/helix-front/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:109:11)
    at HarmonyImportSpecifierDependency.getErrors (/helix/helix-front/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:68:16)
    at Compilation.reportDependencyErrorsAndWarnings (/helix/helix-front/node_modules/webpack/lib/Compilation.js:1425:22)
    at hooks.finishModules.callAsync.err (/helix/helix-front/node_modules/webpack/lib/Compilation.js:1221:10)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/helix/helix-front/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:42:1)
    at AsyncSeriesHook.lazyCompileHook (/helix/helix-front/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.finish (/helix/helix-front/node_modules/webpack/lib/Compilation.js:1216:28)
    at hooks.make.callAsync.err (/helix/helix-front/node_modules/webpack/lib/Compiler.js:662:17)
    at _done (eval at create (/helix/helix-front/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at _err4 (eval at create (/helix/helix-front/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:72:22)
    at _addModuleChain (/helix/helix-front/node_modules/webpack/lib/Compilation.js:1148:12)
    at processModuleDependencies.err (/helix/helix-front/node_modules/webpack/lib/Compilation.js:1060:9)
    at process._tickCallback (internal/process/next_tick.js:61:11)
 @ ./client/app/app.module.ngfactory.js
 @ ./client/main.ts
 @ multi ./client/main.ts
ERROR in ./client/app/app.module.ngfactory.js 144:6717-6723
"export 'ɵb' (imported as 'i56') was not found in '@swimlane/ngx-charts'
    at HarmonyImportSpecifierDependency._getErrors (/helix/helix-front/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:109:11)
    at HarmonyImportSpecifierDependency.getErrors (/helix/helix-front/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:68:16)
    at Compilation.reportDependencyErrorsAndWarnings (/helix/helix-front/node_modules/webpack/lib/Compilation.js:1425:22)
    at hooks.finishModules.callAsync.err (/helix/helix-front/node_modules/webpack/lib/Compilation.js:1221:10)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/helix/helix-front/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:42:1)
    at AsyncSeriesHook.lazyCompileHook (/helix/helix-front/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.finish (/helix/helix-front/node_modules/webpack/lib/Compilation.js:1216:28)
    at hooks.make.callAsync.err (/helix/helix-front/node_modules/webpack/lib/Compiler.js:662:17)
    at _done (eval at create (/helix/helix-front/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at _err4 (eval at create (/helix/helix-front/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:72:22)
    at _addModuleChain (/helix/helix-front/node_modules/webpack/lib/Compilation.js:1148:12)
    at processModuleDependencies.err (/helix/helix-front/node_modules/webpack/lib/Compilation.js:1060:9)
    at process._tickCallback (internal/process/next_tick.js:61:11)
 @ ./client/main.ts
 @ multi ./client/main.ts
ERROR in ./client/app/app.module.ngfactory.js 144:6725-6731
"export 'ɵb' (imported as 'i56') was not found in '@swimlane/ngx-charts'
    at HarmonyImportSpecifierDependency._getErrors (/helix/helix-front/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:109:11)
    at HarmonyImportSpecifierDependency.getErrors (/helix/helix-front/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:68:16)
    at Compilation.reportDependencyErrorsAndWarnings (/helix/helix-front/node_modules/webpack/lib/Compilation.js:1425:22)
    at hooks.finishModules.callAsync.err (/helix/helix-front/node_modules/webpack/lib/Compilation.js:1221:10)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/helix/helix-front/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:42:1)
    at AsyncSeriesHook.lazyCompileHook (/helix/helix-front/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.finish (/helix/helix-front/node_modules/webpack/lib/Compilation.js:1216:28)
    at hooks.make.callAsync.err (/helix/helix-front/node_modules/webpack/lib/Compiler.js:662:17)
    at _done (eval at create (/helix/helix-front/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at _err4 (eval at create (/helix/helix-front/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:72:22)
    at _addModuleChain (/helix/helix-front/node_modules/webpack/lib/Compilation.js:1148:12)
    at processModuleDependencies.err (/helix/helix-front/node_modules/webpack/lib/Compilation.js:1060:9)
    at process._tickCallback (internal/process/next_tick.js:61:11)
 @ ./client/main.ts
 @ multi ./client/main.ts
ERROR in ./client/app/app.module.ngfactory.js 144:6852-6858
"export 'ɵb' (imported as 'i56') was not found in '@swimlane/ngx-charts'
    at HarmonyImportSpecifierDependency._getErrors (/helix/helix-front/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:109:11)
    at HarmonyImportSpecifierDependency.getErrors (/helix/helix-front/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:68:16)
    at Compilation.reportDependencyErrorsAndWarnings (/helix/helix-front/node_modules/webpack/lib/Compilation.js:1425:22)
    at hooks.finishModules.callAsync.err (/helix/helix-front/node_modules/webpack/lib/Compilation.js:1221:10)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/helix/helix-front/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:42:1)
    at AsyncSeriesHook.lazyCompileHook (/helix/helix-front/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.finish (/helix/helix-front/node_modules/webpack/lib/Compilation.js:1216:28)
    at hooks.make.callAsync.err (/helix/helix-front/node_modules/webpack/lib/Compiler.js:662:17)
    at _done (eval at create (/helix/helix-front/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at _err4 (eval at create (/helix/helix-front/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:72:22)
    at _addModuleChain (/helix/helix-front/node_modules/webpack/lib/Compilation.js:1148:12)
    at processModuleDependencies.err (/helix/helix-front/node_modules/webpack/lib/Compilation.js:1060:9)
    at process._tickCallback (internal/process/next_tick.js:61:11)
 @ ./client/main.ts
 @ multi ./client/main.ts
ERROR in ./client/styles.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Failed to find '@swimlane/ngx-datatable/release/index.css'
  in [
    /helix/helix-front/client
  ]
    at resolveModule.catch.catch (/helix/helix-front/node_modules/postcss-import/lib/resolve-id.js:35:13)
    at runLoaders (/helix/helix-front/node_modules/webpack/lib/NormalModule.js:313:20)
    at /helix/helix-front/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /helix/helix-front/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/helix/helix-front/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Promise.resolve.then.then.catch (/helix/helix-front/node_modules/postcss-loader/src/index.js:208:9)
 @ multi ./client/styles.scss ./client/theme.scss styles[0]
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! helix-front@1.2.1 build: `rm -rf dist && mkdir dist && ng build --aot --prod && tsc -p server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the helix-front@1.2.1 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /.npm/_logs/2022-05-11T21_10_57_002Z-debug.log

@micahstubbs
Copy link
Contributor Author

For the first one:

https://stackoverflow.com/questions/56826692/export-document-was-not-found-in-angular-platform-browser

@micahstubbs
Copy link
Contributor Author

micahstubbs commented May 11, 2022 •
edited
Loading

Maybe we need to update ngx-clipboard?

npm i ngx-clipboard@12.1.2

blame
tags

@micahstubbs
Copy link
Contributor Author

micahstubbs commented May 11, 2022 •
edited
Loading

Okay, that helped. Now let's debug the ngx-charts related errors.

swimlane/ngx-charts#1563

Let's try this:

npm i @swimlane/ngx-charts@13.0.4

blame
tags

@micahstubbs
Copy link
Contributor Author

Not out of the woods yet:

npm run build

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


ERROR in ./client/styles.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Failed to find '@swimlane/ngx-datatable/release/index.css'
  in [
    /helix/helix-front/client
  ]
    at resolveModule.catch.catch (/helix/helix-front/node_modules/postcss-import/lib/resolve-id.js:35:13)
    at runLoaders (/helix/helix-front/node_modules/webpack/lib/NormalModule.js:313:20)
    at /helix/helix-front/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /helix/helix-front/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/helix/helix-front/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Promise.resolve.then.then.catch (/helix/helix-front/node_modules/postcss-loader/src/index.js:208:9)
 @ multi ./client/styles.scss ./client/theme.scss styles[0]
ERROR in ./client/app/app.module.ngfactory.js
Module not found: Error: Can't resolve '../../node_modules/@swimlane/ngx-graph/node_modules/@swimlane/ngx-charts/swimlane-ngx-charts.ngfactory' in '/helix/helix-front/client/app'
resolve '../../node_modules/@swimlane/ngx-graph/node_modules/@swimlane/ngx-charts/swimlane-ngx-charts.ngfactory' in '/helix/helix-front/client/app'
  using description file: /helix/helix-front/package.json (relative path: ./client/app)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /helix/helix-front/node_modules/@swimlane/ngx-graph/node_modules/@swimlane/ngx-charts/package.json (relative path: ./swimlane-ngx-charts.ngfactory)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /helix/helix-front/node_modules/@swimlane/ngx-graph/node_modules/@swimlane/ngx-charts/swimlane-ngx-charts.ngfactory doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /helix/helix-front/node_modules/@swimlane/ngx-graph/node_modules/@swimlane/ngx-charts/swimlane-ngx-charts.ngfactory.ts doesn't exist
      .tsx
        Field 'browser' doesn't contain a valid alias configuration
        /helix/helix-front/node_modules/@swimlane/ngx-graph/node_modules/@swimlane/ngx-charts/swimlane-ngx-charts.ngfactory.tsx doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        /helix/helix-front/node_modules/@swimlane/ngx-graph/node_modules/@swimlane/ngx-charts/swimlane-ngx-charts.ngfactory.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /helix/helix-front/node_modules/@swimlane/ngx-graph/node_modules/@swimlane/ngx-charts/swimlane-ngx-charts.ngfactory.js doesn't exist
      as directory
        /helix/helix-front/node_modules/@swimlane/ngx-graph/node_modules/@swimlane/ngx-charts/swimlane-ngx-charts.ngfactory doesn't exist
[/helix/helix-front/node_modules/@swimlane/ngx-graph/node_modules/@swimlane/ngx-charts/swimlane-ngx-charts.ngfactory]
[/helix/helix-front/node_modules/@swimlane/ngx-graph/node_modules/@swimlane/ngx-charts/swimlane-ngx-charts.ngfactory.ts]
[/helix/helix-front/node_modules/@swimlane/ngx-graph/node_modules/@swimlane/ngx-charts/swimlane-ngx-charts.ngfactory.tsx]
[/helix/helix-front/node_modules/@swimlane/ngx-graph/node_modules/@swimlane/ngx-charts/swimlane-ngx-charts.ngfactory.mjs]
[/helix/helix-front/node_modules/@swimlane/ngx-graph/node_modules/@swimlane/ngx-charts/swimlane-ngx-charts.ngfactory.js]
 @ ./client/app/app.module.ngfactory.js 18:0-126 126:510-546
 @ ./client/main.ts
 @ multi ./client/main.ts
ERROR in ./node_modules/@swimlane/ngx-graph/swimlane-ngx-graph.ngfactory.js
Module not found: Error: Can't resolve './node_modules/@swimlane/ngx-charts/swimlane-ngx-charts.ngfactory' in '/helix/helix-front/node_modules/@swimlane/ngx-graph'
resolve './node_modules/@swimlane/ngx-charts/swimlane-ngx-charts.ngfactory' in '/helix/helix-front/node_modules/@swimlane/ngx-graph'
  using description file: /helix/helix-front/node_modules/@swimlane/ngx-graph/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /helix/helix-front/node_modules/@swimlane/ngx-graph/node_modules/@swimlane/ngx-charts/package.json (relative path: ./swimlane-ngx-charts.ngfactory)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /helix/helix-front/node_modules/@swimlane/ngx-graph/node_modules/@swimlane/ngx-charts/swimlane-ngx-charts.ngfactory doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /helix/helix-front/node_modules/@swimlane/ngx-graph/node_modules/@swimlane/ngx-charts/swimlane-ngx-charts.ngfactory.ts doesn't exist
      .tsx
        Field 'browser' doesn't contain a valid alias configuration
        /helix/helix-front/node_modules/@swimlane/ngx-graph/node_modules/@swimlane/ngx-charts/swimlane-ngx-charts.ngfactory.tsx doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        /helix/helix-front/node_modules/@swimlane/ngx-graph/node_modules/@swimlane/ngx-charts/swimlane-ngx-charts.ngfactory.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /helix/helix-front/node_modules/@swimlane/ngx-graph/node_modules/@swimlane/ngx-charts/swimlane-ngx-charts.ngfactory.js doesn't exist
      as directory
        /helix/helix-front/node_modules/@swimlane/ngx-graph/node_modules/@swimlane/ngx-charts/swimlane-ngx-charts.ngfactory doesn't exist
[/helix/helix-front/node_modules/@swimlane/ngx-graph/node_modules/@swimlane/ngx-charts/swimlane-ngx-charts.ngfactory]
[/helix/helix-front/node_modules/@swimlane/ngx-graph/node_modules/@swimlane/ngx-charts/swimlane-ngx-charts.ngfactory.ts]
[/helix/helix-front/node_modules/@swimlane/ngx-graph/node_modules/@swimlane/ngx-charts/swimlane-ngx-charts.ngfactory.tsx]
[/helix/helix-front/node_modules/@swimlane/ngx-graph/node_modules/@swimlane/ngx-charts/swimlane-ngx-charts.ngfactory.mjs]
[/helix/helix-front/node_modules/@swimlane/ngx-graph/node_modules/@swimlane/ngx-charts/swimlane-ngx-charts.ngfactory.js]
 @ ./node_modules/@swimlane/ngx-graph/swimlane-ngx-graph.ngfactory.js 9:0-88 12:192-227 14:186-221 118:11-35 118:37-65
 @ ./client/app/workflow/workflow-dag/workflow-dag.component.ngfactory.js
 @ ./client/app/workflow/workflow-detail/workflow-detail.component.ngfactory.js
 @ ./client/app/app.module.ngfactory.js
 @ ./client/main.ts
 @ multi ./client/main.ts
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! helix-front@1.2.1 build: `rm -rf dist && mkdir dist && ng build --aot --prod && tsc -p server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the helix-front@1.2.1 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /.npm/_logs/2022-05-11T21_25_47_773Z-debug.log

@micahstubbs
Copy link
Contributor Author

micahstubbs commented May 11, 2022 •
edited
Loading

Let's try

npm i @swimlane/ngx-graph@7.0.0

tags

Hooray, that fixes it!

@micahstubbs
Copy link
Contributor Author

Here's what we see now:

npm run build

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


ERROR in ./client/styles.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Failed to find '@swimlane/ngx-datatable/release/index.css'
  in [
    /helix/helix-front/client
  ]
    at resolveModule.catch.catch (/helix/helix-front/node_modules/postcss-import/lib/resolve-id.js:35:13)
    at runLoaders (/helix/helix-front/node_modules/webpack/lib/NormalModule.js:313:20)
    at /helix/helix-front/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /helix/helix-front/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/helix/helix-front/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Promise.resolve.then.then.catch (/helix/helix-front/node_modules/postcss-loader/src/index.js:208:9)
 @ multi ./client/styles.scss ./client/theme.scss styles[0]

@micahstubbs
Copy link
Contributor Author

micahstubbs commented May 11, 2022 •
edited
Loading

Let's try this newer patch version:

npm i @swimlane/ngx-datatable@16.0.3

That didn't work. Let's try this newer minor version:

npm i @swimlane/ngx-datatable@16.1.0
# npm WARN @swimlane/ngx-datatable@16.1.0 
# requires a peer of rxjs@~6.5.5 but none is installed. 
# You must install peer dependencies yourself.

Didn't work either. Next tag:

npm i @swimlane/ngx-datatable@16.1.1

Still didn't work.

npm i @swimlane/ngx-datatable@17.0.0

This version requires Angular 9, so we don't want to go that far.

@swimlane/ngx-datatable@17.0.0 @angular/common@~9.1.0 
@swimlane/ngx-datatable@17.0.0 @angular/core@~9.1.0 
@swimlane/ngx-datatable@17.0.0 @angular/platform-browser@~9.1.0 
@swimlane/ngx-datatable@17.0.0 rxjs@~6.5.5

Let's stick with this and try a different debugging approach:

npm i @swimlane/ngx-datatable@16.1.1

Maybe this is the issue?

Screen Shot 2022-05-11 at 2 46 26 PM

swimlane/ngx-datatable#1743 (comment)

@micahstubbs
Copy link
Contributor Author

🎉 the build works now

npm run build

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

Generating ES5 bundles for differential loading...
ES5 bundle generation complete.

chunk {0} runtime-es2015.cdfb0ddb511f65fdc0a0.js (runtime) 1.45 kB [entry] [rendered]
chunk {0} runtime-es5.cdfb0ddb511f65fdc0a0.js (runtime) 1.45 kB [entry] [rendered]
chunk {2} polyfills-es2015.5f8478ca11379964500a.js (polyfills) 73 kB [initial] [rendered]
chunk {3} polyfills-es5.9ca2504573a2d649b53a.js (polyfills-es5) 164 kB [initial] [rendered]
chunk {1} main-es2015.34b298d23aeb3a922df1.js (main) 3.04 MB [initial] [rendered]
chunk {1} main-es5.34b298d23aeb3a922df1.js (main) 3.2 MB [initial] [rendered]
chunk {4} styles.9ad206abd9d05d86299b.css (styles) 89.1 kB [initial] [rendered]
Date: 2022-05-11T21:49:45.640Z - Hash: 0f49a947e430192baf95 - Time: 89449ms

@micahstubbs
Copy link
Contributor Author

micahstubbs commented May 11, 2022 •
edited
Loading

Let's test the upgrade from Angular 7.2 to Angular 8.2.

  • npm install works
  • npm rm 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.

Screen Shot 2022-05-11 at 2 51 54 PM

Helix UI renders with 0 errors and 1 warning in the browser console. The warning is understandable since the piwik telemetry library is not configured.

npm run test results

Screen Shot 2022-05-11 at 2 53 49 PM

This was referenced May 11, 2022
Merged
Closed
Closed
This was referenced May 18, 2022
Closed
Closed
Closed
micahstubbs added a commit to micahstubbs/helix that referenced this issue Jun 1, 2022
@micahstubbs
Upgrade helix-front to Angular 8.2 Fix apache#2088
f5d3a1f 
    Fix security vulnerabilities in helix-front dependencies.
    Upgrade helix-front dependencies to improve contributor productivity.
junkaixue pushed a commit that referenced this issue Jun 2, 2022
@micahstubbs
Upgrade helix-front to Angular 8.2 (#2089)
0efa9cf 
* 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

* npm i tsickle@0.34.2

* npm i @swimlane/ngx-datatable@14.0.0

* npm i @swimlane/ngx-graph@6.0.0-rc.2

* 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

* add trailing newline to tsconfig

* Upgrade helix-front to Angular 8.2 Fix #2088

    Fix security vulnerabilities in helix-front dependencies.
    Upgrade helix-front dependencies to improve contributor productivity.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Upgrade helix-front to Angular 8.2 micahstubbs/helix
1 participant
@micahstubbs