To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. in Angular 4
Solution 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.
Solution 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>
Solution 3
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;
}
}
Harsha Vardhan Putrevu
Updated on June 17, 2021Comments
-
Harsha Vardhan Putrevu almost 3 years
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 runnpm run test
again it is ending with 3 failures, all of them are targetingfa
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
inapp.module.ts
file.@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AngularFontAwesomeModule ], providers: [], bootstrap: [AppComponent], schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA ] })`
But nothing worked.
-
Narm about 6 yearsThis 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!
-
artworkjpm over 4 yearsyou have to add it to the import too: import { NO_ERRORS_SCHEMA } from "@angular/core";