angular: ivy throw [tagName] is not a known element
🐞 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.
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 5
- Comments: 22 (13 by maintainers)
Commits related to this issue
- fix(ngcc): report errors from `analyze` and `resolve` processing Previously, these errors were being swallowed, which made it hard to debug problems with packages. See https://github.com/angular/ang... — committed to petebacondarwin/angular by petebacondarwin 5 years ago
- fix(ngcc): report errors from `analyze` and `resolve` processing (#33964) Previously, these errors were being swallowed, which made it hard to debug problems with packages. See https://github.com/an... — committed to angular/angular by petebacondarwin 5 years ago
- fix(ngcc): report errors from `analyze` and `resolve` processing (#33964) Previously, these errors were being swallowed, which made it hard to debug problems with packages. See https://github.com/an... — committed to angular/angular by petebacondarwin 5 years ago
I have identified the root, root cause of the problem in @elvisbegovic’s one-line reproduction. This is probably not the general problem for other commenters on this issue but see the bottom of my analysis for ideas in those cases.
angular-tree-component
’s UMD build is not valid. Their use of rollup does not specifymobx
,mobx-angular
andlodash
as external packages, which leads to the UMD bundle including these packages inline. Note that the ESM files do not bundle up these external libraries and instead imports them as expected.['fesm2015', 'fesm5', 'es2015', 'esm2015', 'esm5', 'main', 'module']
it finds themain
property (UMD) before themodule
property (ESM). So ngcc was using the broken UMD format for computing the dependencies and so missing themobx-angular
package.mobx-angular
was not found as a dependency ofangular-tree-component
the former was being processed “after” the latter, which meant thatangular-tree-component
had a missing dependency when it came to processing the ESM format (akamodule
).directives
used by the component are not generated in the rendered output, leading to the runtime errors we see here.Possible resolutions:
ngcc.config.js
that hides themain
property inangular-tree-component
so that we always use themodule
property for both processing and for dependency resolution.angular-tree-component
- provide a PR to fix this package’s distributable (https://github.com/500tech/angular-tree-component/pull/771)module
is beforemain
. I think it was originally in this order because it was felt that a single flat file would be parsed faster than having to load up a deep non-flat hierarchy of files; but it is also reasonable to assume thatmain
is more likely to be “broken” thanmodule
in 3rd party libraries out there.With the change to the diagnostics reporting we get:
which at least will tell us where to start looking and not leave us with an obscure runtime error.
I can confirm it works!!!
Having this temporary
ngcc.config.js
with (if I understand):Or removing this line
"main": "dist/angular-tree-component.umd.js",
innode_modules/angular-tree-component/package.json
Then rerun ngcc, makes our large-app working with ivy!
By the way, doing this first
ng serve
always throw this warning:Thank you @petebacondarwin