title: Angular Testing Errors with Karma
body: <p>I'am having an issue starting my angular project testing.</p>
  
  <p>Context:</p>
  
  <p>I have one main component that nest other component to show a spinner just like this: </p>
  
  <pre><code>&lt;div class='showSpinner' *ngIf="showSpinnerCustomer"&gt;
      &lt;div class="spinner"&gt;
        &lt;app-spinnerCustomers&gt;&lt;/app-spinnerCustomers&gt;
        &lt;h2&gt;Loading...&lt;/h2&gt;
      &lt;/div&gt;
    &lt;/div&gt;`
  </code></pre>
  
  <p>The problem comes when I start the command ng test and appear this type of error:</p>
  
  <pre><code>Failed: Template parse errors:
  'app-spinnerCustomers' is not a known element:
  1. If 'app-spinnerCustomers' is an Angular component, then verify that it is part of this module.
  2. If 'app-spinnerCustomers' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
    &lt;div class='showSpinner' *ngIf="showSpinnerCustomer"&gt;
      &lt;div class="spinner"&gt;
        [ERROR -&gt;]&lt;app-spinnerCustomers&gt;&lt;/app-spinnerCustomers&gt;
        &lt;h2&gt;Loading...&lt;/h2&gt;
      &lt;/div&gt;
  "): ng:///DynamicTestModule/ListCustomersComponent.html@12:6
  </code></pre>
  
  <p>I have this modularized in 2 modules: </p>
  
  <p><strong>app.modules.ts</strong></p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { NgModule } from '@angular/core';
  import { AppComponent } from './app.component';
  import { APP_ROUTES } from './app.routes';
  import { ListCustomersComponent } from './components/list-customers/list-customers.component';
  import { HttpClientModule } from '@angular/common/http';
  import { CustomerService } from './services/customer/customer.service';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { SpinnersModule } from './components/spinners/spinners.module';
  
  @NgModule({
    declarations: [
      AppComponent,
      ListCustomersComponent
    ],
    imports: [
      BrowserModule,
      BrowserAnimationsModule,
      HttpClientModule,
      FormsModule,
      ReactiveFormsModule,
      APP_ROUTES,
      SpinnersModule
    ],
    providers: [
      CustomerService
    ],
    bootstrap: [
      AppComponent
    ]
  })
  export class AppModule { }
  </code></pre>
  
  <p>And in the spinner module:</p>
  
  <p><strong>spinners.module.ts</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { SpinnerCustomersComponent } from './spinnerCustomers/spinnerCustomers.component';
  
  @NgModule({
      declarations: [
          SpinnerCustomersComponent
      ],
      imports: [
        CommonModule
      ],
      exports: [
          SpinnerCustomersComponent
      ]
    })
  export class SpinnersModule { }
  </code></pre>
  
  <p>Any clue what is going on here and what could I do to fix it? 
  I have run out of ideas.</p>
  
  <p>Thank you.</p>
  
  <blockquote>
    <p>EDIT:
    app.component.spec.ts</p>
  </blockquote>
  
  <pre><code>import { TestBed, async } from '@angular/core/testing';
  import { RouterTestingModule } from '@angular/router/testing';
  import { AppComponent } from './app.component';
  describe('AppComponent', () =&gt; {
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        imports: [
          RouterTestingModule
        ],
        declarations: [
          AppComponent
        ],
      }).compileComponents();
    }));
    it('should create the app', async(() =&gt; {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app).toBeTruthy();
    }));
    it(`should have as title 'app'`, async(() =&gt; {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app.title).toEqual('app');
    }));
  });
  </code></pre>
  
  <blockquote>
    <p>spinnerCustonmers.component.spec.ts</p>
  </blockquote>
  
  <pre><code>import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  
  import { SpinnerCustomersComponent } from './spinnerCustomers.component';
  
  describe('SpinnerCustomersComponent', () =&gt; {
    let component: SpinnerCustomersComponent;
    let fixture: ComponentFixture&lt;SpinnerCustomersComponent&gt;;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [ SpinnerCustomersComponent ]
      })
      .compileComponents();
    }));
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(SpinnerCustomersComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  
    it('should create', () =&gt; {
      expect(component).toBeTruthy();
    });
  });
  </code></pre>