web-dev-qa-db-fra.com

Pour autoriser tout élément, ajoutez 'NO_ERRORS_SCHEMA' au '@ NgModule.schemas' de ce composant. en angulaire 4

J'ai créé un nouveau projet avec angular-cli (ng new my-project-name)

Quand je lance npm run test, il s’exécute sans aucun échec.

J'ai ajouté le module font-awsome ( https://www.npmjs.com/package/angular-font-awesome ) dans mon projet pour afficher les icônes de police.

Dans mon fichier html ajouté la balise <fa name="bars"></fa> et j'ai obtenu le résultat attendu. Si je lance à nouveau npm run test, il se termine par 3 échecs, tous ciblent la balise fa.

Voici un exemple de rapport d'échec

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

J'ai essayé quelques corrections, comme l'ajout de NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA dans le fichier app.module.ts.

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

Mais rien n'a fonctionné.

angulartypescriptfont-awesome
5
Harsha Vardhan Putrevu

J'ai eu la même erreur en développant l'approche par composant dynamique dans mon projet, qui a été décrit dans cet article . Dans mon cas, l'erreur a été générée en passant les balises svg à travers DynamicComponent. L'ajout de NO_ERRORS_SCHEMA dans @NgModule de dans ce composant a aidé:

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

Dans votre fichier de spécifications de test, il doit être configuré comme suit:

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

Notez la propriété schemas dans la méthode TestBed.configureTestingModule. Après avoir défini la propriété schemas, vos tests doivent s'exécuter sans erreur, comme avant l'ajout du composant Font Awsome.

2
FireDog

J'ai résolu ce problème en créant un composant personnalisé appelé SampleComponent (sample.ts), que je souhaite utiliser dans welcome.html. Il figure dans le fichier de module commun de tous les composants personnalisés d'un projet ionique par nom components.module.ts comme suit:

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

Dans welcome.module.ts où je veux utiliser mon sample.component.ts j'ai importé components.module.ts qui ressemble à ce qui suit

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 où j'ai utilisé mon composant personnalisé (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>
1
Ajay Shankar