`npm run nx serve` fails after creating empty workspace, adding Angular plugin + creating new app

Current Behavior

npm run nx serve fails after creating empty workspace, adding Angular plugin + creating a new application.

The message An unhandled exception occurred: Cannot find module 'webpack' is shown.

(Note that I am starting with an empty workspace rather than with the single Angular application template because I want to customize the options for the new Angular project as shown in the reproduction steps below.)

Expected Behavior

I expect npm run nx serve to start the Angular development server without errors.

Steps to Reproduce

On Windows 10 with NodeJS LTS 14.15.0:

1. Open a new PowerShell window
2. Run npx create-nx-workspace nxtest
3. Choose the ‘empty’ template and the ‘Angular CLI’ option for the CLI
4. Move into the new directory with cd nxtest
5. Run npm install -D @nrwl/angular to install the Angular plugin
6. Create a new Angular app as follows:

npm run nx g @nrwl/angular:app -- testapp  --e2e-test-runner=protractor --unit-test-runner=jest --strict --style=scss --routing --linter=eslint --enable-ivy

1. Run npm run nx serve

Failure Logs

PS C:\Users\<username>\source\repos\nxtest> npm run nx serve

> nxtest@0.0.0 nx
> nx "serve"


> ng run testapp:serve
An unhandled exception occurred: Cannot find module 'webpack'
Require stack:
- C:\Users\<username>\source\repos\nxtest\node_modules\@angular-devkit\build-webpack\src\webpack\index.js
- C:\Users\<username>\source\repos\nxtest\node_modules\@angular-devkit\build-webpack\src\index.js
- C:\Users\<username>\source\repos\nxtest\node_modules\@angular-devkit\build-angular\src\dev-server\index.js
- C:\Users\<username>\source\repos\nxtest\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js
- C:\Users\<username>\source\repos\nxtest\node_modules\@angular-devkit\architect\node\index.js
- C:\Users\<username>\source\repos\nxtest\node_modules\@angular\cli\models\architect-command.js
- C:\Users\<username>\source\repos\nxtest\node_modules\@angular\cli\commands\run-impl.js
- C:\Users\<username>\source\repos\nxtest\node_modules\@angular-devkit\schematics\tools\export-ref.js
- C:\Users\<username>\source\repos\nxtest\node_modules\@angular-devkit\schematics\tools\index.js
- C:\Users\<username>\source\repos\nxtest\node_modules\@angular\cli\utilities\json-schema.js
- C:\Users\<username>\source\repos\nxtest\node_modules\@angular\cli\models\command-runner.js
- C:\Users\<username>\source\repos\nxtest\node_modules\@angular\cli\lib\cli\index.js
- C:\Users\<username>\source\repos\nxtest\node_modules\@angular\cli\lib\init.js
- C:\Users\<username>\source\repos\nxtest\node_modules\@nrwl\cli\lib\run-cli.js
See "C:\Users\<USERNAME>~1\AppData\Local\Temp\ng-U7gsfD\angular-errors.log" for further details.
npm ERR! code 1
npm ERR! path C:\Users\<username>\source\repos\nxtest
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c "nx "serve""

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\<username>\AppData\Local\npm-cache\_logs\2020-11-06T15_10_51_278Z-debug.log

Environment

Windows 10 Pro Version 10.0.19042 Build 19042 PowerShell version: 5.1.19041.610 NodeJS version: 14.15.0

nx report output:

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

[jonstelly]

I’m getting the same issue. Following steps like mentioned above (which seem to be a short version of this migration overview guide).

I’m running this on Ubuntu 20.04 in WSL2. NPM version is 7.6.2.

After I get the error about missing webpack module, I can npm i --save-dev webpack to get webpack installed, then the nx serve seems to get a bit further but then errors out with:

Cannot read property 'add' of undefined
TypeError: Cannot read property 'add' of undefined
    at /home/me/code/my-framework/node_modules/@ngtools/webpack/src/ivy/plugin.js:164:86
    at Array.forEach (<anonymous>)
    at /home/me/code/my-framework/node_modules/@ngtools/webpack/src/ivy/plugin.js:164:33
    at SyncHook.eval [as call] (eval at create (/home/me/code/my-framework/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:9:1)
    at SyncHook.lazyCompileHook (/home/me/code/my-framework/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.newCompilation (/home/me/code/my-framework/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:630:30)
    at /home/me/code/my-framework/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:667:29
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/me/code/my-framework/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
    at AsyncSeriesHook.lazyCompileHook (/home/me/code/my-framework/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.compile (/home/me/code/my-framework/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:662:28)
    at /home/me/code/my-framework/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Watching.js:77:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/me/code/my-framework/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:22:1)
    at AsyncSeriesHook.lazyCompileHook (/home/me/code/my-framework/node_modules/tapable/lib/Hook.js:154:20)
    at Watching._go (/home/me/code/my-framework/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Watching.js:41:32)
    at /home/me/code/my-framework/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Watching.js:33:9
    at Compiler.readRecords (/home/me/code/my-framework/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compiler.js:529:11)

EDIT: This only happens using the empty template and steps in that migration guide. If I create a new angular workspace everything works as expected. It seems like the migration guide is missing a step or two?

[Frikki]

Any news? This seems vital to the purpose of Nx!