nx: `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:
- Open a new PowerShell window
- Run
npx create-nx-workspace nxtest - Choose the ‘empty’ template and the ‘Angular CLI’ option for the CLI
- Move into the new directory with
cd nxtest - Run
npm install -D @nrwl/angularto install the Angular plugin - 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
- 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
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 1
- Comments: 18 (4 by maintainers)
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 webpackto get webpack installed, then thenx serveseems to get a bit further but then errors out with: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?
Any news? This seems vital to the purpose of Nx!
Just adding a link to this related issue: https://github.com/nrwl/nx/issues/4321
It certainly looks as though the setup of an Angular project starting with an empty project (including using the latest version of node/npm on Windows) needs reviewing by someone familiar with the codebase, as a broken initial setup may create problems in future updates and migrations.