nx 16 all dev remotes being rebuilt

[kyskiz]

Current Behavior

After update to nx16 I have noticed that all module federation (MF) applications are being rebuilt each time after edit, even without editing them or providing --devRemotes in serve parameter.
Versions 16.0.0 and 16.2.1 seems to have same issue
This started happening on my working project, but I was able to reproduce same behaviour on demo project for MF from nrwl here https://github.com/nrwl/ng-module-federation by migrating to v15/v16/latest (2-3 step migration).

TL;DR: After editing any file (not within MF app) webserver rebuilds all MF apps and bootstraped one.

Providing single --devRemotes target or not providing any has same behaviour, all are being rebuilt.

Tested on node 16.20 and 18.16, same behaviour.

Expected Behavior

Webserver should not rebuild MF apps on hot reload if it is not specified within --devRemotes flag

GitHub Repo

https://github.com/kyskiz/nx16_remotes_issue

Steps to Reproduce

1. npm i
2. nx serve
3. edit app.component.ts
4. check terminal for logs that all remotes have been rebuilt

Nx Report

Node   : 18.16.0
   OS     : darwin x64
   npm    : 9.5.1
   Hasher : Native
   
   nx                 : 16.2.1
   @nx/js             : 16.2.1
   @nx/jest           : 16.2.1
   @nx/linter         : 16.2.1
   @nx/workspace      : 16.2.1
   @nx/angular        : 16.2.1
   @nx/cypress        : 16.2.1
   @nx/devkit         : 16.2.1
   @nx/eslint-plugin  : 16.2.1
   @nrwl/tao          : 16.2.1
   @nx/web            : 16.2.1
   @nx/webpack        : 16.2.1
   nx-cloud           : 16.0.5
   typescript         : 5.0.4

Failure Logs

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

Logs starting with successful app serve on localhost:4200 and after single line line on app.component.ts as proof that all remotes are being rebuilt after running nx serve without providing any --devRemotes:
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

✔ Compiled successfully.
⠋ Generating browser application bundles...

NX Running target build for project cart and 1 task it depends on:

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

nx run cart:build:development [existing outputs match the cache, left as is]

• Generating browser application bundles (phase: setup)...
  ✔ Browser application bundle generation complete.
  ✔ Browser application bundle generation complete.
• Copying assets...
  ✔ Copying assets complete.
• Generating index html...
  ✔ Index html generation complete.

Initial Chunk Files | Names | Raw Size
polyfills.js | polyfills | 137.72 kB |
remoteEntry.mjs | cart | 33.66 kB |
main.js | main | 32.73 kB |
styles.css | styles | 808 bytes |

                                                                                                    | Initial Total | 204.90 kB

Lazy Chunk Files | Names | Raw Size
node_modules_angular_core_fesm2022_core_mjs.js | - | 1.17 MB |
default-node_modules_angular_router_fesm2022_router_mjs.js | - | 330.55 kB |
default-node_modules_angular_common_fesm2022_common_mjs.js | - | 286.19 kB |
default-node_modules_angular_common_fesm2022_http_mjs.js | - | 107.36 kB |
default-node_modules_angular_platform-browser_fesm2022_platform-browser_mjs.js | - | 90.25 kB |
default-node_modules_rxjs_dist_esm_internal_observable_from_js-node_modules_rxjs_dist_esm_int-f323a0.js | - | 75.39 kB |
node_modules_tslib_tslib_es6_js.js | - | 16.91 kB |
common.js | common | 13.04 kB |
apps_cart_src_bootstrap_ts.js | bootstrap | 7.00 kB |
| - | 0 bytes |
| - | 0 bytes |
| - | 0 bytes |
| - | 0 bytes |
| - | 0 bytes |
| - | 0 bytes |

Build at: 2023-05-18T14:10:48.368Z - Hash: d0c5c490cc6d0c75 - Time: 4190ms

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

NX Successfully ran target build for project cart and 1 task it depends on

Nx read the output from the cache instead of running the command for 2 out of 2 tasks.

NX Running target build for project shop and 1 task it depends on:

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

nx run shop:build:development [existing outputs match the cache, left as is]

• Generating browser application bundles (phase: setup)...
  ✔ Browser application bundle generation complete.
  ✔ Browser application bundle generation complete.
• Copying assets...
  ✔ Copying assets complete.
• Generating index html...
  ✔ Index html generation complete.

Initial Chunk Files | Names | Raw Size
polyfills.js | polyfills | 137.72 kB |
remoteEntry.mjs | shop | 33.66 kB |
main.js | main | 32.72 kB |
styles.css | styles | 808 bytes |

                                                                                                    | Initial Total | 204.89 kB

