模板解析错误角度

Question

我创建了新的角度项目并生成了组件。

ng new hello
ng g c sample

在应用程序中包含示例组件

app.compoment.ts

<app-sample></app-sample>

何时

ng test

已运行，发生以下错误

AppComponent should create the app FAILED
        'app-sample' is not a known element:
        1. If 'app-sample' is an Angular component, then verify that it is part of this module.
        2. If 'app-sample' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<app-sample></app-sample>"): ng:///DynamicTestModule/AppComponent.html@0:0
        Error: Template parse errors:
            at syntaxError (node_modules/@angular/compiler/fesm5/compiler.js:2430:1)
            at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (node_modules/@angular/compiler/fesm5/compiler.js:20605:1)
            at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (node_modules/@angular/compiler/fesm5/compiler.js:26171:1)
            at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (node_modules/@angular/compiler/fesm5/compiler.js:26158:1)
            at node_modules/@angular/compiler/fesm5/compiler.js:26101:48
            at Set.forEach (<anonymous>)
            at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (node_modules/@angular/compiler/fesm5/compiler.js:26101:1)
            at node_modules/@angular/compiler/fesm5/compiler.js:26019:1
            at Object.then (node_modules/@angular/compiler/fesm5/compiler.js:2421:33)
            at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndAllComponents (node_modules/@angular/compiler/fesm5/compiler.js:26017:1)
        Error: Template parse errors:
        'app-sample' is not a known element:
        1. If 'app-sample' is an Angular component, then verify that it is part of this module.
        2. If 'app-sample' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<app-sample></app-sample>"): ng:///DynamicTestModule/AppComponent.html@0:0
            at syntaxError (node_modules/@angular/compiler/fesm5/compiler.js:2430:1)
            at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (node_modules/@angular/compiler/fesm5/compiler.js:20605:1)
            at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (node_modules/@angular/compiler/fesm5/compiler.js:26171:1)
            at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (node_modules/@angular/compiler/fesm5/compiler.js:26158:1)
            at node_modules/@angular/compiler/fesm5/compiler.js:26101:48
            at Set.forEach (<anonymous>)
            at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (node_modules/@angular/compiler/fesm5/compiler.js:26101:1)
            at node_modules/@angular/compiler/fesm5/compiler.js:26019:1
            at Object.then (node_modules/@angular/compiler/fesm5/compiler.js:2421:33)
            at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndAllComponents (node_modules/@angular/compiler/fesm5/compiler.js:26017:1)

我尝试了很少提到here

的解决方案

第一次尝试

创建的示例模块

sample.module.ts

@NgModule({
  declarations: [ SampleComponent],
  exports: [ SampleComponent],
  imports: [ CommonModule ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class SampleModule {}

第二次尝试

将CUSTOM_ELEMENTS_SCHEMA添加到应用模块本身

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    SampleComponent
  ],
  imports: [
    BrowserModule,,
    SampleModule
  ],
  exports: [SampleModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]

})
export class AppModule { }

第三次尝试

添加CUSTOM_ELEMENTS_SCHEMA来测试床配置

sample.component.spec.ts

describe('SampleComponent', () => {
  let component: SampleComponent;
  let fixture: ComponentFixture<SampleComponent>;

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

  beforeEach(() => {
    fixture = TestBed.createComponent(SampleComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

但其中没有一个解决了我得到的错误

Answer 1

测试投注配置成功后，正如JB Nizet的评论所述。由于当应用尝试包含示例组件时发生错误，因此app.component.spec.ts应该在模式中包含CUSTOM_ELEMENTS_SCHEMA。

app.component.spec.ts

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
        ],
        schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });
});