Angular-cli: Html changes not detected in watched library by "ng serve --aot"

[V3nsla]

🐞 Bug report

Command

- [ ] new
- [ ] build
- [X] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Description

Html changes are not detected in library when starting project using ng serve --aot. Library is built using --watch flag and main project is served with --aot. On html change build and serve process are triggered and page refreshes but with no changes in html. Typescript changes are visible after rebuild. Html change is only visible when you restart ng serve --aot process.

Without --aot flag everything is working as intended.

Same problem exists with npm linked external library (not in the same project).

🔬 Minimal Reproduction

I made a small repro of the problem: https://github.com/V3nsla/aot-lib-html-changes

To reproduce the problem build library using --watch flag (ng build lib --watch) and start main project using ng serve --aot.

Make some changes in the template of LibComponent and save to trigger build process. After main project is recompiled html changes are not reflected.

🌍 Your Environment

Angular CLI: 7.3.0
Node: 10.12.0
OS: win32 x64
Angular: 7.2.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.13.0
@angular-devkit/build-angular      0.13.0
@angular-devkit/build-ng-packagr   0.13.0
@angular-devkit/build-optimizer    0.13.0
@angular-devkit/build-webpack      0.13.0
@angular-devkit/core               7.3.0
@angular-devkit/schematics         7.3.0
@angular/cli                       7.3.0
@ngtools/json-schema               1.1.0
@ngtools/webpack                   7.3.0
@schematics/angular                7.3.0
@schematics/update                 0.13.0
ng-packagr                         4.7.0
rxjs                               6.3.3
typescript                         3.2.4
webpack                            4.29.0

[viceice]

Sometimes this it doesn't pickup template changes even without aot. I have to save the file two or more times to let the serve process pickup the changes.

[davorcosic]

I'm experiencing the same issue as @V3nsla. Is there any way to avoid this AOT behavior?

[peterbakonyi05]

The same issue happens with @angular-devkit/build-angular:server. It doesn't detect HTML changes in a linked library that is compiled with ngc

[klemenoslaj]

I have the exact same issue as well.
Currently we have to restart the served application to finally get the template changes.

[JanneHarju]

I already report this in Stack overflow and then found this issue. I notice that scss changes are also not affecting. Only ts changes are affecting to main application. And only ng serve restart will work. I will try AOT as well. Here is my stack overflow issue https://stackoverflow.com/questions/54816109/angular-7-library-html-template-changes-are-not-affected-into-application-when-c

[JanneHarju]

OK. I tested it without --aot and it wasn't working any better. Only ts files are updated properly.
Here is my versions:

Angular CLI: 7.3.1
Node: 10.15.0
OS: win32 x64
Angular: 7.2.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.13.1
@angular-devkit/build-angular      0.13.1
@angular-devkit/build-ng-packagr   0.13.1
@angular-devkit/build-optimizer    0.13.1
@angular-devkit/build-webpack      0.13.1
@angular-devkit/core               7.3.1
@angular-devkit/schematics         7.3.1
@angular/cdk                       7.3.2
@angular/cli                       7.3.1
@angular/flex-layout               7.0.0-beta.19
@angular/material                  7.3.2
@ngtools/json-schema               1.1.0
@ngtools/webpack                   7.3.1
@schematics/angular                7.3.1
@schematics/update                 0.13.1
ng-packagr                         4.7.0
rxjs                               6.3.3
typescript                         3.1.3
webpack                            4.29.0

[viceice]

Our workaround is to use the library source path in tsconfig.json instead of the dist folder.

This works with and without aot.

[Nagarjuna-B]

Our workaround is to use the library source path in tsconfig.json instead of the dist folder.

This works with and without aot.

Same problem here(happens for simple - ng build --watch command too) and its costing us a lot of time. Hope angular-cli fixes this soon.

ViceIce, I didn't quite get above, could you show me your previous and new tsconfig.json file? (so that I can get an idea on what options have changed)

[viceice]

@Nagarjuna-B you simply have to edit the paths in root tsconfig.json

{
  "compilerOptions": {
    "paths": {
      "@my/package": ["dist/my/package"]
    }
 }
}

from:
"@my/package": ["dist/my/package"]
to:
"@my/package": ["src/my/package/src/public_api.ts"]

I've additionally added an index.ts to the package src with reexports public_api.ts.
So i only need:

"@my/package": ["src/my/package/src"]

[Nagarjuna-B]

Thanks @ViceIce, it seems the problem for you is with editing html files in an external library and it got fixed by referencing the files from source directory itself.
For me, this is happening with the template files(html files) of the app itself.

[viceice]

@Nagarjuna-B That is strange, we don't have such a problem. Local templates are working fine with and without aot.

[isthar13]

I have found that changes are not detected when the compiler fails the first time you run ng serve if you are using AOT. But if the first time the compilation is successful, then it refreshes well.

I have created a repository with minimal code to shown it, The README contains step by step to reproduce. https://github.com/isthar13/angular-cli-aot-bug

If the first time you run ng serve using AOT there is any compilation error, all changes made are not detected and the server not reloaded.
If the first time you run ng serve using AOT there are no compilation error and while the server is running you add some error, the error is shown but if you make some changes they are detected and the server is reloaded properly.

When no using AOT, although the first time you run ng serve there is some compilation error, it will reload and detect changes fine.

[sebastien-p]

Same problem here, any news? Thanks

[JanneHarju]

Does anyone yet test this with angular 8?