Lazy Chunk Files | Names | Raw Size
node_modules_angular_core_fesm2022_core_mjs.js | - | 1.17 MB |
default-node_modules_angular_router_fesm2022_router_mjs.js | - | 330.55 kB |
default-node_modules_angular_common_fesm2022_common_mjs.js | - | 286.19 kB |
default-node_modules_angular_common_fesm2022_http_mjs.js | - | 107.36 kB |
default-node_modules_angular_platform-browser_fesm2022_platform-browser_mjs.js | - | 90.25 kB |
default-node_modules_rxjs_dist_esm_internal_observable_from_js-node_modules_rxjs_dist_esm_int-f323a0.js | - | 75.39 kB |
node_modules_tslib_tslib_es6_js.js | - | 16.91 kB |
common.js | common | 13.04 kB |
apps_shop_src_bootstrap_ts.js | bootstrap | 7.00 kB |
| - | 0 bytes |
| - | 0 bytes |
| - | 0 bytes |
| - | 0 bytes |
| - | 0 bytes |
| - | 0 bytes |

Build at: 2023-05-18T14:14:02.624Z - Hash: 5d803d7ed0990cc9 - Time: 2091ms

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

NX Successfully ran target build for project shop and 1 task it depends on

Nx read the output from the cache instead of running the command for 2 out of 2 tasks.

NX Running target build for project about and 1 task it depends on:

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

nx run about:build:development [existing outputs match the cache, left as is]

• Generating browser application bundles (phase: setup)...
  ✔ Browser application bundle generation complete.
  ✔ Browser application bundle generation complete.
• Copying assets...
  ✔ Copying assets complete.
• Generating index html...
  ✔ Index html generation complete.

Initial Chunk Files | Names | Raw Size
polyfills.js | polyfills | 137.73 kB |
remoteEntry.mjs | about | 33.67 kB |
main.js | main | 32.74 kB |
styles.css | styles | 811 bytes |

                                                                                                    | Initial Total | 204.93 kB

Lazy Chunk Files | Names | Raw Size
node_modules_angular_core_fesm2022_core_mjs.js | - | 1.17 MB |
default-node_modules_angular_router_fesm2022_router_mjs.js | - | 330.56 kB |
default-node_modules_angular_common_fesm2022_common_mjs.js | - | 286.19 kB |
default-node_modules_angular_common_fesm2022_http_mjs.js | - | 107.37 kB |
default-node_modules_angular_platform-browser_fesm2022_platform-browser_mjs.js | - | 90.25 kB |
default-node_modules_rxjs_dist_esm_internal_observable_from_js-node_modules_rxjs_dist_esm_int-f323a0.js | - | 75.39 kB |
node_modules_tslib_tslib_es6_js.js | - | 16.91 kB |
common.js | common | 13.11 kB |
apps_about_src_bootstrap_ts.js | bootstrap | 7.01 kB |
| - | 0 bytes |
| - | 0 bytes |
| - | 0 bytes |
| - | 0 bytes |
| - | 0 bytes |
| - | 0 bytes |

Build at: 2023-05-18T14:14:10.542Z - Hash: ad48645a4a22847c - Time: 3007ms

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

NX Successfully ran target build for project about and 1 task it depends on

Nx read the output from the cache instead of running the command for 2 out of 2 tasks.

✔ Browser application bundle generation complete.

Initial Chunk Files | Names | Raw Size
polyfills.js | polyfills | 362.46 kB |
styles.css, styles.js | styles | 257.18 kB |
main.js | main | 37.83 kB |

Lazy Chunk Files | Names | Raw Size
apps_host_src_bootstrap_ts.js | bootstrap | 8.65 kB |

14 unchanged chunks

Build at: 2023-05-18T14:14:57.925Z - Hash: cebb3ef0ab98275d - Time: 4827ms

✔ Compiled successfully.

[Coly010]

Hi there!

This is a result of a migration that moved @nx/angular:file-server to @nx/web:file-server for the serve-static target.
The @nx/angular:file-server did not watch files by default, however @nx/web:file-server does.

There does seem to be an issue that the @nx/web:file-server is watching for files outside of the project it's running on. I'll be looking into fixing that now.

There is a workaround:

Add watch: false to the options of the serve-static target in the remote applications' project.json.

eg. for the cart project in your repo:

"serve-static": {
      "executor": "@nrwl/web:file-server",
      "defaultConfiguration": "development",
      "options": {
        "buildTarget": "cart:build",
        "port": 4201,
        "watch": false  // <- add this
      },
      "configurations": {
        "development": {
          "buildTarget": "cart:build:development"
        },
        "production": {
          "buildTarget": "cart:build:production"
        }
      }
    }

[github-actions]

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.