요소를 허용하려면 이 구성 요소의 '@NgModule.Schemas'에 'NO_ERRESS_SCHEMA'를 추가하십시오.

요소를 허용하려면 이 구성 요소의 '@NgModule.Schemas'에 'NO_ERRESS_SCHEMA'를 추가하십시오.앵글4로

앵글-cli로 새 프로젝트를 만들었다.ng new my-project-name)

내가 달릴 때npm run test그것은 실패 없이 작동한다.

나는 폰트 아이콘을 표시하기 위해 내 프로젝트에 폰트-어웨이 모듈(https://www.npmjs.com/package/angular-font-awesome)을 추가했다.

추가된 내 html 파일<fa name="bars"></fa>태그하고 예상대로 출력되었다.만약 내가 달리면npm run test다시 세 번의 실패로 끝나는데, 그들 모두가 목표로 하고 있다.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
  ]
})`

그러나 아무 소용이 없었다.

테스트 사양 파일에서는 다음과 같이 설정해야 한다.

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

TestBed.configureTestingModule 메서드의 스키마 속성에 주목하십시오.스키마 속성을 설정한 후 Font Awsome 구성 요소를 추가하기 전과 같이 오류 없이 테스트를 실행하십시오.

SampleComponent(sample.ts)라는 사용자 정의 구성 요소를 생성하는 문제를 해결했는데, 이 구성 요소는 welcome.html로 명명된 ionic 프로젝트의 모든 사용자 지정 구성 요소에 대해 다음과 같이 표시되는 공통 모듈 파일 아래에 표시된다.

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

sample.component.ts를 사용하고 싶은 welcome.module.ts는 다음과 같이 보이는 구성 요소.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>

내 프로젝트에 동적 구성요소 접근법을 개발하는 동안에도 같은 오류가 있었는데, 이 게시물에 설명되어 있었다.내 경우 svg 태그를 전달하여 오류가 발생함DynamicComponent. 추가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;
    }
}

FYI, 이 NgModule 속성을 형상 모듈에 추가하는 경우 루트 NgModule에도 추가해야 한다.아니면 적어도 나는 해야만 했다.

사용하지 마십시오.NO_ERRORS_SCHEMA그런 간단한 시나리오에서, 구성 요소가 잘 작동하고 테스트가 단지fa구성 요소, 그런 다음 추가해야 함AngularFontAwesomeModule또한 TestBed 가져오기도 한다.

참조URL: https://stackoverflow.com/questions/47566743/to-allow-any-element-add-no-errors-schema-to-the-ngmodule-schemas-of-this-c