Template parse errors Angular

Question

I have created new angular project and generated component.

ng new hello
ng g c sample

Include the sample component in the app

app.compoment.ts

<app-sample></app-sample>

When

ng test

is ran, following error occurred

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)

I have tried few solutions mentioned here

First try

Created sample module

sample.module.ts

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

Second try

Add CUSTOM_ELEMENTS_SCHEMA to app module itself

app.module.ts

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

})
export class AppModule { }

Third try

Add CUSTOM_ELEMENTS_SCHEMA to test bed configuration

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

But non of those fixed the error i'm getting

The error is in the app.component.spec.ts file: the testing module (passed to `configureTestingModule()`) used in that test needs to have the sample component in its declarations, since the template of the app component uses the sample component. If you modify a component, you generally can't expect its test to keep passing without modifying it, too. Note the error message: it starts with `AppComponent should create the app`. So the problem is in the test of the app component. — JB Nizet, Mar 16 '19 at 23:16

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

As in JB Nizet's comment following test bet configuration worked. Since the error occur when app trying to include the sample component, app.component.spec.ts should include CUSTOM_ELEMENTS_SCHEMA in the 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();
  });
});