CUSTOM_ELEMENTS_SCHEMA added to NgModule.schemas still showing Error
Just wanted to add a little bit more on this.
With the new angular 2.0.0 final release (sept 14, 2016), if you use custom html tags then it will report that Template parse errors
. A custom tag is a tag you use in your HTML that's not one of these tags.
It looks like the line schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
need to be added to each component where you are using custom HTML tags.
EDIT: The schemas
declaration needs to be in a @NgModule
decorator. The example below shows a custom module with a custom component CustomComponent
which allows any html tag in the html template for that one component.
custom.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CustomComponent } from './custom.component';
@NgModule({
declarations: [ CustomComponent ],
exports: [ CustomComponent ],
imports: [ CommonModule ],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class CustomModule {}
custom.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-custom-component',
templateUrl: 'custom.component.html'
})
export class CustomComponent implements OnInit {
constructor () {}
ngOnInit () {}
}
custom.component.html
In here you can use any HTML tag you want.
<div class="container">
<boogey-man></boogey-man>
<my-minion class="one-eyed">
<job class="plumber"></job>
</my-minion>
</div>
This is fixed by:
a) adding schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
to every component or
b) adding
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
and
schemas: [
CUSTOM_ELEMENTS_SCHEMA
],
to your module.