Angular fails to build

[uspasojevic96]

Current Behavior

Fresh Angular app does not build with nx build app-name

Expected Behavior

Fresh Angular app should be able to build when it's been freshly generated

Steps to Reproduce

• Create fresh workspace (empty)
• Add NestJS support
• Generate NestJS app
• Add Angular support
• Generate Angular app
• run nx build for the generated Angular app

Failure Logs

dev on  master [✘!+] is 📦 v0.0.0 via ⬢ v14.16.0 took 11s
➜ nx build tic-tac-toe-revolution-ui

> nx run tic-tac-toe-revolution-ui:build:production
⠋ Generating browser application bundles...(node:46741) UnhandledPromiseRejectionWarning: TypeError: webpack_1.node.NodeTargetPlugin is not a constructor
    at WebpackResourceLoader._compile (/Users/uros/workspace/dev/node_modules/@ngtools/webpack/src/resource_loader.js:83:13)
    at WebpackResourceLoader.get (/Users/uros/workspace/dev/node_modules/@ngtools/webpack/src/resource_loader.js:210:44)
    at Object.resourceHost.readResource (/Users/uros/workspace/dev/node_modules/@ngtools/webpack/src/ivy/host.js:30:35)
    at AdapterResourceLoader.preload (/Users/uros/workspace/dev/node_modules/@angular/compiler-cli/src/ngtsc/resource/src/loader.js:88:39)
    at resolveStyleUrl (/Users/uros/workspace/dev/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/component.js:192:49)
    at /Users/uros/workspace/dev/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/component.js:233:83
    at Array.map (<anonymous>)
    at ComponentDecoratorHandler.preanalyze (/Users/uros/workspace/dev/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/component.js:233:50)
    at _loop_1 (/Users/uros/workspace/dev/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:321:53)
    at TraitCompiler.analyzeClass (/Users/uros/workspace/dev/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:343:35)
    at visit (/Users/uros/workspace/dev/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:113:27)
    at visitNodes (/Users/uros/workspace/dev/node_modules/typescript/lib/typescript.js:28217:30)
    at Object.forEachChild (/Users/uros/workspace/dev/node_modules/typescript/lib/typescript.js:28456:24)
    at visit (/Users/uros/workspace/dev/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:115:20)
    at TraitCompiler.analyze (/Users/uros/workspace/dev/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:117:13)
    at TraitCompiler.analyzeAsync (/Users/uros/workspace/dev/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:79:25)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:46741) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:46741) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
✔ Browser application bundle generation complete.

Error: NormalModuleFactory.beforeResolve (NormalModuleReplacementPlugin) is no longer a waterfall hook, but a bailing hook instead. Do not return the passed object, but modify it instead. Returning false will ignore the request and results in no module created.

Error: NormalModuleFactory.beforeResolve (NormalModuleReplacementPlugin) is no longer a waterfall hook, but a bailing hook instead. Do not return the passed object, but modify it instead. Returning false will ignore the request and results in no module created.

Error: NormalModuleFactory.beforeResolve (NormalModuleReplacementPlugin) is no longer a waterfall hook, but a bailing hook instead. Do not return the passed object, but modify it instead. Returning false will ignore the request and results in no module created.

Environment

dev on  master [✘!+] is 📦 v0.0.0 via ⬢ v14.16.0 took 6s
➜ nx report

>  NX  Report complete - copy this into the issue template

  Node : 14.16.0
  OS   : darwin x64
  npm  : 7.9.0

  nx : Not Found
  @nrwl/angular : 12.3.3
  @nrwl/cli : 12.3.3
  @nrwl/cypress : 12.3.3
  @nrwl/devkit : 12.3.3
  @nrwl/eslint-plugin-nx : 12.3.3
  @nrwl/express : Not Found
  @nrwl/jest : 12.3.3
  @nrwl/linter : 12.3.3
  @nrwl/nest : 12.3.3
  @nrwl/next : Not Found
  @nrwl/node : 12.3.3
  @nrwl/react : Not Found
  @nrwl/schematics : Not Found
  @nrwl/tao : 12.3.3
  @nrwl/web : Not Found
  @nrwl/workspace : 12.3.3
  @nrwl/storybook : Not Found
  @nrwl/gatsby : Not Found
  typescript : 4.2.4

Edit

I don't know why nx report isn't detecting nx:

dev on  master [✘!+] is 📦 v0.0.0 via ⬢ v14.16.0
➜ nx --version
12.3.3

dev on  master [✘!+] is 📦 v0.0.0 via ⬢ v14.16.0
➜ which nx
/Users/uros/.nvm/versions/node/v14.16.0/bin/nx

[bh-hsi]

Same issue here - very discouraging.

  OS   : darwin x64
  npm  : 6.14.12

  nx : Not Found
  @nrwl/angular : 12.3.3
  @nrwl/cli : 12.3.3
  @nrwl/cypress : 12.3.3
  @nrwl/devkit : 12.3.3
  @nrwl/eslint-plugin-nx : 12.3.3
  @nrwl/express : Not Found
  @nrwl/jest : 12.3.3
  @nrwl/linter : 12.3.3
  @nrwl/nest : 12.3.3
  @nrwl/next : Not Found
  @nrwl/node : 12.3.3
  @nrwl/react : Not Found
  @nrwl/schematics : Not Found
  @nrwl/tao : 12.3.3
  @nrwl/web : Not Found
  @nrwl/workspace : 12.3.3
  @nrwl/storybook : Not Found
  @nrwl/gatsby : Not Found
  typescript : 4.2.4```

[jadengis]

I'm seeing this on a new Angular 12 + Nest project as well. Kind of aggravating. I'd love to know what is the difference here because ng serve works on a new Angular 12 CLI project no problem.

[Coly010]

Hey! :)

Thank you for raising the issue. I'll investigate to find a fix that will allow this to work with no problems.

However, in the meantime, there is a workaround:

• Delete node_modules
• Delete package-lock.json
• Run npm install

You should now be able to run nx build for both the NestJS and Angular apps with no problems.

P.S.
If you're curious why this happens:
@nrwl/nest depends on @nrwl/node which uses Webpack 4.
Since Angular 12, Angular uses Webpack 5.

The initial install of additional packages when you add Angular support to a workspace that already has Webpack 4 in it, will find Webpack already installed, and will not install Webpack 5.

Therefore, deleting the node_modules and the package-lock.json and running npm install allows the correct version of Webpack to be resolved and installed for Angular 12.

[uspasojevic96]

So, in theory, if we were to add Angular first and NestJS second then it should work without even needing to delete node_modules and package-lock.json, right?

[Coly010]

Yes, that is correct.

I've tried that flow locally and it works perfectly.

[Coly010]

Based on the two solutions provided above:

#5682 (comment)

#5682 (comment)

I'm going to close this issue.

If the problem persists and these solutions do not work, please let us know!

[jadengis]

@Coly010 The workarounds are nice, but I would argue this isn't shouldn't be closed because the bug still exists. Users creating new angular + nest projects from the nx schematic will not be able to use ng serve without applying one of these workarounds manually.

Is it not possible to update the schematic to automatically apply the #2 workaround (install angular then nest)?

[Coly010]

Hi @jadengis !
The real fix here is to upgrade the @nrwl/node package to use Webpack 5, and that work is currently underway.

However, I'll take a look and see if we can change the Angular+Nest schematic to install Angular then Nest.

If you're interested, you could also take a stab at creating a PR that makes this change :)