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.
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.