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

Tips for adjusting the zIndex of the temporary drawer component in TypeScript

What is the most effective way to use a withLatestFrom within an effect when integrating a selector with props (MemoizedSelectorWithProps) sourced from the action?

Containerizing Next.js with TypeScript

Encountering the "UnauthorizedError: jwt malformed" issue when using Auth0Lock for authentication in an express and angular2 application

Refresh the information being received without initiating a new process

I find myself hindered by TypeScript when trying to specify the accurate constraints for getUserMedia

Exploring Angular 4: Iterating Over Observables to Fetch Data into a Fresh Array

Can a single shield protect every part of an Angular application?

Combine an array of objects that are dynamically created into a single object

What is the best way to ensure that Interface (or type) Properties always begin with a particular character?

What is the reason for the continual appearance of the *ngIf validation message?

Struggling to make Typescript recognize the css prop (emotion) when styling Material-UI components

Modify the innerHTML to adjust font size when a button is clicked in Ionic 5, or eliminate any unnecessary spaces

Conceal multiple parameters within routing for added security

"Every time you run mat sort, it works flawlessly once before encountering an

What is the best way to prevent updating the state before the selection of the end date in a date range using react-datepicker?

Generate a TemplateRef and place it into the template of the component

Why aren't my arrays' characteristics being recognized when I create an instance of this class?

Displaying exclusively the country code in an Angular material-select component

Error in TypeScript while running the command "tsd install jquery" - the identifier "document" could not be found