web-dev-qa-db-ja.com

任意の要素を許可するには、このコンポーネントの「@ NgModule.schemas」に「NO_ERRORS_SCHEMA」を追加します。 Angular 4

Angular-cli（ng new my-project-name）を使用して新しいプロジェクトを作成しました

npm run testを実行すると、エラーなく実行されます。

フォントアイコンを表示するために、プロジェクトにfont-awsomeモジュール（ https://www.npmjs.com/package/angular-font-awesome ）を追加しました。

Htmlファイルに<fa name="bars"></fa>タグを追加し、期待どおりに出力しました。 npm run testを再度実行すると、3つの失敗で終了し、それらはすべてfaタグを対象としています。

失敗レポートのサンプルはこちら

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

NO_ERRORS_SCHEMAファイルにCUSTOM_ELEMENTS_SCHEMA、app.module.tsを追加するなど、いくつかの修正を試みました。

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

しかし、何もうまくいきませんでした。

angulartypescriptfont-awesome
14
Harsha Vardhan Putrevu

テスト仕様ファイルでは、次のように設定する必要があります。

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

TestBed.configureTestingModuleメソッドのschemasプロパティに注目してください。スキーマプロパティを設定した後、Font Awsomeコンポーネントを追加する前と同様に、テストをエラーなしで実行する必要があります。

8
FireDog

this post で説明されているプロジェクトに動的コンポーネントアプローチを開発しているときに同じエラーが発生しました。私の場合、DynamicComponentを介してsvgタグを渡すことでエラーが生成されました。このコンポーネントのNO_ERRORS_SCHEMAに@NgModuleを追加すると役に立ちました。

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

この問題を解決して、SampleComponent（sample.ts）というカスタムコンポーネントを作成しました。これは、welcome.htmlで使用し、ionicプロジェクトのすべてのカスタムコンポーネントの共通モジュールファイルの下にありますcomponents .module.tsこれは次のようになります。

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

welcome.module.ts使用したい場所sample.component.tsインポートしたcomponents.module.ts次のようになります

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カスタムコンポーネント（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>
3
Ajay Shankar

参考までに、このNgModuleプロパティを機能モジュールに追加する場合は、ルートNgModuleにも追加する必要があります。または少なくとも私はしなければなりませんでした。

0
Helzgate