Dependency hoisting issues with @angular-devkit/build-angular 0.803.14

[the-ult]

Expected Behavior

NX is using the @angular-devkit/build-angular provided by Angular instead of multiple versions

Current Behavior

After upgrading to NX 8.7.0 running a project does not work anymore (building works without problems)

• npm run start simple-app fails. (as does ng serve simple-app)

@nrwl/linter seems to have a direct dependency on an older version of @angular-devkit/build-angular and @nrwl/node also a direct dependency on webpack-dev-server. Essentially you are ending up with 3 versions of webpack-dev-server and @angular-devkit/build-webpack is picking up the buggy version.

Detailed information

I started the issue in Angular CLI, but it seems the root cause is caused by NX.

For detailed information and a sample repo @see

• @angular-devkit/build-angular 0.803.14 results in devServer error
  

npm ls webpack-dev-server
ult-starter-workspace@0.0.0 
+-- @angular-devkit/build-angular@0.803.15
| `-- webpack-dev-server@3.9.0
`-- @nrwl/node@8.7.0
  +-- @nrwl/linter@8.7.0
  | `-- @angular-devkit/build-angular@0.803.2
  |   `-- webpack-dev-server@3.8.0
  `-- webpack-dev-server@3.1.14

• @angular-devkit/build-angular: 0.900.0-next.18 results in sass @import error
  • and/or TypeError: compilation.getAsset is not a function

❯ npm ls webpack
ult-starter-workspace@0.0.0 /home/the_ult/dev/ult-starter-workspace
├─┬ @angular-devkit/build-angular@0.900.0-next.18
│ └── webpack@4.41.2 
└─┬ @nrwl/node@8.7.0
  ├─┬ @nrwl/linter@8.7.0
  │ └─┬ UNMET PEER DEPENDENCY @angular-devkit/build-angular@0.803.2
  │   └── webpack@4.39.2  deduped
  └── webpack@4.39.2 

npm ERR! peer dep missing: @angular-devkit/build-angular@>=0.800.0, 
required by @angular-eslint/builder@0.0.1-alpha.17

Context

>  NX  Report

  @nrwl/angular : 8.7.0
  @nrwl/cli : 8.7.0
  @nrwl/cypress : 8.7.0
  @nrwl/eslint-plugin-nx : 8.7.0
  @nrwl/express : 8.7.0
  @nrwl/jest : 8.7.0
  @nrwl/linter : 8.7.0
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : 8.7.0
  @nrwl/react : Not Found
  @nrwl/schematics : Not Found
  @nrwl/tao : 8.7.0
  @nrwl/web : Not Found
  @nrwl/workspace : 8.7.0
  typescript : 3.6.4

❯ ng --version

Angular CLI: 9.0.0-next.18
Node: 12.9.1
OS: linux x64
Angular: 9.0.0-next.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.3
@angular-devkit/build-angular     0.900.0-next.18
@angular-devkit/build-optimizer   0.900.0-next.18
@angular-devkit/build-webpack     0.900.0-next.18
@angular-devkit/core              9.0.0-next.18
@angular-devkit/schematics        8.3.3
@angular/cdk                      8.2.3
@angular/cli                      9.0.0-next.18
@angular/material                 8.2.3
@ngtools/webpack                  9.0.0-next.18
@schematics/angular               8.3.3
@schematics/update                0.900.0-next.18
rxjs                              6.5.3
typescript                        3.6.4
webpack                           4.39.2

Other

There a 2 different issues, but since the root cause seems to be the same, I referenced them both in this issue.

[FrozenPandaz]

@nrwl/linter no longer depends on @angular-devkit/build-angular as of @nrwl/linter@8.8.0 Fixed by b220a17

#2114 fixes this issue by adding a webpackFactory which is a new feature in @angular-devkit/architect@9.0.0-rc.5

[jusefb]

This is still an issue. I have update to nx 8.9.0:

@nrwl/angular : 8.9.0
  @nrwl/cli : 8.9.0
  @nrwl/cypress : 8.9.0
  @nrwl/eslint-plugin-nx : Not Found
  @nrwl/express : Not Found
  @nrwl/jest : 8.9.0
  @nrwl/linter : 8.9.0
  @nrwl/nest : 8.9.0
  @nrwl/next : Not Found
  @nrwl/node : 8.9.0
  @nrwl/react : Not Found
  @nrwl/schematics : Not Found
  @nrwl/tao : 8.9.0
  @nrwl/web : 8.9.0
  @nrwl/workspace : 8.9.0
  typescript : 3.5.3

ng serve works for angular projects but fails for web projects (@nrwl/web) with the following error:

\SourceMapDevToolPlugin.js:178
const asset = compilation.getAsset(file).source;

TypeError: compilation.getAsset is not a function
...

here is the output of ng --version

@angular-devkit/architect          0.803.14
@angular-devkit/build-angular      0.803.20
@angular-devkit/build-ng-packagr   0.803.14
@angular-devkit/build-optimizer    0.803.20
@angular-devkit/build-webpack      0.803.14
@angular-devkit/core               8.3.14
@angular-devkit/schematics         8.3.14
@angular/cli                       8.3.21
@angular/service-worker            8.2.12
@ngtools/webpack                   8.3.20
@schematics/angular                8.3.14
@schematics/update                 0.803.21
rxjs                               6.4.0
typescript                         3.5.3
webpack                            4.39.2

it seems like NX web project use capabilities nto supported by webpack 4.39.2

[FrozenPandaz]

Can someone please retry with the latest version of Nx to see if this is fixed?

Webpack 4.42.0 should be the only version of webpack used.

[the-ult]

Sadly could not test (yet) because of issue: #2161 and #2710

(Did not have any problems with 8.9.x since we only have an Angular project)

[FrozenPandaz]

Hi, sorry about this.

This was mislabeled as stale. We are testing ways to mark not reproducible issues as stale so that we can focus on actionable items but our initial experiment was too broad and unintentionally labeled this issue as stale.