There are some custom elements and attributes in component template (in this example they are used by third-party non-Angular code):
<foo></foo>
<div data-bar="{{ bar }}"></div>
They cause a compiler error:
Template parse errors:
'foo' is not a known element:
1. If 'foo' is an Angular component, then verify that it is part of this module.
2. If 'foo' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
[ERROR ->]<foo></foo>
<div data-bar="{{ bar }}"></div>
"): App@1:4
Can't bind to 'bar' since it isn't a known property of 'div'. ("
<foo></foo>
<div [ERROR ->]data-bar="{{ bar }}"></div>
")
...
How can foo
element and data-bar
attribute be added to compiler schema?
NO_ERRORS_SCHEMA
is not an option because it is not desirable for other unknown elements and attributes to be whitelisted.
You can try to override
DomElementSchemaRegistry
like this:Plunker Example
Looking good, but notice in you Plunker Example, the div in the markup is as below:
bar being = "test" is outputting on the dom just as:
and not
If you want the attribute rendered - say for polymer components you can use the following.