Repository navigation
Ivy is not complaining about unknown element inside ng-template #36171
Description
🐞 bug report
Description
Ivy does not complain about an unknown element when this element is placed inside ng-template. When it's outside of ng-template it throws a build error.
The issue can only be found in runtime (no component being rendered) or with fullTemplateTypeCheck: true.
🔬 Minimal Reproduction
- Create a new Angular app, open the
tsconfig.jsonand updateangularCompilerOptionsto
"angularCompilerOptions": {
"enableIvy": true
}- open
app.component.htmland update its content to:
<ng-container *ngTemplateOutlet="test1"></ng-container>
<ng-template #test1>
<some-component></some-component>
</ng-template>
- Run
ng serveand observe no build errors (<---- Issue here) - open
tsconfig.jsonand updateangularCompilerOptionsto:
"angularCompilerOptions": {
"enableIvy": false
}
- Run
ng serveand observe a build error - Open the
tsconfig.jsonand updateangularCompilerOptionsto
"angularCompilerOptions": {
"enableIvy": true
}- open
app.component.htmland update its content to:
<ng-container *ngTemplateOutlet="test1"></ng-container>
<some-component></some-component>
<ng-template #test1>
<some-component></some-component>
</ng-template>
- Run
ng serveand observe a build error
🌍 Your Environment
Angular Version: 9.0.7
Please clarify if the discrepancy in the compiler behavior between steps 3 and 5 or 8 is an intended behavior.
Activity
JoostK commentedon Mar 20, 2020
This is due to an architectural change in Ivy. In the previous compiler (ViewEngine), the check for unknown elements would occur during parsing of the template. In Ivy, templates are parsed independently from the corresponding
NgModule, so information on components/directives in scope is not available.Instead, checking of elements is pushed into the template type checking phase and it's currently affected by the type checker's configuration. With
fullTemplateTypeCheckset to true however, it should descend into templates to check them (when it'sfalse, it won't for backwards compatibility reasons). This conflicts however with your statement here:So maybe I'm mistaken or misinterpreted this statement, or something is not working as I expect it to be.
JoostK commentedon Mar 20, 2020
Btw, it should certainly be possible to adjust the type checker to handle this differently, independent of
fullTemplateTypeCheck. It would actually be a better design if it were that way.x87 commentedon Mar 20, 2020
When I set
fullTemplateTypeChecktotrueI get the build error as expected. The issue is that this option is not set by default and I only learned about it today.edit: I have an existing Angular app where
fullTemplateTypeCheckwas not set.x87 commentedon Mar 20, 2020
Yet it's not clear how come Ivy is able to recognize the unknown element when it's outside of
<ng-template(steps 6, 7, 8).JoostK commentedon Mar 20, 2020
I can explain that :-)
If
fullTemplateTypeCheckis disabled, anyng-template(or structural directive template) in an Angular template are not type checked for compatibility reasons (thefullTemplateTypeCheckwas introduced as a compatibility flag). In Ivy, disabling this flag causes any templates to be skipped during the type checking phase. This however is where these unknown elements would have been detected. Elements outsideng-templateare always checked, regardless offullTemplateTypeCheck.alxhub commentedon May 26, 2020
I see the fact that Ivy doesn't complain (without
fullTemplateTypeCheckmode) as a bug. We should match View Engine's behavior, and that means running the unknown element checks even in basic mode, for the full template.ippeiukai commentedon Oct 2, 2022
As #47601 is closed as a duplicate of this issue, I’d like to add a couple of additional points:
In addition to unknow elements inside
ng-template, this issue also affects:NG8002: Can't bind to 'ngModel' since it isn't a known property)<div *ngIf="…">…</div>)(@JoostK Any chance we extend the issue title to be more inclusive of other cases?)
alxhub commentedon Dec 15, 2023
I'd rather have specific issues for specific conditions, since how addressable they are varies widely.
I'm going to close this issue actually, as the basic type-checking mode (
fullTemplateTypeCheck: false) has been deprecated for a long while (andstrictTemplatesis default in new projects).angular-automatic-lock-bot commentedon Jan 15, 2024
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.