Repository navigation
Template error when using serve-command or --watch with Angular 8 / Ivy #32217
Description
🐞 Bug report
Command (mark with an x)
- [ ] new
- [x] build
- [x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc
Is this a regression?
This bug was not present in any Angular 7.x apps.
Description
The directives *ngIf and *ngFor are not working properly when I use the ng serve command in an angular 8 app (with ivy enabled).
When running the command initially and opening the website in the browser, everything works as intended. But as soon as I make any change that causes the CLI to rebuild and reload the app, I'm getting a "Template error" in my console, e.g. "Template error: Can't bind to 'ngIf' since it isn't a known property of 'h2'."
I suppose this is a bug with the CLI since it only occus when the serve command rebuilds the app on changes.
This also happens when using the buildcommand with --watch.
🔬 Minimal Reproduction
- Create a new Angular 8 Ivy app by running
ng new test-app --enable-ivy - Add
*ngIf="true"to any HTML-element in app.component.html - Run
ng servefrom the app directory - Open the website in a browser (I have tested this in Chrome and Firefox) --> The ngIf-directive should work as expected
- Make any minor change to any file to trigger rebuild and wait for the page to refresh --> The template error should be logged in the browser's console
🌍 Your Environment
Angular CLI: 8.2.2
Node: 12.4.0
OS: win32 x64
Angular: 8.2.2
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.802.2
@angular-devkit/build-angular 0.802.2
@angular-devkit/build-optimizer 0.802.2
@angular-devkit/build-webpack 0.802.2
@angular-devkit/core 8.2.2
@angular-devkit/schematics 8.2.2
@ngtools/webpack 8.2.2
@schematics/angular 8.2.2
@schematics/update 0.802.2
rxjs 6.4.0
typescript 3.5.3
webpack 4.38.0
Reacted by Hadi Skeini
Activity
alan-agius4 commentedon Aug 20, 2019
This seems to be more of a compiler issue, hence transferring it to angular/angular
JoostK commentedon Aug 20, 2019
Hi @taylanken, thanks for reporting.
I suspect this may have been fixed in #31932, could you try again with Angular
9.0.0-next.2and report back on your findings?taylanken commentedon Aug 21, 2019
Hi @JoostK, I've upgraded the repro app to
9.0.0-next.2and this indeed seems to be fixed. I can't reproduce the bug with this version.JoostK commentedon Aug 21, 2019
@taylanken Awesome, that was what I was hoping for. I'll close this then, feel free to open new issues if you experience other problems. Thanks again for testing Ivy!
JohanMouritsen commentedon Sep 19, 2019
will this not be fixed with any official releases of angular 8? currently it is making ivy unusable for me without upgrading to angular9-next.
avatsaev commentedon Oct 17, 2019
Agreed with @JohanMouritsen, can the fix be backported?
JoostK commentedon Oct 17, 2019
@avatsaev Nope, Ivy is still in preview so you need to be on the preview releases in the
9.0line.angular-automatic-lock-bot commentedon Nov 17, 2019
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.