CUSTOM_ELEMENTS_SCHEMA added to NgModule.schemas still showing Error

Question

I just upgraded from Angular 2 rc4 to rc6 and having troubles doing so.

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 util module which 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 the 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 { }

To my understanding I am following the instructions of the error message using the SCHEMA to surpress the error. But it seems not to work. What am I doing wrong? (I hope its nothing obvious I just don't see at the moment. Been spending the past 6 hours upgrading to this version...)

Solution 1

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.

Solution 2

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>

Solution 3

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();
  }));

Solution 4

Add the following under @NgModule({})in 'app.module.ts' :

import {CUSTOM_ELEMENTS_SCHEMA} from `@angular/core`;

and then

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
]

Your 'app.module.ts' should look like this:

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

@NgModule({
  declarations: [],
  imports: [],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Solution 5

It didn't work for me either. I changed

CUSTOM_ELEMENTS_SCHEMA

for

NO_ERRORS_SCHEMA

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

Now it works.

View more solutions

Comments

[Alessandro Resta]

If you add it to your AppModule do you still have to add it to your component?

[AIon]

same here, for me just adding " schemas: [CUSTOM_ELEMENTS_SCHEMA ] " worked like a charm. Thank you:)

[Danny Bullis]

It'd be helpful if you added your "Fix" as an Answer to this question, so that it is clear to others who come across your question as to exactly how they can benefit from using your solution :]

[Nicolas De Irisarri]

I have a very simple app that has multiple components in a single module. I have added it to my module... I still get errors ...

[Caleb]

If you create a plunkr or post some of the code, particularly the components and modules you are having problems into a separate question, I can take a look at it and help you.

[Nicolas De Irisarri]

Thanks Caleb. I was getting the errors when running a simple test. I figured it out though... I was not adding the CUSTOM_ELEMENTS_SCHEMA to my unit test fake module. As soon as I did that, it stopped complaining.

[Jason Goemaat]

Is there a way to define custom elements that are allowed? Using CUSTOM_ELEMENTS_SCHEMA could lead to errors that are hard to find, but I would like to use custom element names for ng-content sections in my controls without those specific element names causing errors and without creating components for them that would just be ng-content...

[Caleb]

@JasonGoemaat, looks like currently CUSTOM_ELEMENTS_SCHEMA is an all or nothing per component schema. The good news is that according to this thread it looks like the angular team are planning a more flexible schema in the near future.

[Danny Bullis]

@Caleb can you please provide a quick code example of what you mean by It looks like the line schemas: [ CUSTOM_ELEMENTS_SCHEMA ] need to be added to each component where you are using HTML tags? It looks like the Component decorator isn't accepting a schemas parameter.

[Caleb]

Hey @DannyBullis, instead of the Component decorator, it's found in the NgModule decorator. You'll need to create a module for that component and then you can specify the schema there. Link to docs and an example.

[user1338062]

@Caleb can you edit your answer to reflect the last comment? Looks misleading at the moment.

[Caleb]

@user1338062 Good call. Updated my answer, hopefully that's more clear on how to use it.

[rlasjunies]

do not forget to declare it ... it's located in @angular/core. Something like that should fit:import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

[E.E.33]

This would affect every component declared in this module.

[E.E.33]

but now your whole app is allowing custom tags.

[user1568220]

idem +1 no more error, but no dom update anymore, this workaround for trying to make work those selectors with '-' is ####!!!&&ù*$

[Amr.Ayoub]

Thanks a lot , after I week , i found out that it can't work with lazy loading in ionic

[Ashwin]

@Arun - your solution is 100% accurate, 1) need to add to the export and 2) no need of custom_elements_schema

[Samantha Adrichem]

Is it possible to name the custom elements? So that you still get the errors if you make typo's

[Carlos E]

This post could help with the procedure to follow: medium.com/google-developer-experts/…

[David]

I had the same error and I set my components in each module where I needed in declarations clausule. I Didn't use CUSTOM_ELEMENTS_SCHEMA and worked.

[Nesquik27]

I cannot path default tests which had been created by the component generating by ng g and got a same error. Nothing from this topic wasn't helpful :( I take off an errors only when I had been commented components spec files :(

[Nesquik27]

I understand right that custom tags were working with angular below v2 only?! I have checked something in youtube and I'm trying to test my code from v2 in v4 environment

[Meryan]

A dash in the name? Why impose such a stupid convention?

[Meryan]

I only run into this when I just started using lazy loading in Ionic3 and only when I try to build for the web. Could please post the link to the docs you mention. Thank you.

[Celso Soares]

Nice! It worked for me. I wanted to add XML elements on my component HTML and i was getting errors. Thanks a lot

[Pedro Ferreira]

adding schemas: [ CUSTOM_ELEMENTS_SCHEMA ] to EVERY component, did the trick! Thanks!

[romeouald]

this was just what I was looking for, thanks for sharing!

[Yogi]

was serving angular elements within angular elements within angular elements (Angular 8) adding CUSTOM_ELEMENTS_SCHEMA did not help but NO_ERRORS_SCHEMA did do the trick and all the nesting of standalone angular elements now works like a charm

[VSO]

This worked for me on TestBed. Element was working fine but test was failing. Added schemas: [NO_ERRORS_SCHEMA], and it's all good.

[eflat]

Thanks! Took me much too #&@% long to find this.

[f.khantsis]

Hey, Ishani. Can you please also add an explanation for why it works?

[Ishani]

If we visit the documentation for CUSTOM_ELEMENTS_SCHEMA, at angular.io/api/core/CUSTOM_ELEMENTS_SCHEMA we will find that CUSTOM_ELEMENTS_SCHEMA allows NgModule to contain non-Angular elements with dash case(-) {similar to this scenario}. Clarity Module when imported includes all the clr-icons, etc by default and we can also use other functionalities of clarity module as well.

[HelloWorld]

This is irrelevant to the problem here. How do you solve it by importing clarity module?? @Ishani

[Ishani]

if you read the problem statement, Angular is not able to identify clr-header.The same error comes for clr-icon and others. As I mentioned in my previous comment, Clarity module contains these by default. I hope it answered your question.

[Renil Babu]

schemas doesn't exist in angular 9

[Ortund]

No; didn't solve my problem... maybe its an Angular 11 thing

[harish kushwaha]

Thanks man... 100% working. My Angular version is 11.

[Philip Developer]

It worked for me, I just made the changes and then restarted the vscode. Thanks !

[tshad]

Not sure where it would go in each component. You would just need to put it in the module, I believe.