angular - 要允许任何元素，请将 'NO_ERRORS_SCHEMA' 添加到此组件的 '@NgModule.schemas'。在 Angular 4

Question

我用 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
  ]
})`

但没有任何效果。

Answer 1

在您的测试规范文件中，它需要像这样设置:

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

请注意 TestBed.configureTestingModule 方法中的 schemas 属性。设置 schemas 属性后，您的测试应该像添加 Font Awsome 组件之前一样正常运行。