Running ng build --watch not always picking up some code changes

[jrista]

When running ng build with --watch, which we do pretty regularly as we have either nodemon or pm2 running a node server that hosts our site as well as API, background workers, our whole server backend basically, we often find that many code changes are not properly detected by ng build and it will report unchanged chunks, rather than properly rebuilding those that have actually had changes to the code.

We have observed that if a template is then changed in the same chunk, that usually results in the build properly rebuilding that chunk. Sometimes total removal of code from a file, to force an error, then restoration of it, will force proper rebuilding of a chunk.

Versions

→ ng -v

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
    
Angular CLI: 1.6.7
Node: 8.9.4
OS: darwin x64
Angular: 4.4.6
... common, compiler, compiler-cli, core, forms, http
... language-service, platform-browser, platform-browser-dynamic
... router, tsc-wrapped

@angular/cli: 1.6.7
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.7
@schematics/angular: 0.1.17
typescript: 2.3.4
webpack: 3.10.0

Repro steps

• Step 1: Make a code change to a model, service, NGRX state, etc.
• Step 2: Save the changed file(s).
• Step 3: Make a change to a template.
• Step 4: Save the template.

Observed behavior

9 unchanged chunks
chunk {clients.module} clients.module.chunk.js, clients.module.chunk.js.map () 351 kB  [rendered]
Date: 2018-02-08T22:36:07.995Z - Hash: 72e9dc9abbe1980916c8 - Time: 1463ms           
10 unchanged chunks
Date: 2018-02-08T22:36:20.720Z - Hash: a9b0f4039ddc2b83dcb6 - Time: 982ms            
10 unchanged chunks
Date: 2018-02-08T22:36:23.728Z - Hash: 72e9dc9abbe1980916c8 - Time: 863ms            
10 unchanged chunks
Date: 2018-02-08T22:36:40.084Z - Hash: 31ddf5af1f9d07a7c892 - Time: 1113ms           
9 unchanged chunks
chunk {clients.module} clients.module.chunk.js, clients.module.chunk.js.map () 351 kB  [rendered]

Desired behavior

I would expect ng build to properly account for all changes made, to both code and templates, and the proper rebuilding of affected chunks.

Mention any other details that might be useful (optional)

This behavior is inconsistent, it does not always happen. It seems I encounter it most often with changes to models, properties in components, etc. This often leads to confusion when testing in the UI, and recent changes are not being applied. I have not been able to identify a specific scenario where it always occurs. Sometimes it seems like the code change may not actually matter, and the lack of rebuilding is immaterial...however upon testing again in the browser, the old issues remain, indicating the code change does indeed matter.

[ddimaria]

Have you tried the (--poll)[https://github.com/angular/angular-cli/wiki/build] option?

[filipesilva]

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

[blakesisu]

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
    
Angular CLI: 1.6.8
Node: 9.5.0
OS: linux x64
Angular: 4.4.6
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic, router
... tsc-wrapped

@angular/cli: 1.6.8
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.8
@schematics/angular: 0.1.17
typescript: 2.2.2
webpack: 3.10.0

I have been encountering something similar, so I'll tack it on here before creating a complete new issue if necessary. I just recently jumped into an angular project, and found that the app was building fine with the ng build and ng build --prod commands, but when attempting to run these commands with a watch flag, the app would break, complaining of undefined variables.

I started digging around the tasks and commands in the @angular/cli folder, and found in the commands/build.js file, there's a check for commandOptions.target === 'development' && commandOptions.watch === true which when true, assigns commandOptions.forceTsCommonjs = true. I commented this out, and the app immediately started working again, with changes being made and compiled by the watch process. Not sure why this is the implemented on development environment.

[jrista]

I can try to make a repro. I am not sure what is causing the issue, so it might take a little time.

I have not tried using the --poll option. I'll give it a try. Does anyone know the default poll time?

[jrista]

Just an update. Been having trouble reproducing the issue. I am not sure if it is due to our use of a fair number of lazy loaded modules or not. Once I am able to reproduce the issue I'll share how.

[1456118242]

@filipesilva
I have this problem too. I have the demo https://github.com/1456118242/angular-watch-demo

Repro steps
Step 1: Make a change to a component.
Step 2: Save the component.
Step 3: open index.html
So see

[1456118242]

@jrista

[jrista]

Thanks for the update. Am I understanding correctly, we can just use the demo you have linked as a reproduction of the issue?

I have been buried in another project lately, an Ionic project, so I have not been running into this issue recently. It still happens with the other project I have, though, when I fix bugs in it. I had upgraded to CLI 1.7.4, and a few other versions, and I still had plenty of issues with builds...both when doing watch, as well as when running tests. The builds are so inconsistent that they are effectively broken, and autowatching the test build is completely broken. These are very critical tools, and them not working really poses a serious productivity issue.

[alan-agius4]

I'm sorry, but we can't reproduce the problem following the instructions you provided.
Remember that we have a large number of issues to resolve, and have only a limited amount of time to reproduce your issue.
Short, explicit instructions make it much more likely we'll be able to reproduce the problem so we can fix it.

If the problem persists, please open a new issue following our submission guidelines.

A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

[JanneHarju]

My problem is little bit similar with this one. Should I open new issue? https://stackoverflow.com/questions/54816109/angular-7-library-html-template-changes-are-not-affected-into-application-when-c I haven't yet done any repro repo But I maybe will make new project and library and try similar scenario. OK there was already issue that seems similar with my problem #13588

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}