47

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.

2
  • Have you imported module in NgModule? import { AngularFontAwesomeModule } from 'angular-font-awesome'; imports: [ //... AngularFontAwesomeModule ] Commented Nov 30, 2017 at 5: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 Commented Nov 30, 2017 at 6:07

5 Answers 5

30

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.

1
  • 2
    you have to add it to the import too: import { NO_ERRORS_SCHEMA } from "@angular/core";
    – artworkjpm
    Commented Jan 22, 2020 at 11:29
25

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

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;
    }
}
1
  • 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
    Commented Mar 7, 2018 at 17:48
3

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.

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.