[sebastien-p]

@JanneHarju I did. Still doesn't work :(

[DanielNetzer]

experiencing exactly the same issue, super frustration.
started a clean new minimal project, any changes to scss or html files aren't picked up by webpack during serve with and without aot.
btw even when the first serve command works, it still doesn't refresh on file changes.

EDIT:

for me removing enableIvy: true fixed the problem.

[jonathanlie]

would love to see a resolution to this. It really slows our dev cycle :(

[sebastien-p]

I don't use Ivy and it doesn't work for me (latest Angular + CLI).

[alan-agius4]

Thanks for reporting this issue. This issue is now obsolete due to changes in the recent releases. 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.

[alan-agius4]

For the scss issue there is another open issue https://github.com/angular/angular-cli/issues/15143 which will be fixed with https://github.com/angular/angular-cli/pull/15144

[alan-agius4]

Going to re-open this, cause I think the original problem still persists. Ie the issue were when changing HTML in a library the changes are not replicated in the application.

Regarding the issues when having Ivy enabled, those should be fixed in 8.2.x or you can try the prerelease version using next version.

[andreifloroiu]

@Nagarjuna-B you simply have to edit the paths in root tsconfig.json

{
  "compilerOptions": {
    "paths": {
      "@my/package": ["dist/my/package"]
    }
 }
}

from:
"@my/package": ["dist/my/package"]
to:
"@my/package": ["src/my/package/src/public_api.ts"]

I've additionally added an index.ts to the package src with reexports public_api.ts.
So i only need:

"@my/package": ["src/my/package/src"]

Sold, works like a charm!

[sebastien-p]

@andreifloroiu yes but it works on source code, not on build code which is how Angular CLI scaffolds it and doesn't work.

[andreifloroiu]

@andreifloroiu yes but it works on source code, not on build code which is how Angular CLI scaffolds it and doesn't work.

I meant that it is the solution to what I needed: work on library from a test project and auto-build on changes to library source.

AF

[ViniciusFXavier]

Increasing the amount of inotify watchers - Source

Listen uses inotify by default on Linux to monitor directories for changes. It's not uncommon to encounter a system limit on the number of files you can monitor. For example, Ubuntu Lucid's (64bit) inotify limit is set to 8192.

You can get your current inotify file watch limit by executing:

$ cat /proc/sys/fs/inotify/max_user_watches

When this limit is not enough to monitor all files inside a directory, the limit must be increased for Listen to work properly.

$ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf
$ sudo sysctl -p

You may also need to pay attention to the values of max_queued_events and max_user_instances if Listen keeps on complaining.

[chrisfroeschl]

I am not sure if that was the fixing point for me in the end, but ng serve --poll=2000 worked very well in my project. Time will probably tell if its going to continue working tho.

[dsebastien]

Same issue here with a Nrwl NX workspace where there is an Angular Web app.
HTML changes are not detected unless we enable polling (super CPU intensive).

I've tried increasing the max_user_watches on Minikube (we're using Kubernetes also during development), but it didn't help either.

[hijiangtao]

I think I still got this problem with Angular CLI 9.x, here's my environment information:

Angular CLI: 9.0.7
Node: 10.18.0
OS: darwin x64

Angular: 9.0.7
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: No

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.7
@angular-devkit/build-angular     0.900.7
@angular-devkit/build-optimizer   0.900.7
@angular-devkit/build-webpack     0.900.7
@angular-devkit/core              9.0.7
@angular-devkit/schematics        9.0.7
@ngtools/webpack                  9.0.7
@schematics/angular               9.0.7
@schematics/update                0.900.7
rxjs                              6.5.5
typescript                        3.7.5
webpack                           4.41.2

I start my app with ng serve and npm link with another local library, I will watch the library's file changes, rebuild it, and link it here.

First, I can confirmed updates can be found in my Angular Project, the wired things is only changes in library's TypeScript files can be seen in pages, changes in html and styles files remains silent.

Tips for one more thing, I declare my component in library with this way:

@Component({
  selector: 'lib-hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.scss'],
})
export class HelloComponent implements OnInit {
  ...
}

[hijiangtao]

I tried again with npm install file:local-path in my host project and then ng build library --watch in the library project again, then I start my host project with ng serve.

I exam all the bundles that Angular generated for my website, suppose I changed a text string from 'a' to 'b', then I couldn't find any 'a' in output bundles (main.js) but only 'b' inside it (begins with codes like Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([ etc.), however, the generated page still displays with 'a'.

I suspect this is because something still inside the running memory, and didn't get refreshed yet. One thing is that the above things happens when I still have my host project's in running state.

[alan-agius4]

Hi all, this issue is now obsolete when using Ivy. Please update to the most recent Angular CLI version.

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

[dsebastien]

@alan-agius4 can you clarify your answer a bit?

I'm using Angular 9 with Ivy and using the most recent CLI version, but I still face this issue from time to time (really hard to be able to consistently reproduce it and give a scenario).

I've noticed that I'm still using the --aot flag in my serve and build commands:

"start:web": "nx run web:serve --aot --host 0.0.0.0 --publicHost dev.didowi.local --open",

This goes through Nx, but it's also up to date..

Are we supposed to remove the --aot flag to have this issue fixed?

[alan-agius4]

@dsebastien, you don't need to remove the aot flag if you are using Ivy.

This issue is specific to libraries being consuming in an application. So your issue might be something different.

[angular-automatic-lock-bot[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._}