For Angular 4, simply add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of the component in order to permit any element

Question

For Angular 4, simply add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of the component in order to permit any element

After using angular-cli to create a new project (ng new my-project-name), I ran npm run test successfully without any issues.

To display font icons in my project, I added the Font Awesome module from https://www.npmjs.com/package/angular-font-awesome.

In my HTML file, I included the

<fa name="bars"></fa>

tag and received the expected output. However, upon running npm run test again, I encountered 3 failures related to the fa tag.

One of the failure reports looked like this:

'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 attempted solutions like adding NO_ERRORS_SCHEMA and CUSTOM_ELEMENTS_SCHEMA in the app.module.ts file, but none of them resolved the issue.

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

Unfortunately, these fixes did not work as expected.

angular typescript font-awesome

Answer 1

Answer №1

To properly set up your test spec file, follow this format:

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

Take note of the schemas property within the TestBed.configureTestingModule method. Once you have added the schemas property, your tests should execute smoothly without any errors that might have occurred prior to integrating the Font Awesome component.

Answer 2

To properly set up your test spec file, follow this format:

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

Take note of the schemas property within the TestBed.configureTestingModule method. Once you have added the schemas property, your tests should execute smoothly without any errors that might have occurred prior to integrating the Font Awesome component.

Answer 3

Answer №2

To overcome this issue, I implemented a custom component named SampleComponent(sample.ts) in my Ionic project. This component is intended to be used in welcome.html and is part of a common module file called components.module.ts. The structure of the components module is 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 plan to utilize my sample.component.ts, I included components.module.ts like so:

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 { }

The content of welcome.html where I have integrated 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>

Answer 4

To overcome this issue, I implemented a custom component named SampleComponent(sample.ts) in my Ionic project. This component is intended to be used in welcome.html and is part of a common module file called components.module.ts. The structure of the components module is 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 plan to utilize my sample.component.ts, I included components.module.ts like so:

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 { }

The content of welcome.html where I have integrated 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>

Answer 5

Answer №3

During the development of my project, I encountered a similar error while implementing a dynamic component approach. The issue was discussed in this thread. In my situation, the error occurred when passing svg tags through the DynamicComponent. To resolve this, I included NO_ERRORS_SCHEMA in the @NgModule of this component:

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;
    }
}

Answer 6

During the development of my project, I encountered a similar error while implementing a dynamic component approach. The issue was discussed in this thread. In my situation, the error occurred when passing svg tags through the DynamicComponent. To resolve this, I included NO_ERRORS_SCHEMA in the @NgModule of this component:

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;
    }
}

Answer 7

Answer №4

When dealing with a straightforward scenario where the component is functioning properly but the tests are missing the 'fa' component, it is advisable to refrain from utilizing 'NO_ERRORS_SCHEMA'. Instead, consider incorporating 'AngularFontAwesomeModule' into your TestBed imports.

Answer 8

When dealing with a straightforward scenario where the component is functioning properly but the tests are missing the 'fa' component, it is advisable to refrain from utilizing 'NO_ERRORS_SCHEMA'. Instead, consider incorporating 'AngularFontAwesomeModule' into your TestBed imports.

Answer 9

Answer №5

Just a heads up, when incorporating this NgModule attribute into a feature module, don't forget to include it in your root NgModule as well. At least, that was my experience.

Answer 10

Just a heads up, when incorporating this NgModule attribute into a feature module, don't forget to include it in your root NgModule as well. At least, that was my experience.

For Angular 4, simply add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of the component in order to permit any element

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Expose the app's homepage through the nginx server configuration

Using RxJS with Angular to intercept the valueChanges of a FormControl prior to subscribing

Angular6 : PrimeNg datatable: the nova-light theme failing to activate

Prevent loading data in Angular 5 by handling errors from undefined objects

Creating a custom type for accepted arguments in a Typescript method

Tips for efficiently handling state across various forms in separate components using only one save button within a React-Redux application

Typeahead functionality in Angular UI Bootstrap that uses object properties to search and display

Wrapper functions that are nested are returning a Promise that resolves to another Promise of type T

Using Typescript to define Vuex store types

How can RootStateOrAny be turned off in React with typescript?

How to retrieve data from the resolve function in an Angular 2 component

Resolve the error message "Class is not a constructor" which arises while utilizing namespaces in TypeScript with WebPack

Passing RxJs pipes as a parameter

What are the steps to create an object from an array?

Assessing functionality in Angular8 by testing a function that accesses an array from a service

The header remains unchanged even after verifying the user's login status

Matching the types of method parameters to the types of callback function parameters in Typescript generics

After updating to Angular 9, the ViewChild functionality seems to be malfunctioning

Issues with Angular Material Form Fields Functioning Incorrectly

Methods for transforming a TypeScript class instance containing getter/setter properties into a JSON format for storage within a MySQL database