Ivy is not complaining about unknown element inside ng-template

[x87]

🐞 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

1. Create a new Angular app, open the tsconfig.json and update angularCompilerOptions to

  "angularCompilerOptions": {
    "enableIvy": true
  }

2. open app.component.html and update its content to:

<ng-container *ngTemplateOutlet="test1"></ng-container>

<ng-template #test1>
   <some-component></some-component>
</ng-template>

3. Run ng serve and observe no build errors (<---- Issue here)
4. open tsconfig.json and update angularCompilerOptions to:

  "angularCompilerOptions": {
    "enableIvy": false
  }

5. Run ng serve and observe a build error
6. Open the tsconfig.json and update angularCompilerOptions to

  "angularCompilerOptions": {
    "enableIvy": true
  }

7. open app.component.html and update its content to:

<ng-container *ngTemplateOutlet="test1"></ng-container>
<some-component></some-component>

<ng-template #test1>
   <some-component></some-component>
</ng-template>

8. Run ng serve and 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.

[JoostK]

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 fullTemplateTypeCheck set to true however, it should descend into templates to check them (when it's false, it won't for backwards compatibility reasons). This conflicts however with your statement here:

The issue can only be found in runtime (no component being rendered) or with fullTemplateTypeCheck: true.

So maybe I'm mistaken or misinterpreted this statement, or something is not working as I expect it to be.

[JoostK]

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]

When I set fullTemplateTypeCheck to true I 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 fullTemplateTypeCheck was not set.

[x87]

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]

I can explain that :-)

If fullTemplateTypeCheck is disabled, any ng-template (or structural directive template) in an Angular template are not type checked for compatibility reasons (the fullTemplateTypeCheck was 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 outside ng-template are always checked, regardless of fullTemplateTypeCheck.

[alxhub]

I see the fact that Ivy doesn't complain (without fullTemplateTypeCheck mode) 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]

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:

• unknown directives (such as NG8002: Can't bind to 'ngModel' since it isn't a known property)
• inside any element with structural directives (such as inside <div *ngIf="…">…</div>)

(@JoostK Any chance we extend the issue title to be more inclusive of other cases?)

[alxhub]

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 (and strictTemplates is default in new projects).

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