title: Failed: Unexpected directive 'NewPracticeQuestionComponent' imported by the module 'DynamicTestModule'. Please add a @NgModule annotation
body: <p>I am unit-testing a commponent which uses two other components. The other components are created when button is clicked</p>
  
  <p><code>.html</code></p>
  
  <pre><code>    &lt;div id="homepage-top-div" class="homepage-component-css-grid-container"&gt;  ...
          &lt;button id="get-question-list-button" [routerLink]="questionListRouterLink" class="btn content-div__button--blue css-grid-item-button-div btn-sm"&gt;See Questions&lt;/button&gt;
        &lt;/div&gt;
        &lt;div id="practice-component-top-div" class="css-grid-container-div common-styles-div--white"&gt; &lt;!-- 4 rows, 1 column--&gt;
  ...
          &lt;button id="new-question-button" [routerLink]="newQuestionRouterLink"  class="btn content-div__button--blue css-grid-item-button-div btn-sm"&gt;Create a Question&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><code>.ts</code></p>
  
  <pre><code>export class HomepageContentComponentComponent implements OnInit {
  
    public questionListRouterLink="/practice-question-list";
    public newQuestionRouterLink="/new-practice-question";
  
  
    constructor() {
  
    }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>I created a <code>spec</code> but I get the following error when I run it - <code>Failed: Unexpected directive 'NewPracticeQuestionComponent' imported by the module 'DynamicTestModule'. Please add a @NgModule annotation.</code></p>
  
  <p>The spec is </p>
  
  <pre><code>import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
  import { HomepageContentComponentComponent } from './homepage-content-component.component';
  import {RouterTestingModule} from "@angular/router/testing";
  import {AppRoutingModule} from "../app-routing.module";
  import {Router} from "@angular/router";
  import {routes} from '../app-routing.module';
  import {NewPracticeQuestionComponent} from "../new-practice-question/new-practice-question.component";
  import {PraticeQuestionListComponent} from "../pratice-question-list/pratice-question-list.component";
  import {NgModule} from "@angular/core";
  import {AppModule} from "../app.module";
  
  fdescribe('HomepageContentComponentComponent', () =&gt; {
    let component: HomepageContentComponentComponent;
    let fixture: ComponentFixture&lt;HomepageContentComponentComponent&gt;;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        imports:[
          AppModule,
          AppRoutingModule,
          RouterTestingModule.withRoutes(routes),
          NewPracticeQuestionComponent,
          PraticeQuestionListComponent
        ],
        declarations: [ HomepageContentComponentComponent,
        ]
      })
      .compileComponents();
    }));
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(HomepageContentComponentComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  
    it('should create', () =&gt; {
      expect(component).toBeTruthy();
    });
  
    it('should navigate to New Questions Component when New Question button is clicked',fakeAsync(()=&gt;{
      let router:Router;
      let location:Location;
      router = TestBed.get(Router);
      location = TestBed.get(Location);
      console.log('initial router is ',router);
      console.log('initial location is ',location);
      router.initialNavigation();
      router.navigate(['new-practice-question']);
      tick();
      console.log('new router is ',router);
      console.log('new location is ',location);
  
      expect(location.pathname).toBe('/new-practice-question');
    }));
  });
  </code></pre>