search

apache / helix

Mirror of Apache Helix
Apache License 2.0
462 stars 224 forks source link

upgrade helix-front to Angular 8.2 #2088

Closed micahstubbs closed 2 years ago

micahstubbs commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

And then, in all of our terminal windows:

nvm use 10.9.0
# Now using node v10.9.0 (npm v6.2.0)
micahstubbs commented 2 years ago 
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 commented 2 years ago 
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 commented 2 years ago 
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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago 
npm i tsickle@0.37.0

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

micahstubbs commented 2 years ago 
npm i @angular/flex-layout@8.0.0-beta.27

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

micahstubbs commented 2 years ago 
npm i @swimlane/ngx-graph@7.0.0-rc.1

blame commit

micahstubbs commented 2 years ago 
npm i @swimlane/ngx-datatable@16.0.0

blame

tags

micahstubbs commented 2 years ago 
npm i @ngtools/webpack@9.0.0-next.7

blame commit

micahstubbs commented 2 years ago

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 commented 2 years ago

First, let's remove the unneeded direct dep:

npm uninstall @ngtools/webpack
micahstubbs commented 2 years ago 
    "@angular-devkit/build-angular": "git+https://github.com/angular/angular-cli#85011b36d31faf4bf8d3720d9e96e9989400b5fd",

blame commit

micahstubbs commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago 
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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

micahstubbs commented 2 years ago

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

micahstubbs commented 2 years ago 
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 commented 2 years ago 
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 commented 2 years ago 
 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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

micahstubbs commented 2 years ago 
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 commented 2 years ago

Good news! There is a github issue for this exact error: https://github.com/swimlane/ngx-datatable/issues/1741

micahstubbs commented 2 years ago 
npm i @swimlane/ngx-datatable@16.0.2
micahstubbs commented 2 years ago

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 commented 2 years ago

For the first one:

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

micahstubbs commented 2 years ago

Maybe we need to update ngx-clipboard?

npm i ngx-clipboard@12.1.2

blame tags

micahstubbs commented 2 years ago

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

https://github.com/swimlane/ngx-charts/issues/1563

Let's try this:

npm i @swimlane/ngx-charts@13.0.4

blame tags

micahstubbs commented 2 years ago

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 commented 2 years ago

Let's try 

npm i @swimlane/ngx-graph@7.0.0

tags

Hooray, that fixes it!

micahstubbs commented 2 years ago

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 commented 2 years ago

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

https://github.com/swimlane/ngx-datatable/issues/1743#issuecomment-528952503

micahstubbs commented 2 years ago

🎉 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 commented 2 years ago

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

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