title: Template parse error in Jasmine test but not actual app
body: <p>I've developed a Jasmine spec to test an angular 2 component <code>MiddleRowComponent</code>. When I run the jasmine test, it gives this error:</p>
  
  <pre><code>zone.js:388 Unhandled Promise rejection: Template parse errors:
  'circles' is not a known element:
  1. If 'circles' is an Angular component, then verify that it is part of this module.
  2. If 'circles' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("&lt;/div&gt;
        &lt;div class="col-md-10 col-sm-12 offset-md-1 flex-xs-middle" id="circles-div"&gt;
           [ERROR -&gt;]&lt;circles (onWordChanged)="onWordChanged($event)"&gt;&lt;/circles&gt;
        &lt;/div&gt;
        &lt;div class="col-md-10 "): MiddleRowComponent@9:9
  'custom-button' is not a known element:
  </code></pre>
  
  <p>However if i just run my web app in the browser like normal, the error does not occur. <code>circles</code> is indeed a part of the module. And <code>custom-button</code> is part of a shared module that is imported. Here is the module.ts:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { SharedModule } from '../shared/shared.module';
  import * as LandingPage from './index';
  
  @NgModule({
     imports: [ CommonModule, SharedModule ],
     declarations: [
        LandingPage.MiddleRowComponent,
        LandingPage.LandingPageComponent,
        LandingPage.CirclesComponent
     ],
     exports: [ LandingPage.LandingPageComponent ],
  })
  export class LandingPageModule { }
  </code></pre>
  
  <p>Everything is imported and declared as it should be and works when running the app without testing it. I use a <code>done</code> to make the beforeEach work given its async nature of getting the component template from a separate template file. I run the test with a jasmine spec runner HTML file. How come my components that <code>MiddleRowComponent</code> uses are not known elements in the jasmine test but are when running the app normally?</p>
  
  <p>Here is the jasmine spec:</p>
  
  <pre class="lang-js prettyprint-override"><code>import 'zone.js/dist/long-stack-trace-zone.js';
  import 'zone.js/dist/async-test.js';
  import 'zone.js/dist/fake-async-test.js';
  import 'zone.js/dist/sync-test.js';
  import 'zone.js/dist/proxy.js';
  import 'zone.js/dist/jasmine-patch.js';
  
  import { ComponentFixture, TestBed } from '@angular/core/testing';
  import {
      BrowserDynamicTestingModule,
      platformBrowserDynamicTesting
  } from '@angular/platform-browser-dynamic/testing';
  import { By } from '@angular/platform-browser';
  import { DebugElement } from '@angular/core';
  
  import { MiddleRowComponent } from './middle-row.component';
  
  let comp: MiddleRowComponent;
  let fixture: ComponentFixture&lt;MiddleRowComponent&gt;;
  let de: DebugElement;
  let el: HTMLElement;
  
  describe('MiddleRowComponent', () =&gt; {
     var fixture: any;
     var comp: any;
      beforeAll(() =&gt; {
          TestBed.resetTestEnvironment();
          TestBed.initTestEnvironment(BrowserDynamicTestingModule,
              platformBrowserDynamicTesting());
      });
  
      beforeEach((done) =&gt; {
          TestBed.configureTestingModule({
              declarations: [MiddleRowComponent], // declare the test component
          }).compileComponents().then(() =&gt; {
              fixture = TestBed.createComponent(MiddleRowComponent);
              comp = fixture.componentInstance; // MiddleRowComponent test instance
              // query for the title &lt;h1&gt; by CSS element selector
              de = fixture.debugElement.query(By.css('h1'));
              el = de.nativeElement;
              done();
          });
      });
  
      it('should display original title', () =&gt; {
          fixture.detectChanges();
          expect(el.textContent).toContain(comp.word);
      });
  
      it('should display a different test title', () =&gt; {
          comp.word = 'Test Title';
          fixture.detectChanges();
          expect(el.textContent).toContain('Test Title');
      });
  });
  </code></pre>
  
  <p>full error:</p>
  
  <pre><code>zone.js:388 Unhandled Promise rejection: Template parse errors:
  'circles' is not a known element:
  1. If 'circles' is an Angular component, then verify that it is part of this module.
  2. If 'circles' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("&lt;/div&gt;
        &lt;div class="col-md-10 col-sm-12 offset-md-1 flex-xs-middle" id="circles-div"&gt;
           [ERROR -&gt;]&lt;circles (onWordChanged)="onWordChanged($event)"&gt;&lt;/circles&gt;
        &lt;/div&gt;
        &lt;div class="col-md-10 "): MiddleRowComponent@9:9
  'custom-button' is not a known element:
  1. If 'custom-button' is an Angular component, then verify that it is part of this module.
  2. If 'custom-button' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
        &lt;/div&gt;
        &lt;div class="col-md-10 offset-md-1 flex-xs-middle" id="try-now-div"&gt;
           [ERROR -&gt;]&lt;custom-button buttonName="try now" (click)="tryNowClick()"&gt;&lt;/custom-button&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  "): MiddleRowComponent@12:9 ; Zone: ProxyZone ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
  'circles' is not a known element:
  1. If 'circles' is an Angular component, then verify that it is part of this module.
  2. If 'circles' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("&lt;/div&gt;
        &lt;div class="col-md-10 col-sm-12 offset-md-1 flex-xs-middle" id="circles-div"&gt;
           [ERROR -&gt;]&lt;circles (onWordChanged)="onWordChanged($event)"&gt;&lt;/circles&gt;
        &lt;/div&gt;
        &lt;div class="col-md-10 "): MiddleRowComponent@9:9
  'custom-button' is not a known element:
  1. If 'custom-button' is an Angular component, then verify that it is part of this module.
  2. If 'custom-button' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
        &lt;/div&gt;
        &lt;div class="col-md-10 offset-md-1 flex-xs-middle" id="try-now-div"&gt;
           [ERROR -&gt;]&lt;custom-button buttonName="try now" (click)="tryNowClick()"&gt;&lt;/custom-button&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  "): MiddleRowComponent@12:9
      at TemplateParser.parse (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:7730:21)
      at RuntimeCompiler._compileTemplate (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:17573:53)
      at eval (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:17493:64)
      at Set.forEach (native)
      at RuntimeCompiler._compileComponents (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:17493:21)
      at createResult (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:17404:21)
      at ZoneDelegate.invoke (http://localhost:3002/node_modules/zone.js/dist/zone.js:232:26)
      at ProxyZoneSpec.onInvoke (http://localhost:3002/node_modules/zone.js/dist/proxy.js:79:39)
      at ZoneDelegate.invoke (http://localhost:3002/node_modules/zone.js/dist/zone.js:231:32)
      at Zone.run (http://localhost:3002/node_modules/zone.js/dist/zone.js:114:43)consoleError @ zone.js:388_loop_1 @ zone.js:417drainMicroTaskQueue @ zone.js:421ZoneTask.invoke @ zone.js:339
  zone.js:390 Error: Uncaught (in promise): Error: Template parse errors:(…)
  </code></pre>