typescript - För att tillåta vilket element som helst, lägg till 'NO_ERRORS_SCHEMA' i '@NgModule.schemas' för denna komponent. i Angular 4

Jag skapade ett nytt projekt med angular-cli (ng new my-project-name)

När jag kör npm run test körs det utan några fel.

Jag lade till font-awesome-modulen (https://www.npmjs.com/package/angular-font-awesome) i mitt projekt för att visa fontikoner.

I min HTML-fil lade jag till <fa name="bars"></fa>-taggen och fick resultatet som förväntat. Om jag kör npm run test igen slutar det med 3 fel, alla riktade mot fa-taggen.

Här är ett exempel på felrapport

'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)

Jag försökte några lösningar som att lägga till NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA i app.module.ts-filen.

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

Men inget fungerade.

Svar #1

I din testspecifikationsfil måste det ställas in så här:

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

Observera egenskapen schemas i metoden TestBed.configureTestingModule. Efter att ha ställt in egenskapen schemas bör dina tester köras utan fel precis som innan du lade till Font Awesome-komponenten.

Svar #2

Jag löste detta problem genom att skapa en egen komponent kallad SampleComponent (sample.ts), som jag vill använda i welcome.html och som ingår i common-modulfilerna för alla egna komponenter i ett Ionic-projekt med namnet components.module.ts, som ser ut som följer:

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

I welcome.module.ts där jag vill använda min sample.component.ts importerade jag components.module.ts som ser ut som följande

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 där jag använde min anpassade komponent (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>

Relaterade artiklar