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.

Answer 1

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.

Answer 2

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>