Angular fails to build - Githubissues

uspasojevic96 commented 3 years ago

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

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

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

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

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

Yes, that is correct.

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

Coly010 commented 3 years ago

Based on the two solutions provided above:

https://github.com/nrwl/nx/issues/5682#issuecomment-842320300

https://github.com/nrwl/nx/issues/5682#issuecomment-842407479

I'm going to close this issue.

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

jadengis commented 3 years ago

@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 commented 3 years ago

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

smasala commented 3 years ago

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

@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[bot] commented 1 year ago

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.

nrwl / nx

Angular fails to build #5682

Current Behavior

Expected Behavior

Steps to Reproduce

Failure Logs

Environment

Edit