ng serve with --aot does not reload template changes

[zmad5306]

Bug Report or Feature Request (mark with an x)

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

Versions.

####Ubuntu 16.04 LTS
@angular/cli: 1.0.3
node: 7.10.0
os: linux x64 (Ubuntu 16.04 LTS)
@angular/common: 4.1.2
@angular/compiler: 4.1.2
@angular/core: 4.1.2
@angular/forms: 4.1.2
@angular/http: 4.1.2
@angular/platform-browser: 4.1.2
@angular/platform-browser-dynamic: 4.1.2
@angular/router: 4.1.2
@angular/cli: 1.0.3
@angular/compiler-cli: 4.1.2

####Windows 10 Home
@angular/cli: 1.0.2
node: 6.9.2
os: win32 x64

Repro steps.

ng new
ng serve --aot
modify app.component.html
save app.component.html

The log given by the failure.

Template change not shown by live reload in browser. Also if the browser is refreshed the template change is not shown. It appears a template only change is not causing a recompile even though the terminal output shows a build occurred. If a .ts file is modified saved the template modification will then display.

Desired functionality.

Live reload browser with template change when --aot flag is set.

Mention any other details that might be useful.

[Yona-Appletree]

This may be related to #6238, which is the issue that changes are reloaded too quickly. Do the changes to the template show up if you make a second change? That is, do they lag one change behind?

[zmad5306]

No they do not even after refreshing the browser manually. When the --aot flag is passed it requires a change to a .ts file or a restart of the server.

[sumitarora]

@zmad5306 I tried to replicate the issue and seems to be working fine. Is there a repo I can take a look? It happens on every time or sometimes only?

[zmad5306]

git clone https://github.com/zmad5306/angular-cli-aot-bug.git
cd into folder you cloned it into
npm install
npm start

Run localhost:4200 in browser (Chrome in my case)
Modify <h2>Hello world</h2> in app.component.html and save.
Reload will not show change even if the browser is refreshed. If you change a .ts file or restart npm start then the change will appear.

[oliverhanappi]

I am experiencing a very similar issue. For me, template changes occur one compilation cycle delayed:

1. ng new repro; cd repro
2. ng serve --aot --open
3. Browser opens, shows "app works!"
4. Change app.component.html to "app works 2"
5. Browser refreshes, however still shows "app works!"
6. Change app.component.html to "app works 3"
7. Browser refreshes and shows "app works 2" (the change made in step 4 and not in step 6)
8. after another change, the browser shows "app works 3" and so on

My versions:

Windows 10 Enterprise 1607
@angular/cli: 1.0.4
node: 6.10.3
os: win32 x64
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/core: 4.1.3
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.0.4
@angular/compiler-cli: 4.1.3

[sumitarora]

@oliverhanappi Just checked seems to be an issue in the case of aot and prod builds only. There is already an issue logged for this #1610 Closing this in favor of that.

[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. #1610 doesn't solve this problem.

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.