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.

This can also come up when running unit tests if you are testing a component with custom elements. In that case custom_elements_schema needs to be added to the testingModule that gets setup at the beginning of the .spec.ts file for that component. Here is an example of how the header.component.spec.ts setup would begin:

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';describe('HeaderComponent', () => {  let component: HeaderComponent;  let fixture: ComponentFixture<HeaderComponent>;  beforeEach(async(() => {    TestBed.configureTestingModule({      declarations: [PrizeAddComponent],      schemas: [        CUSTOM_ELEMENTS_SCHEMA      ],    })      .compileComponents();  }));