在父组件中使用子组件时出错 - Angular 2单元测试（KarmaJasmine）

Question

template parse error when using child component in parent.

I have two components.

  1. CardComponent
  2. InfoComponent

My CardComponent's HTML

     <div class="footer">
       <full-info></full-info>
     </div>

CardComponent's Spec File:

 beforeEach(async(() => {
TestBed.configureTestingModule({
  declarations: [InfoComponent, CardComponent ],
  imports: [
      FormsModule,
      MaterialModule.forRoot()
  ],
  schemas: [ NO_ERRORS_SCHEMA ], //Used CUSTOM_ERRORS_SCHEMA also
})
.compileComponents();
  }));

My InfoComponent ts code:

   import { Component, Input } from '@angular/core';


   @Component({
            selector: 'full-info',
            templateUrl: './full-info.component.html',
            styleUrls: ['./full-info.component.css']
            })

   export class InfoComponent {
     public fullInfo;
    }

InfoComponent spec declaration:

     beforeEach(async(() => {
TestBed.configureTestingModule({
  declarations: [ InfoComponent ],
  imports: [
      FormsModule,
      MaterialModule.forRoot()
  ],
  schemas: [ NO_ERRORS_SCHEMA ]
})
.compileComponents();
   }));

When I run test case for these two components individually then it is working fine.

When I am running these test cases at a time then I am getting error:

    'full-info' is not a known element:
1. If 'full-info' is an Angular component, then verify that it is part of this module.
2. If 'full-info' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
  </div>
  <div class="footer">
    [ERROR ->]<full-info></full-info>
  </div>

I have imported InfoComponent in CardComponent even then I am getting this error. I am not able to find the issue. I any one knows then it would be great for me.

Answer 1

Do both components share the exact same Module? Is the module imported well? Is forRoot() extrictly necessary?

From documentation :

Call forRoot only in the root application module, AppModule. Calling it in any other module, particularly in a lazy-loaded module, is contrary to the intent and can produce a runtime error.

Remember to import the result; don't add it to any other @NgModule list.

Try removing forRoot() and see if the error persists.

Hope I was of help, let me know how it goes!