To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. in Angular 4

Question

I created a new project with angular-cli (ng new my-project-name)

When I run npm run test it run without any failures.

I added font-awsome module(https://www.npmjs.com/package/angular-font-awesome) in my project to display font icons.

In my html file added <fa name="bars"></fa> tag and got output as expected. If I run npm run test again it is ending with 3 failures, all of them are targeting fa tag.

Here is sample failure report

'fa' is not a known element:
        1. If 'fa' is an Angular component, then verify that it is part of this module.
        2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("--The content below is only a placeholder and can be replaced.-->
        <div style="text-align:center">          [ERROR ->]<fa name="bars"></fa>
          <h1>            Welcome to {{title}}!
        "): ng:///DynamicTestModule/AppComponent.html@2:2        Error: Template parse errors:
            at syntaxError home/harsha/Documents/Projects/testProject/node_modules/@angular/compiler/esm5/compiler.js:466:22)

I tried some fixes like adding NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA in app.module.ts file.

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

But nothing worked.

Have you imported module in NgModule? import { AngularFontAwesomeModule } from 'angular-font-awesome'; imports: [ //... AngularFontAwesomeModule ] — Ankit Kapoor, Nov 30 '17 at 05:59
yeah I imported it, followed 'angular-font-awesome' documentation and I dont have any issues in displaying icons, it is failing in test cases only — Harsha Vardhan Putrevu, Nov 30 '17 at 06:07

score 27 · Answer 1 · answered Jan 10 '19 at 17:11

27

In your test spec file it needs to be set up like this:

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ yourcomponent ],
      schemas: [NO_ERRORS_SCHEMA]
    })
    .compileComponents();
  }));

Notice the schemas property in the TestBed.configureTestingModule method. After setting the schemas property your tests should run without error as before you added Font Awsome component.

answered Jan 10 '19 at 17:11

FireDog

291
3
3

2

you have to add it to the import too: import { NO_ERRORS_SCHEMA } from "@angular/core"; – artworkjpm Jan 22 '20 at 11:29

score 24 · Answer 2 · edited Dec 13 '18 at 15:44

I resolved this issue creating a custom component called SampleComponent(sample.ts), which I want to use in welcome.html comes under common module file for all custom component in ionic project by name components.module.ts which looks as follows:

import { NgModule,NO_ERRORS_SCHEMA,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { SampleComponent } from './sample/sample';

@NgModule({
    declarations: [SampleComponent],
    imports: [],
    exports: [SampleComponent],
    schemas: [
        CUSTOM_ELEMENTS_SCHEMA,
        NO_ERRORS_SCHEMA
      ]
})
export class ComponentsModule {}

In welcome.module.ts where I want to use my sample.component.ts I imported components.module.ts which look like following

import { NgModule } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { IonicPageModule } from 'ionic-angular';

import { WelcomePage } from './welcome';
import { ComponentsModule } from "../../components/components.module";
@NgModule({
  declarations: [
    WelcomePage,
  ],
  imports: [
    IonicPageModule.forChild(WelcomePage),
    TranslateModule.forChild(),
    ComponentsModule
  ],
  exports: [
    WelcomePage
  ]
})
export class WelcomePageModule { }

welcome.html where I used my custom component (SampleComponent)

<ion-content scroll="false">
  <div class="splash-bg"></div>
  <div class="splash-info">
    <div class="splash-logo"></div>
    <div class="splash-intro">
      {{ 'WELCOME_INTRO' | translate }}
    </div>
  </div>
  <div padding>
    <p>`enter code here`
      <sample>loading...</sample>
    </p>
    <button ion-button block (click)="signup()">{{ 'SIGNUP' | translate }}</button>
    <button ion-button block (click)="login()" class="login">{{ 'LOGIN' | translate }}</button>
  </div>
</ion-content>

score 9 · Answer 3 · answered Feb 14 '18 at 10:08

I had the same error while developing dynamic component approach into my project, which was described in this post. In my case the error was generated by passing svg tags through DynamicComponent. Adding NO_ERRORS_SCHEMA into @NgModule of in this component helped:

import { Component, OnChanges, OnInit, Input, NgModule, NgModuleFactory, Compiler, SimpleChanges, NO_ERRORS_SCHEMA } from '@angular/core';
import { SharedModule } from '../../../../../../../../shared.module';

@Component({
    selector: 'dynamic',
    template: `<ng-container *ngComponentOutlet="dynamicComponent; ngModuleFactory: dynamicModule;"></ng-container>`
})

export class DynamicComponent {
    dynamicComponent: any;
    dynamicModule: NgModuleFactory<any>;

    @Input('html') html: string;

    constructor(private compiler: Compiler) {}

    ngOnChanges(changes: SimpleChanges) {
        if (changes['html'] && !changes['html'].isFirstChange()) {
            this.dynamicComponent = this.createNewComponent(this.html);
            this.dynamicModule = this.compiler.compileModuleSync(this.createComponentModule(this.dynamicComponent));
        }
    }

    ngOnInit() {
        this.dynamicComponent = this.createNewComponent(this.html);
        this.dynamicModule = this.compiler.compileModuleSync(this.createComponentModule(this.dynamicComponent));
    }

    protected createComponentModule(componentType: any) {
        @NgModule({
            imports: [SharedModule],
            declarations: [componentType],
            entryComponents: [componentType],
            schemas: [NO_ERRORS_SCHEMA]
        })
        class RuntimeComponentModule {}
        // a module for just this Type
        return RuntimeComponentModule;
    }

    protected createNewComponent(template: string) {

        @Component({
            selector: 'dynamic-component',
            template: template ? template : '<div></div>'
        })
        class MyDynamicComponent {
            //metods passed via dynamic component to svg
            testMe() {
                alert('test passed!');
            }
        }

        return MyDynamicComponent;
    }
}

This worked perfect. I ran into this same problem with dynamic components and having to support old html elements that have since been deprecated in HTML5. Thanks mpro! — Narm, Mar 07 '18 at 17:48

score 2 · Answer 4 · answered Jun 16 '21 at 15:55

2

Please don't use NO_ERRORS_SCHEMA for such simple scenario, if the component works fine and the tests just miss the fa component, then you need to add AngularFontAwesomeModule also to your TestBed imports.

answered Jun 16 '21 at 15:55

Vizor

396
3
14

score 0 · Answer 5 · answered Aug 02 '19 at 13:51

0

FYI, if you are adding this NgModule property to a feature module, you also have to add it to your root NgModule. Or at least I had to.

answered Aug 02 '19 at 13:51

Post Impatica

14,999
9
67
78

To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. in Angular 4

5 Answers5