title: Angular unit test error: Unexpected value 'ObservableMedia' imported by the module 'DynamicTestModule'
body: <p>I have a fairly simple unit test file like so:</p>
  
  <pre><code>import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  import { Http, HttpModule } from '@angular/http';
  import { MockBackend } from '@angular/http/testing';
  import { MaterialModule } from '@angular/material';
  import { MediaChange, ObservableMedia } from "@angular/flex-layout";
  import { PageHeaderComponent } from './page-header.component';
  import { UserService } from '../user.service';
  import { PreloadService } from '../preload.service';
  
  describe('PageHeaderComponent', () =&gt; {
      let component: PageHeaderComponent;
      let fixture: ComponentFixture&lt;PageHeaderComponent&gt;;
  
      beforeEach(() =&gt; {
          TestBed.configureTestingModule({
              declarations: [PageHeaderComponent],
              providers: [
                  {
                      provide: Http,
                      deps: [MockBackend]
                  },
                  PreloadService,
                  UserService
              ],
              imports: [MaterialModule, ObservableMedia],
              schemas: [CUSTOM_ELEMENTS_SCHEMA]
          });
  
          fixture = TestBed.createComponent(PageHeaderComponent);
          component = fixture.componentInstance;
      });
  
      it('should be created', () =&gt; {
          expect(component).toBeTruthy();
      });
  });
  </code></pre>
  
  <p>It's testing a run-of-the-mill Angular CLI component that contains a subscription to watch breakpoints for element visibility:</p>
  
  <pre><code>constructor(public media: ObservableMedia) {
      // watch for changes in breakpoint
      media.asObservable()
          .subscribe((change: MediaChange) =&gt; {
              // update the header tooltip state
              if (change.mqAlias == 'xs') {
                  this.showHeaderTooltip = false;
              }
              else {
                  this.showHeaderTooltip = true;
              }
          });
  }
  
  ngOnInit() {
      // check breakpoint and set header tooltip state
      if (this.media.isActive('xs')) {
          this.showHeaderTooltip = false;
      } else {
          this.showHeaderTooltip = true;
      }
  }
  </code></pre>
  
  <p>It throws this error:</p>
  
  <blockquote>
    <p>Error: Unexpected value 'ObservableMedia' imported by the module 'DynamicTestModule'. Please add a @NgModule annotation. in <a href="http://localhost:9876/_karma_webpack_/polyfills.bundle.js" rel="nofollow noreferrer">http://localhost:9876/_karma_webpack_/polyfills.bundle.js</a> (line 6972)
            ZoneAwareError@<a href="http://localhost:9876/_karma_webpack_/polyfills.bundle.js:6972:28" rel="nofollow noreferrer">http://localhost:9876/_karma_webpack_/polyfills.bundle.js:6972:28</a>
            syntaxError@<a href="http://localhost:9876/_karma_webpack_/vendor.bundle.js:14803:39" rel="nofollow noreferrer">http://localhost:9876/_karma_webpack_/vendor.bundle.js:14803:39</a>
            <a href="http://localhost:9876/_karma_webpack_/vendor.bundle.js:28487:55" rel="nofollow noreferrer">http://localhost:9876/_karma_webpack_/vendor.bundle.js:28487:55</a>
            forEach@[native code]
    <br>....</p>
  </blockquote>
  
  <p>I've seen similar error reports in my research, but not for <code>ObservableMedia</code>. I've tried adding the imports to app.module.ts, but that had no effect. What's missing?</p>