Angular fails to build #5682

uspasojevic96 · 2021-05-16T18:17:11Z

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

The text was updated successfully, but these errors were encountered:

bh-hsi · 2021-05-17T02:42:20Z

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 · 2021-05-17T06:37:41Z

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 · 2021-05-17T13:22:30Z

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 · 2021-05-17T15:14:30Z

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 · 2021-05-17T15:30:06Z

Yes, that is correct.

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

Coly010 · 2021-05-19T09:00:24Z

Based on the two solutions provided above:

#5682 (comment)

I'm going to close this issue.

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

jadengis · 2021-05-20T01:02:22Z

@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 · 2021-05-20T08:32:20Z

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 :)

according to that: nrwl/nx#5682 (comment)

smasala · 2021-08-09T18:58:38Z

Workaround doesn't work with yarn @Coly010 😢

Upgrading from 12.3.6 to 12.3.5 resulted in the main webpack (root of node_modules) being v4 again not 5 anymore...

  Node : 14.16.0
  OS   : darwin x64
  yarn : 1.22.10
  
  nx : Not Found
  @nrwl/angular : 12.6.5
  @nrwl/cli : 12.6.5
  @nrwl/cypress : 12.6.5
  @nrwl/devkit : 12.6.5
  @nrwl/eslint-plugin-nx : 12.6.5
  @nrwl/express : Not Found
  @nrwl/jest : 12.6.5
  @nrwl/linter : 12.6.5
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : 12.6.5
  @nrwl/nx-cloud : 12.3.6
  @nrwl/react : Not Found
  @nrwl/schematics : Not Found
  @nrwl/tao : 12.6.5
  @nrwl/web : 12.6.5
  @nrwl/workspace : 12.6.5
  @nrwl/storybook : 12.6.5
  @nrwl/gatsby : Not Found
  typescript : 4.3.5

METACEO · 2021-10-15T16:18:19Z

@uspasojevic96 I'm noticing the same, myself still. I'm following your @nrwl package versions, but do you know what Angular package versions you had?

github-actions · 2023-03-23T11:05:47Z

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.

uspasojevic96 added the type: bug label May 16, 2021

uspasojevic96 mentioned this issue May 16, 2021

Crashes when doing an nx serve <app> after creating a fresh Angular + Nest project #5683

Closed

Coly010 added scope: angular Issues related to Angular support in Nx scope: node Issues related to Node, Express, NestJS support for Nx labels May 17, 2021

Coly010 closed this as completed May 19, 2021

leosvelperez mentioned this issue May 19, 2021

nest + angular schematics now working #5712

Closed

spanishgipsy added a commit to spanishgipsy/ng-interview that referenced this issue May 29, 2021

fix(build): fix dev dependency webpack version 4 -> 5

8904cb1

according to that: nrwl/nx#5682 (comment)

leosvelperez mentioned this issue Jun 3, 2021

angular-nest app does not build #5874

Closed

github-actions bot added the outdated label Mar 23, 2023

github-actions bot locked as resolved and limited conversation to collaborators Mar 23, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Angular fails to build #5682

Angular fails to build #5682

uspasojevic96 commented May 16, 2021 •

edited

Loading

bh-hsi commented May 17, 2021

jadengis commented May 17, 2021

Coly010 commented May 17, 2021 •

edited

Loading

uspasojevic96 commented May 17, 2021

Coly010 commented May 17, 2021

Coly010 commented May 19, 2021

jadengis commented May 20, 2021 •

edited

Loading

Coly010 commented May 20, 2021

smasala commented Aug 9, 2021 •

edited

Loading

METACEO commented Oct 15, 2021

github-actions bot commented Mar 23, 2023

Angular fails to build #5682

Angular fails to build #5682

Comments

uspasojevic96 commented May 16, 2021 • edited Loading

Current Behavior

Expected Behavior

Steps to Reproduce

Failure Logs

Environment

Edit

bh-hsi commented May 17, 2021

jadengis commented May 17, 2021

Coly010 commented May 17, 2021 • edited Loading

uspasojevic96 commented May 17, 2021

Coly010 commented May 17, 2021

Coly010 commented May 19, 2021

jadengis commented May 20, 2021 • edited Loading

Coly010 commented May 20, 2021

smasala commented Aug 9, 2021 • edited Loading

METACEO commented Oct 15, 2021

github-actions bot commented Mar 23, 2023

uspasojevic96 commented May 16, 2021 •

edited

Loading

Coly010 commented May 17, 2021 •

edited

Loading

jadengis commented May 20, 2021 •

edited

Loading

smasala commented Aug 9, 2021 •

edited

Loading