Unknown element not detected when a directive is applied

[Endrzei]

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

Applying a known directive to an unknown element, causes Angular to compile without errors.

<!-- throws: 'i-dont-exist' is not a known element: -->
<i-dont-exist></i-dont-exist>

<!-- compiles without error -->
<i-dont-exist [ngStyle]="{ color: 'red ' }"></i-dont-exist>

This behaviour enables regressions through element selector typos. Introducing a typo results in no component being rendered, yet it doesn't produce any compilation errors.

<my-element [ngModel]="value"></my-element>

<my-element-with-a-typo [ngModel]="value"></my-element-with-a-typo>

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-ivy-asdy9n?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fapp.component.ts,src%2Findex.html,src%2Fmain.ts

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 14.0.7
Node: 14.18.2
Package Manager: npm 6.14.17
OS: darwin x64

Angular: 14.1.0
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1401.0
@angular-devkit/build-angular   14.1.0
@angular-devkit/core            14.1.0
@angular-devkit/schematics      14.0.7
@angular/cli                    14.0.7
@schematics/angular             14.0.7
rxjs                            7.5.6
typescript                      4.7.4

[pkozlowski-opensource]

Note: I can see how it could be confusing but when you write <my-element-with-a-typo> Angular has no way of knowing if my-element-with-a-typo is a "valid" or "invalid" element name. It is not even clear what "valid element name" means here.

Again, understand the confusion, just saying that rules are not clear here.

[Endrzei]

Note: I can see how it could be confusing but when you write <my-element-with-a-typo> Angular has no way of knowing if my-element-with-a-typo is a "valid" or "invalid" element name. It is not even clear what "valid element name" means here.

Again, understand the confusion, just saying that rules are not clear here.

What is not clear to me is the fact that Angular does recognise <my-element-with-a-typo> as an unknown element when there is no directive applied to it.

<my-element-with-a-typo></my-element-with-a-typo>

results in:

'my-element-with-a-typo' is not a known element:
1. If 'my-element-with-a-typo' is an Angular component, then verify that it is part of this module.
2. If 'my-element-with-a-typo' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Could you please explain why applying a directive to it results in Angular having no way of knowing if it is an unknown element?

[crisbeto]

I suspect that the code was written in this way to capture the case where the element isn't known, but there's a directive matching the specific tag name, but it's currently verifying that any directive matches the element which is incorrect. See https://github.com/angular/angular/blob/main/packages/core/src/render3/instructions/element_validation.ts#L84.

[jessicajaniuk]

Closing this as duplicate of #47085.

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