IVY dev server issues that vanish after restart

[matrium0]

Description

I have the following issue since using Ivy (i personally can confirm the issue exists on Angular 10 and 11).

There is some erratic behavior with Angular Ivy - sadly it's completely inconsistent (and i didn't find a way to reproduce it reliably), but it does happen quite often. I am running the dev-server with ng serve and every once in a while (usually after adding some HTML code) the compiler would puke out like 20 messages that make no sense - stuff like "Can't bind to 'ngIf' since it isn't a known property of 'div'". If I revert the most recent change, or comment out the last part of the HTML it works fine, but if i un-comment it the error comes back - reliably, at least in that matter - even if i repeat this 10 times. When i restart ng serve without changing any code the errors disappear though.

For me the issue happens on different PCs and different projects and with both Angular 10 and 11.

I talked to some colleagues and also asked arround on on reddit in this post and got responses that re-assure me that i am not the only one with that issue. Actually I am surprised that no issue exists for this, hopefully I didn't overlook it?

Unfortunately due to the "disappearing after restart" - nature of this bug it seems pointless to write a reproducer. I tried to forcible reproduce this error, but simply had no success - funny, since it haunts me to a point were i lost all trust into the compiler and just restart ng serve even before checking my code twice

🔥 Exception or Error

Error: src/app/administration/administration.module.ts:30:292 - error NG6001: The class 'SerienTerminComponent' is listed in the declarations of the NgModule 'AdministrationModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.

....

src/app/administration/termin/serien-termin/serien-termin.component.html:1:7 - error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'

... (like 20 more errors)

🌍 Your Environment

Angular Version:

Angular CLI: 11.0.1
Node: 14.15.0
OS: win32 x64

Angular: 11.0.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... localize, material, material-moment-adapter
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.1
@angular-devkit/build-angular   0.1100.1
@angular-devkit/core            11.0.1
@angular-devkit/schematics      11.0.1
@angular/cli                    11.0.1
@schematics/angular             11.0.1
@schematics/update              0.1100.1
rxjs                            6.6.3
typescript                      4.0.5

but as explained above this also happens on Angular 10

[JoostK]

Thanks for reporting. It sounds like you're experiencing #39431, which is a known issue at the moment.

Can you check whether a second recompile would fix your issue? So change the template to get the errors, then insert a space or something to let it recompile, does that resolve the errors?

[matrium0]

Thanks for the fast response JoostK. I tried that a few times when I had this issue and it sadly didn't work. Today I had the issue with this simple string interpolation i used for testing something: {{formGroup.get("days")?.errors | json}}
Forcing another recompile didn't do anything, but i could reliably turn the errors on and off by commenting out/in that string interpolation. Only after restarting the dev-server the problem is gone

[JoostK]

Thanks for the follow-up. If additional changes don't fix it, then I'm not sure if it's #39431. I would appreciate if you could extract some sort of reproduction, preferably a Github repo, so I can investigate further. I would love to get to the bottom of such issues, especially because it seems quite prevalent.

[matrium0]

Its so erratic, but the next time i get it I will try to backtrack my last steps as good as possible and see if i find a way of reproducing it in a minimal project - can't guarantee anything though, sorry :(

[JoostK]

In the meantime I came to realize that saving twice would indeed not help; you'll have to change the component's TS file to get rid of the error. This is being addressed in #39895.

[matrium0]

Hey JoostK, just had it again and can confirm that re-saving the TS file DOES help in these cases - thank you! I will use that as a workaround i guess.

Tried to backtrack my last steps that lead to the error, but couldn't reproduce, not even with re-applying IntelliJs local history step by step :(

[JoostK]

Great! In that case I'm pretty sure it shares the root cause with #39147, so I'll close this as a duplicate. There is a fix in the works in #39895 (and extended in #39923) which will hopefully land in a release soon.

[JoostK]

@matrium0 quick update: this has been fixed in #39967 and will be part of the 11.0.4 release, somewhere next week.

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