Nx Angular continuous build in dev mode

Question

A project that i am working on has Nx for handling frontend as monorepo. This repo has a project lets call it XYZ and for this project tailwindcss, font awesome and other stuff is configured. My main problem is when i am developing, project is continuously building and compiling, it does not affect any performance but it is annoying. I didnt know what was change that made angular to rebuild it self with exact hash junk. unitl today that i saw <fa-icon> tag is getting refreshed every time project gets rebuild, so i tought ask you to help me how to prevent it. Project is based on Angular 15 Here is the build log

nx run XYZ:serve:development

✔ Browser application bundle generation complete.

Initial Chunk Files                             | Names                                 |  Raw Size
vendor.js                                       | vendor                                |   5.94 MB | 
main.js                                         | main                                  | 874.19 kB | 
polyfills.js                                    | polyfills                             | 315.27 kB | 
styles.css, styles.js                           | styles                                | 281.68 kB | 
runtime.js                                      | runtime                               |  12.96 kB | 

                                                | Initial Total                         |   7.39 MB

Lazy Chunk Files                | Names               |  Raw Size
libs_XYZ_a_src_index_ts.js      | ngfrontend-XYZ-a    | 289.98 kB | 
libs_XYZ_b_src_index_ts.js      | ngfrontend-XYZ-b    |  35.70 kB | 
libs_XYZ_c_src_index_ts.js      | ngfrontend-XYZ-c    |  29.12 kB | 
libs_XYZ_d_src_index_ts.js      | ngfrontend-XYZ-d    |  19.69 kB | 
libs_XYZ_e_src_index_ts.js      | ngfrontend-XYZ-e    |  11.86 kB | 
libs_XYZ_f_src_index_ts.js      | ngfrontend-XYZ-f    |   9.50 kB | 
libs_XYZ_g_src_index_ts.js      | ngfrontend-XYZ-g    |   8.88 kB | 

Build at: 2023-12-04T17:52:33.348Z - Hash: 180e583c689d2917 - Time: 12288ms

Warning: selectbox.component.ts depends on 'lodash'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: handler.service.ts depends on '@recogito/annotorious'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies


** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully.
✔ Browser application bundle generation complete.

Initial Chunk Files | Names   | Raw Size
runtime.js          | runtime | 12.96 kB | 

11 unchanged chunks

Build at: 2023-12-04T17:52:37.338Z - Hash: e3675ef7ca486451 - Time: 2807ms

✔ Compiled successfully.
✔ Browser application bundle generation complete.

12 unchanged chunks

Build at: 2023-12-04T17:52:38.613Z - Hash: e3675ef7ca486451 - Time: 1090ms

✔ Compiled successfully.
✔ Browser application bundle generation complete.

12 unchanged chunks

Build at: 2023-12-04T17:52:39.948Z - Hash: e3675ef7ca486451 - Time: 1100ms

✔ Compiled successfully.
✔ Browser application bundle generation complete.

12 unchanged chunks

Build at: 2023-12-04T17:52:41.551Z - Hash: e3675ef7ca486451 - Time: 1048ms

✔ Compiled successfully.
✔ Browser application bundle generation complete.

12 unchanged chunks

Build at: 2023-12-04T17:52:43.068Z - Hash: e3675ef7ca486451 - Time: 1309ms

✔ Compiled successfully.
✔ Browser application bundle generation complete.

12 unchanged chunks

Build at: 2023-12-04T17:52:44.332Z - Hash: e3675ef7ca486451 - Time: 961ms

✔ Compiled successfully.
⠙ Generating browser application bundles (phase: building)...^C

If you need any other information please comment so I can give it to you, due to some legal issues I have to maintain closure

i have tried to check the configs but nothing unexpeceted were found

Answer 1

I believe your serve watch command is triggering the monitoring of folders that the serve command modifies. This causes a never ending cycle of: build - changes found - build - changes found - ... and so on

I recommend you create a new workspace with a new default angular app using nx cli (please use the same package versions as in your app's). After that you can compare the configuration files from the new default app with the ones in your repo.

That should lead you into finding what is causing the watch command to keep triggering the build.

Every time I upgrade one of my nx based workspaces I create a new app like I explained above. It then provides a reference as to what are the new nx defaults. This way I can bring my configurations as close as the default as possible, which helps a lot with avoiding configuration issues.