title: Angular2 Testing "Cannot find name 'HTMLElement'"
body: <p>I'm trying to introduce testing into my existing project, but I keep running into the same error, which I think is prohibiting me from running the tests. The error I get is</p>
  <blockquote>
  <p>ERROR in .../src/app/dashboard.component.spec.ts (15,13): Cannot find name 'HTMLElement'.)</p>
  <p>Chrome 57.0.2987 (Mac OS X 10.12.3): Executed 4 of 4 SUCCESS (7.24 secs / 6.55 secs)</p>
  </blockquote>
  <p>My dashboard.component.spec.ts looks like this:</p>
  <pre><code>import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  import { By } from '@angular/platform-browser';
  import { DebugElement } from '@angular/core';
  
  import { DashboardComponent } from './dashboard.component';
  import { ExchangeService } from './exchange.service';
  
  describe('DashboardComponent (templateUrl)', () =&gt; {
  
      let comp: DashboardComponent;
      let fixture: ComponentFixture&lt;DashboardComponent&gt;;
  
      let spy: jasmine.Spy;
      let de: DebugElement;
      let el: HTMLElement; // how does this work...?
      let exchangeService: ExchangeService; // the actual injected service
  
      const testExchange = 'New York Stock Exchange';
  
      beforeEach(async(() =&gt; {
          TestBed.configureTestingModule({
              declarations: [ DashboardComponent ],
              providers: [ ExchangeService ],
          })
          .compileComponents();
      }))
  
  
      beforeEach(() =&gt; {
  
          fixture = TestBed.createComponent(DashboardComponent);
          comp = fixture.componentInstance; // DashboardComponent test componentInstance
  
          // ClockService actually injected into the component
          exchangeService = fixture.debugElement.injector.get(ExchangeService);
  
          // Setup spy on the `getExchanges` method
          spy = spyOn(exchangeService, 'getExchanges')
              .and.returnValue(Promise.resolve(testExchange));
          // query for the title &lt;h1&gt; by CSS element selector
          
          de = fixture.debugElement.query(By.css('.exchange'));
          el = de.nativeElement;
      });
  
      it('should not show exchange before OnInit', () =&gt; {
          expect(el.textContent).toBe('', 'nothing displayed');
          expect(spy.calls.any()).toBe(false, 'getExchanges not yet called');
      });
  
      it('true is true', () =&gt; expect(false).toBe(true));
  });
  </code></pre>
  <p>I have searched all around for that error message, but I can't seem to find it anywhere. Also, the last test should fail, but I don't think it even compiles due to this error. Any clues as to what is wrong? I initially thought it would be an import that I was missing, but I can't see anyone else importing HTMLElements. Thanks!</p>
  <p><strong>Edit:</strong>
  My tsconfig.json looks like this:</p>
  <pre><code>{
    &quot;compileOnSave&quot;: false,
    &quot;compilerOptions&quot;: {
      &quot;outDir&quot;: &quot;./dist/out-tsc&quot;,
      &quot;sourceMap&quot;: true,
      &quot;declaration&quot;: false,
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;emitDecoratorMetadata&quot;: true,
      &quot;experimentalDecorators&quot;: true,
      &quot;target&quot;: &quot;es5&quot;,
      &quot;lib&quot;: [
        &quot;es6&quot;,
        &quot;dom&quot;,
        &quot;es2015.iterable&quot;
      ]
    }
  }
  </code></pre>
  <p><strong>Edit 2:</strong>
  I actually had to Ctrl+C, and restart the test for it to compile correctly (I thought it would do it upon change of files, but it didn't). Thank you!</p>