Ошибка разбора шаблона

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)

Я пробовал несколько упомянутых решений здесь

Первая попытка

Создан образец модуля

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();
  });
});