title: Failed to load .html in Angular 2.0.0 testing
body: <p>I have a problem with TestBed in Angular 2.0.0</p>
  
  <pre><code>    beforeEach( async(() =&gt; {
          TestBed.configureTestingModule({
              declarations: [
                  SomethingComponent
              ]
          }).compileComponents(); // compile template
      }));
  
      beforeEach(() =&gt; {
          fixture = TestBed.createComponent(SomethingComponent);
          comp = fixture.componentInstance;
      });
  
      it('test', async(() =&gt; {
          fixture.detectChanges();
          expect(true)
      }));
  </code></pre>
  
  <p>Given the component:</p>
  
  <pre><code>@Component({
      templateUrl: 'app/components/something/something.component.html'
  })
  </code></pre>
  
  <p>I get the error:</p>
  
  <pre><code>Firefox 48.0.0 (Mac OS X 10.11.0)
  Failed: Uncaught (in promise): Failed to load app/components/something/something.component.html
  resolvePromise@node_modules/zone.js/dist/zone.js:429:31
  resolvePromise@node_modules/zone.js/dist/zone.js:414:17
  scheduleResolveOrReject/&lt;@node_modules/zone.js/dist/zone.js:462:17
  ZoneDelegate.prototype.invokeTask@node_modules/zone.js/dist/zone.js:236:23
  ProxyZoneSpec.prototype.onInvokeTask@node_modules/zone.js/dist/proxy.js:96:20
  ZoneDelegate.prototype.invokeTask@node_modules/zone.js/dist/zone.js:235:23
  Zone.prototype.runTask@node_modules/zone.js/dist/zone.js:136:28
  drainMicroTaskQueue@node_modules/zone.js/dist/zone.js:368:25
  ZoneTask/this.invoke@node_modules/zone.js/dist/zone.js:308:25
  </code></pre>
  
  <p>I think it might be because the configuration isnt set up right. I am using gulp to precompile TypeScript into JavaScript, and I have the following project structure:</p>
  
  <pre><code>|_ grails-app
  |_ frontend
    |_ angular
      |_ app
      |    |_ components
      |    |     |_ something
      |    |          |_ something.component.ts
      |    |          |_ something.component.html
      |    |_ model
      |    |_ test
      |    |_ app.module.ts
      |    |_ app.routing.ts
      |    |_ main.ts
      |_ assets
      |_ build
      |    |_ app
      |        |_ components
      |        |      |_ something
      |        |          |_ something.component.html
      |        |          |_ something.component.js
      |        |          |_ something.component.js.map
      |        |_      
      |        |_      
      |        |      
      |_ node_modules
      |_ gulpfile.js
      |_ karma.conf.js
      |_ karma-test-shim.js
      |_ systemjs.config
      |_
      |_
      |
  </code></pre>
  
  <p>But if I assume that the html file is precompiled, and remove the command <code>.compileComponents()</code> from the test, I get the following error:</p>
  
  <pre><code>Firefox 48.0.0 (Mac OS X 10.11.0)
  Error: Cannot create the component SomethingComponent as it was not imported into the testing module! 
  </code></pre>
  
  <p>And if I remove the <code>async</code>, I get this error:</p>
  
  <pre><code>Firefox 48.0.0 (Mac OS X 10.11.0)
  Error: This test module uses the component SomethingComponent which is using a "templateUrl", but they were never compiled. Please call "TestBed.compileComponents" before your test. 
  </code></pre>
  
  <p>In <code>karma-test-shim.js</code>, I have:</p>
  
  <pre><code>System.config({
  baseURL: '/base/',
  paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
  },
  map: {
      'app': '/base/build/app/',
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
  
      // angular testing umd bundles
      '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
      '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
      '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
      '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
      '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
      '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
      '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
      '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
  
      // other libraries
      'rxjs': 'npm:rxjs'
  },
  packages: {
      'app': {
          defaultExtension: 'js'
      },
      'rxjs': {
          defaultExtension: 'js'
      }
  }
  });
  </code></pre>
  
  <p>I hope someone can help me figure out, what Im doing wrong in configuration.</p>