Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Adding a @nrwl/web app and serving it in a workpace with an angular 12 app fails

See original GitHub issue

Current Behavior

If a workspace already has an angular 12 app - then adding a new @nrwl/web app and serving it throws an error.

Interestingly, the order that the apps are added in seems to matter. creating a @nrwl/web app first, and then adding @nrwl/angular app later - doesn’t have this problem.

Downgrading to 12.3.5 seems to solve the issue

Expected Behavior

Serving a web app in the mentioned context would not error.

Steps to Reproduce

repro repo.
run npx nx serve web-app

Failure Logs

% npx nx serve web-app

> nx run web-app:serve 
Starting type checking service...
Using 10 workers with 2048MB memory limit

>  NX  Web Development Server is listening at http://localhost:4200/
/myorg-wp-c/node_modules/webpack/lib/Dependency.js:311
                throw new Error(
                ^

Error: module property was removed from Dependency (use compilation.moduleGraph.updateModule(dependency, module) instead)
    at ProvidedDependency.set (/myorg-wp-c/node_modules/webpack/lib/Dependency.js:311:9)
    at iterationDependencies (/myorg-wp-c/node_modules/@nrwl/web/node_modules/webpack/lib/Compilation.js:940:21)
    at /myorg-wp-c/node_modules/@nrwl/web/node_modules/webpack/lib/Compilation.js:950:8
    at /myorg-wp-c/node_modules/@nrwl/web/node_modules/webpack/lib/NormalModuleFactory.js:409:6
    at /myorg-wp-c/node_modules/@nrwl/web/node_modules/webpack/lib/NormalModuleFactory.js:155:13
    at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (/myorg-wp-c/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at /myorg-wp-c/node_modules/@nrwl/web/node_modules/webpack/lib/NormalModuleFactory.js:138:29
    at /myorg-wp-c/node_modules/@nrwl/web/node_modules/webpack/lib/NormalModuleFactory.js:346:9
    at processTicksAndRejections (internal/process/task_queues.js:75:11)

———————————————————————————————————————————————

Environment


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

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:6 (1 by maintainers)

Top GitHub Comments

2reactions

Jimmyshcommented, Jun 10, 2021

+1， I think it’s a webpack version issue, @angular-devkit/build-angular need webpack 5， @nrwl/web need 4.

If set webpack to 4 in package.json, @nrwl/web app can work

  "resolutions": {
    "webpack": "^4.0.0"
  }

0reactions

looeeecommented, Mar 31, 2022

@pmmmwh/react-refresh-webpack-plugin react-refresh

These are used for hot module reloading in React. You made need to add devServer.hot = true in your config for it to work.

Top Results From Across the Web

Getting started with service workers - Angular

To set up the Angular service worker in your project, use the CLI command ng add @angular/pwa . It takes care of configuring...

Setting up the local environment and workspace - Angular

The Angular CLI includes a server, for you to build and serve your app locally. Navigate to the workspace folder, such as my-app...

Building and serving Angular apps

A project's src/environments/ folder contains the base configuration file, environment.ts , which provides a default environment. You can add override defaults ...

Launching your app with a root module - Angular

The service providers. bootstrap, The root component that Angular creates and inserts into the index.html host web page. The default application created by ......

@nrwl/workspace - npm

By default, an Nx workspace starts blank. There are no applications to build, serve, and test. To create one, you need to add...