ivy throw [tagName] is not a known element

@alxhub

🐞 bug report

Affected Package

I think, the issue is caused by package @angular/core

Is this a regression?

Yes, it works in ViewEngine

Description

In angular v9 rc1 enable ivy with certain 3th party lib throw * is not known element

🔬 Minimal Reproduction

One line repro :
git clone https://github.com/elvisbegovic/ivy-tag-is-not-a-known-element.git && cd ivy-tag-is-not-a-known-element && npm i && ng s -o

Compilation/serve is OK, but at runtime (open dev tools) error is:

🔥 Exception or Error


core.js:6068 ERROR Error: 'tree-viewport' is not a known element:
1. If 'tree-viewport' is an Angular component, then verify that it is part of this module.
2. If 'tree-viewport' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    at validateElement (core.js:23156)
    at Module.ɵɵelementStart (core.js:22963)
    at TreeComponent_Template (tree.component.js:245)
    at executeTemplate (core.js:13684)
    at renderView (core.js:13486)
    at renderComponent (core.js:14841)
    at renderChildComponents (core.js:13291)
    at renderView (core.js:13512)
    at renderComponent (core.js:14841)
    at renderChildComponents (core.js:13291)

Snippet code of compiled tree.component.js

🌍 Your Environment

See Environment...


**Angular Version:**
<pre><code>
Angular CLI: 9.0.0-rc.1
Node: 12.13.0
OS: win32 x64
Angular: 9.0.0-rc.1
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.0-rc.1
@angular-devkit/build-angular     0.900.0-rc.1
@angular-devkit/build-optimizer   0.900.0-rc.1
@angular-devkit/build-webpack     0.900.0-rc.1
@angular-devkit/core              9.0.0-rc.1
@angular-devkit/schematics        9.0.0-rc.1
@ngtools/webpack                  9.0.0-rc.1
@schematics/angular               9.0.0-rc.1
@schematics/update                0.900.0-rc.1
rxjs                              6.5.3
typescript                        3.6.4
webpack                           4.41.2
</code></pre>

✍️ Anything else relevant?

This breaks application at runtime, annoying we cannot see that durning build/serve step.

/cc @alxhub @petebacondarwin

I am having this exact same issue, but I think I can narrow it down to <ng-content select="..."> usage. See my simple example project here (no 3rd party library, only an additional library in the workspace):

https://github.com/joshcomley/ng91tagbug

One line:

git clone https://github.com/joshcomley/ng91tagbug.git && cd ng91tagbug && npm i && ng build mylib && ng serve

This works fine with v9 rc0 but errors on v9 rc1.

I'm seeing something similar when trying to use custom elements. This only regressed in rc.1, custom elements were working fine in rc.0 and earlier.

To reproduce, create a new app using the CLI, add schemas: [CUSTOM_ELEMENTS_SCHEMA] to the module, and add a new elements to a template, such as <foo-bar>. This will throw this error:

ERROR Error: "'foo-bar' is not a known element

Changing the angularCompilerOption "enableIvy": false, fixes the issue.

Probably due to c83f501

This also seems to break ngx-extended-pdf-viewer. With rc0, the library works, but with rc1 i get core.js:6068 ERROR Error: 'menuitem' is not a known element:, see more details here: stephanrauh/ngx-extended-pdf-viewer#169

@pkozlowski-opensource

@pkozlowski-opensource thanks for the commit.

Cursory view of it makes me think c83f501 doesn't play nicely with lazy-loaded custom elements (i.e. the tags are on the page, but don't have customElements.define() called against them until later after they've been loaded).

This is the default behavior of web components compiled with Stencil: https://stenciljs.com/blog/how-lazy-loading-web-components-work

Was the check against customElements.get() occurring in the past?

Additional information to #33685 (comment):

The validation method validateElement() is elegant, but it breaks on corner cases like menuitem.

Currently, menuitem is implemented by Firefox, but not by Chrome or Safari. As far as I know, menuitem was part of the HTML standard before HTML5. It has been marked as deprecated, but Firefox continued to support this tag.

Be that as it may, some people - such as the pdf.js team - are using both menu and menuitem in their application. That's why ngx-extended-pdf-viewer run fine on Firefox but is broken on Chrome and Safari.

With the change to the diagnostics reporting we get:

Compiling angular-tree-component : module as esm5
console_logger.ts:38
Error: Failed to compile entry-point angular-tree-component due to compilation errors:
node_modules/mobx-angular/dist/mobx-angular.d.ts(5,22): error TS-996002: Appears in the NgModule.imports of TreeModule, but could not be resolved to an NgModule class

which at least will tell us where to start looking and not leave us with an obscure runtime error.

fix(ngcc): report errors from `analyze` and `resolve` processing

fix(ngcc): report errors from `analyze` and `resolve` processing (#33964

@joshcomley

@joshcomley - as far as I can tell your scenario is working as expected. The <myselector> element is not known to Angular - it is neither a well-known HTML element nor a component/directive defined with an element selector.

Note also that this has nothing to do with MyLibComponent being in a separate package (or even NgModule). You can move it to the main package (and declare it in the AppModule and you get the same result. It is possible that this error was not shown in JIT mode until recently when we landed c83f501.

Oh! I just saw in your repro that you have actually added NO_ERRORS_SCHEMA to the NgModule, which means that it really should not error... 🤔

I think this is a bug in the ivy code - probably related to c83f501

I have created a new issue for the NO_ERRORS_SCHEMA scenario which is different to this issue: #33976

Closing this as ngcc is actually working as expected and we have landed the PR to improve the error messaging.

@petebacondarwin

@petebacondarwin Just doublechecking: did you address the menuitem issue, too?

IMHO that's a tricky one. It works on Firefox but fails on most other browsers.

@stephanrauh

@stephanrauh:

The menuitem element is deprecated and not supported by the Angular AOT compiler (see its element registry). And now it is not supported in JIT mode since c83f501.

There is an easy workaround, which is to tell Angular about this element by declaring a directive with that element as its selector:

@Directive({selector: 'menuitem'})
export class MenuitemDirective {}

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

Navigation Menu

Repository navigation

ivy throw [tagName] is not a known element #33685

🐞 bug report

Affected Package

Is this a regression?

Description

🔬 Minimal Reproduction

🔥 Exception or Error

🌍 Your Environment

✍️ Anything else relevant?

15 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

ivy throw [tagName] is not a known element #33685

Description

🐞 bug report

Affected Package

Is this a regression?

Description

🔬 Minimal Reproduction

🔥 Exception or Error

🌍 Your Environment

✍️ Anything else relevant?

Activity

joshcomley commented on Nov 8, 2019

mattdsteele commented on Nov 8, 2019

pkozlowski-opensource commented on Nov 13, 2019

chrste90 commented on Nov 13, 2019

mattdsteele commented on Nov 13, 2019

stephanrauh commented on Nov 13, 2019

15 remaining items

petebacondarwin commented on Nov 21, 2019

petebacondarwin commented on Nov 21, 2019

petebacondarwin commented on Nov 21, 2019

petebacondarwin commented on Nov 21, 2019

stephanrauh commented on Nov 21, 2019

petebacondarwin commented on Nov 22, 2019

angular-automatic-lock-bot commented on Dec 23, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions