CUSTOM_ELEMENTS_SCHEMA added to NgModule.schemas still showing error

Question

I just upgraded from Angular 2 rc4 to rc6 and had problems with this.

I see the following error on my console:

Unhandled Promise rejection: Template parse errors: 'cl-header' is not a known element: 1. If 'cl-header' is an Angular component, then verify that it is part of this module. 2. If 'cl-header' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("<main> [ERROR ->]<cl-header>Loading Header...</cl-header> <div class="container-fluid"> <cl-feedbackcontai"): AppComponent@1:4 

Here is my header component:

 import { Component } from '@angular/core'; import { Router } from '@angular/router'; // own service import { AuthenticationService } from '../../../services/authentication/authentication.service.ts'; import '../../../../../public/css/styles.css'; @Component({ selector: 'cl-header', templateUrl: './header.component.html', styleUrls: ['./header.component.css'] }) export class HeaderComponent { // more code here... } 

Here is my header module:

 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { RouterModule } from '@angular/router'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { HeaderComponent } from './../../../components/util_components/header/header.component.ts'; @NgModule({ declarations: [ HeaderComponent ], bootstrap: [ HeaderComponent ], imports: [ RouterModule, CommonModule, FormsModule ], schemas: [ CUSTOM_ELEMENTS_SCHEMA ] }) export class HeaderModule { } 

I created a wrapper module called the util module that imports the HeaderModule:

 import { NgModule } from '@angular/core'; import {HeaderModule} from "./header/header.module"; // ... @NgModule({ declarations: [ ], bootstrap: [ ], imports: [ HeaderModule] }) export class UtilModule { } 

which is finally imported by AppModule:

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import {UtilModule} from "./modules/util_modules/util.module"; import {RoutingModule} from "./modules/routing_modules/routing.module"; @NgModule({ bootstrap: [AppComponent], declarations: [AppComponent], imports: [BrowserModule, UtilModule, RoutingModule] }) export class AppModule { } 

As far as I understand, I follow the error message instructions using SCHEMA to suppress the error. But it does not seem to work. What am I doing wrong? (I hope that I simply don’t see anything obvious at the moment. I spent the last 6 hours updating this version ...)

Answer 1

Hey this fixed by doing

a) adding schemas: [ CUSTOM_ELEMENTS_SCHEMA ] to each component or

b) adding

 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 

and

 schemas: [ CUSTOM_ELEMENTS_SCHEMA ], 

to your module.

Cheers, Raphael

Answer 2

Just wanted to add a little more.

In the new release of angular 2.0.0 (sept 14, 2016), if you use custom html tags, then it will report Template parse errors about it. A custom tag is a tag that you use in your HTML, but not one of these tags .

It looks like the schemas: [ CUSTOM_ELEMENTS_SCHEMA ] should be added to each component where you use custom HTML tags.

EDIT: The schemas must be in the @NgModule decoder. The following example shows a user module with a custom component CustomComponent , which allows you to use any html tag in an html template for this single 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

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> 

Answer 3

It works for me as follows:

in "App.module.ts":

one-

 import CUSTOM_ELEMENTS_SCHEMA from `@angular/core` file ; 

2 - Add

 schemas: [ CUSTOM_ELEMENTS_SCHEMA ] 

in @NgModule({})

----------------------------------------------- --- -------> <----------------------------------------- ------- -------------

"app.module.ts" will look like this:

 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; @NgModule({ declarations: [], imports: [], schemas: [ CUSTOM_ELEMENTS_SCHEMA], providers: [], bootstrap: [AppComponent] }) 

AppModule export class {}

Answer 4

That didn't work either. I changed

 CUSTOM_ELEMENTS_SCHEMA 

for

 NO_ERRORS_SCHEMA 

which was proposed in this article: https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

Now it works.

Answer 5

util.component.ts

 @Component({ selector: 'app-logout', template: `<button class="btn btn-primary"(click)="logout()">Logout</button>` }) export class LogoutComponent{} 

util.module.ts

 @NgModule({ imports: [...], exports: [ LogoutComponent ], declarations: [LogoutComponent] }) export class AccountModule{}; 

LogoutComponent Export Required

dashboard.module.ts
import AccountModule in the module where we want to use <app-logout> import {AccountModule} from 'util.module';

 @NgModule({ imports: [ CommonModule, AccountModule ], declarations: [DashboardComponent] }) export class DashboardModule { } 

dashboard.component.ts

 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-dashboard', template: `<div><app-logout></app-logout></div>` }) export class DashboardComponent implements OnInit { constructor() {} ngOnInit() {} } 

I do not need to import and use CUSTOM_ELEMENTS_SCHEMA .
however its not working when dashboard.module is lazy loaded.
When using CUSTOM_ELEMENTS_SCHEMA in case of lazy loading, the error is suppressed, but the component is not added to dom.

Answer 6

Just read this post and according to the angular 2 docs:

 export CUSTOM_ELEMENTS_SCHEMA Defines a schema that will allow: any non-Angular elements with a - in their name, any properties on elements with a - in their name which is the common rule for custom elements. 

So, just in case anyone encounters this problem by adding CUSTOM_ELEMENTS_SCHEMA to their NgModule, make sure that any new user element you use has a dash in its name, for example. or etc.

Answer 7

I would like to add one more additional information since the accepted answer above did not completely correct my errors.

In my scenario, I have a parent component that contains a child component. And this child component also contains another component.

So, in my specification file of the parent component there should be a declaration of the child component, SO AS A CHILD'S CHILD COMPONENT. This finally fixed the problem for me.

Answer 8

This did not work for me (using 2.0.0). What worked for me was importing a RouterTestingModule instead.

I solved this by importing the RouterTestingModule into the spec file.

 import { RouterTestingModule } from '@angular/router/testing'; beforeEach(() => { TestBed.configureTestingModule({ providers: [ App, AppState, Renderer, {provide: Router, useClass: MockRouter } ], imports: [ RouterTestingModule ] }); }); 

Answer 9

Have you used the web package ... if so, please install

 angular2-template-loader 

and put it

 test: /\.ts$/, loaders: ['awesome-typescript-loader', 'angular2-template-loader']