ng serve does not watch for all types of changes to all asset types

[Bidthedog]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

Win 8.1

$ ng -v
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.4.2
node: 6.9.4
os: win32 x64
@angular/common: 4.3.5
@angular/compiler: 4.3.5
@angular/core: 4.3.5
@angular/forms: 4.3.5
@angular/http: 4.3.5
@angular/platform-browser: 4.3.5
@angular/platform-browser-dynamic: 4.3.5
@angular/router: 4.3.5
@angular/cli: 1.4.2
@angular/compiler-cli: 4.3.5
typescript: 2.2.2

Repro steps.

• Create an app with the CLI
• Run with ng serve
• Rename or delete an item in the assets dir
• Alternatively, overwrite an image with a different one (same name)
• Observe that ng serve does not recompile

The log given by the failure.

Desired functionality.

Any changes to any files (at least in the asset dir) should kick off the ng serve compile process.

Mention any other details that might be useful.

Currently, adding a new file or updating a file seems to kick the process off, but renaming, deleting or moving any type of file, or updating / overwriting an image isn't detected. This doesn't seem to be a problem for all binary types - if you create an MS Publisher document, for example, add a slide then save, the process kicks off.

I did quite a lot of extensive testing, but in the end I couldn't come to any conclusion as to what specific file operations kick off the compile process - even the behaviour above isn't 100% consistent.

I can't find any details on how to configure this in the documentation, other than being able to specify globs in the app.assets array in the .angular-cli.json. Mine is as follows:

  "assets": [
    "assets",
    "favicon.ico",
    "Web.Config"
  ]

I've also tried using assets/**/*, and the glob pattern described in the docs here, with no consistent results.

I have multiple directories inside assets; assets/img/ and assets/data/. I've tested in the sub directories as well as the root assets directory.

[filipesilva]

The way we watch assets changed with #7600, so this bug is likely related. Will have to investigate.

[NickvdMeij]

@filipesilva is there a way to specify which files are being watched at the moment? I encounter similar problems with own made directories as well as the assets directory. It would be nice to get additional configuration options for this. I also encounter that the watch command does not correctly trigger (most of the time) on *.html changes, as well as *.scss changes.

[vasudevpareek07]

Facing a similar issue on CLI 1.4.9

[egervari]

I have a similar issue where I have /assets/i18n/*.json files and they don't seem to be watched :(

[yakunins]

Any workaround?

[ugurkoysuren]

@egervari , Same here. I faced that problem after the upgrade from Angular 4 to 5.

[whiskyfrenzy]

Same here, I'm on the following:

Angular CLI: 6.1.5
Node: 10.9.0
OS: win32 x64
Angular: 6.1.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.7.5
@angular-devkit/build-angular     0.7.5
@angular-devkit/build-optimizer   0.7.5
@angular-devkit/build-webpack     0.7.5
@angular-devkit/core              0.7.5
@angular-devkit/schematics        0.7.5
@angular/cdk                      6.4.7
@angular/cli                      6.1.5
@angular/flex-layout              6.0.0-beta.18
@angular/material                 6.4.7
@ngtools/webpack                  6.1.5
@schematics/angular               0.7.5
@schematics/update                0.7.5
rxjs                              6.3.2
typescript                        2.7.2
webpack                           4.9.2

Workaround,
As @Bidthedog mentioned, the detect changes works for the assets directory when you update the contents of a file, so what I did was have a test text file in the same directory as my uploads directory and just update the file whenever an upload button is clicked on the Angular side.

The following code is in my controller.js file,

const fs = require('fs');
fs.writeFileSync("Path to your test text file", "Some text");

Hope this helps :D

[filipesilva]

Thanks for reporting this issue. This issue was originally reported a long time ago and since then we've had many releases, one of which might have addressed this problem. Please update to the most recent Angular CLI version.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.