Angular-cli: With Ivy, HTML Changes and BrowserModule not recognized immediately during ng serve

[Jun711]

🐞 Bug report

Command (mark with an x)

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

Is this a regression?

Yes, the previous version in which this bug was not present was: ....

Description

A clear and concise description of the problem...
When I create N Angular 8 app with Ivy enabled, I noticed that changes in HTML is no reflected immediately when I make changes to HTML during ng serve. It did finish recompile.

With ng serve running, I added a newly added component in angular.component.html, I got this error:

ERROR Error: Template error: Can't bind to 'ngSwitch' since it isn't a known property of 'div'.
    at createUnknownPropertyError (core.js:12759)
    at validateAgainstUnknownProperties (core.js:12698)
    at elementPropertyInternal (core.js:12603)
    at Module.ɵɵproperty (core.js:19773)
    at AppComponent_Template (app.component.html:421)
    at executeTemplate (core.js:12177)
    at checkView (core.js:13615)
    at componentRefresh (core.js:13359)
    at refreshChildComponents (core.js:11858)
    at refreshDescendantViews (core.js:11757)

I stopped and re-ran ng serve. The above error didn't happen again. Then, I added *ngIf in an my component html file, specifically the auto generated p element, I got the following error.

core.js:6014 ERROR Error: Template error: Can't bind to 'ngIf' since it isn't a known property of 'p'.
    at createUnknownPropertyError (core.js:12759)
    at elementPropertyInternal (core.js:12625)
    at Module.ɵɵproperty (core.js:19773)
    at TestComponent_Template (test.component.html:3)
    at executeTemplate (core.js:12177)
    at checkView (core.js:13615)
    at componentRefresh (core.js:13359)
    at refreshChildComponents (core.js:11858)
    at refreshDescendantViews (core.js:11757)
    at checkView (core.js:13616)

However, these error went away after I stopped and re-ran ng serve so it wasn't because there was no BrowserModule. It didn't happen when I didn't have Ivy enabled.

🔬 Minimal Reproduction

Minimal reproduction repo:
https://github.com/Jun711/angular8IvyApp

You can also follow the following steps to reproduce
1) ng new angularApp --routing=false --enable-ivy --style=scss
2) cd angularApp
3) ng g c ./components/angular
4) ng serve --open

5) add <app-angular></app-angular> in app.component.html
You would see Template error: Can't bind to 'ngSwitch' since it isn't a known property of 'div'.
and angular component is not added to app.component.html

6) add *ngIf="count > 0" in auto generated p element in angular.component.html
<p *ngIf="count > 0">angular works!</p>
You would see Template error: Can't bind to 'ngIf' since it isn't a known property of 'p'.

7) stop and re-run ng serve and these errors go away

🔥 Exception or Error

ERROR Error: Template error: Can't bind to 'ngSwitch' since it isn't a known property of 'div'.
    at createUnknownPropertyError (core.js:12759)
    at validateAgainstUnknownProperties (core.js:12698)
    at elementPropertyInternal (core.js:12603)
    at Module.ɵɵproperty (core.js:19773)
    at AppComponent_Template (app.component.html:421)
    at executeTemplate (core.js:12177)
    at checkView (core.js:13615)
    at componentRefresh (core.js:13359)
    at refreshChildComponents (core.js:11858)
    at refreshDescendantViews (core.js:11757)


core.js:6014 ERROR Error: Template error: Can't bind to 'ngIf' since it isn't a known property of 'p'.
    at createUnknownPropertyError (core.js:12759)
    at elementPropertyInternal (core.js:12625)
    at Module.ɵɵproperty (core.js:19773)
    at TestComponent_Template (test.component.html:3)
    at executeTemplate (core.js:12177)
    at checkView (core.js:13615)
    at componentRefresh (core.js:13359)
    at refreshChildComponents (core.js:11858)
    at refreshDescendantViews (core.js:11757)
    at checkView (core.js:13616)cd c

🌍 Your Environment

ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.3.4
Node: 11.0.0
OS: darwin x64
Angular: 8.2.6
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.4
@angular-devkit/build-angular     0.803.4
@angular-devkit/build-optimizer   0.803.4
@angular-devkit/build-webpack     0.803.4
@angular-devkit/core              8.3.4
@angular-devkit/schematics        8.3.4
@angular/cli                      8.3.4
@ngtools/webpack                  8.3.4
@schematics/angular               8.3.4
@schematics/update                0.803.4
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2

Anything else relevant?

Please let me know if you need more information. Thanks.

[alan-agius4]

Hi, can you try using using Angular 9.0.0-next.5?

[Jun711]

@alan-agius4
I think angular/cli 9.0.0-next.5 hasn't been published yet.

npm install @angular/[email protected] --save-dev
npm ERR! code ETARGET
npm ERR! notarget No matching version found for @angular/[email protected]
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

npm ERR! A complete log of this run can be found in:

I tried by using the following steps

1. npm install @angular/[email protected] -g
2. ng --version

ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 9.0.0-next.4
Node: 11.0.0
OS: darwin x64
Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.900.0-next.4
@angular-devkit/core         9.0.0-next.4
@angular-devkit/schematics   9.0.0-next.4
@schematics/angular          9.0.0-next.4
@schematics/update           0.900.0-next.4
rxjs                         6.4.0

1. ng new angularApp2 --routing=false --enable-ivy --style=scss
   Error:
   Unknown option: '--enable-ivy'

[alan-agius4]

Hi @Jun711, I was referring to update the Angular framework and not the CLI

In version 9, the enable-ivy option has been removed, since Ivy is turned on by default.

Try running npx @angular/cli@next new app-ivy

[Jun711]

Thank you, @alan-agius4
yes, with Angular 9, it doesn't give these errors.

I guess this won't be fixed in Angular 8 then?

[alan-agius4]

@Jun711, yeah, most of ivy fixes are only available in 9.

[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._}