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"]