title: Importing the Angular 2 testing classes ComponentFixture & TestBed causing 404 error
body: <p>I get this error only when I try to run my jasmine tests. I run them with a spec runner html file.</p>
  
  <blockquote>
    <p>zone.js:1382 GET
    <a href="http://localhost:3002/node_modules/@angular/core/bundles/core.umd.js/testing" rel="nofollow noreferrer">http://localhost:3002/node_modules/@angular/core/bundles/core.umd.js/testing</a>
    404 (Not Found)</p>
    
    <p>zone.js:232 Error: (SystemJS) XHR error (404 Not Found)</p>
  </blockquote>
  
  <p>If I just run my app, it works fine. </p>
  
  <p>My spec file that I'm trying to run imports angular 2 testing modules:</p>
  
  <p><code>import { ComponentFixture, TestBed } from '@angular/core/testing';</code> and that's what is causing the error.</p>
  
  <p>However that line is exactly what is in the <a href="https://angular.io/docs/ts/latest/guide/testing.html#!#setup" rel="nofollow noreferrer">angular 2 testing documentation</a></p>
  
  <p>My <code>systemjs.config.js</code> is also exactly the same as the one in the
  <a href="https://angular.io/docs/ts/latest/guide/testing.html#!#setup" rel="nofollow noreferrer">angular 2 documentation</a>.</p>
  
  <p>The issue is that the angular testing module is in <code>@angular/core</code> so this line of <code>systemjs.config.js</code> should take care of that:</p>
  
  <pre><code>map: {
        // our app is within the app folder
        app: 'js/app',
        // angular bundles
        '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  </code></pre>
  
  <p>However this is the file structure of <code>@angular</code> inside <code>node_modules</code> and I have also clicked on "index.js" to show you that that is the file exporting the classes that I want to use in the spec test:</p>
  
  <p><a href="https://i.stack.imgur.com/60T0d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/60T0d.png" alt="enter image description here"></a></p>
  
  <p>But the browser shows that it's looking for this during the import:</p>
  
  <blockquote>
    <p>zone.js:1382 GET
    <a href="http://localhost:3002/node_modules/@angular/core/bundles/core.umd.js/testing" rel="nofollow noreferrer">http://localhost:3002/node_modules/@angular/core/bundles/core.umd.js/testing</a>
    404 (Not Found)</p>
  </blockquote>
  
  <p>Obviously there can't be a file or folder inside core.umd.js file, so it's easy to see that that is wrong. </p>
  
  <p>I think I probably want it to be looking for this:</p>
  
  <blockquote>
    <p><a href="http://localhost:3002/node_modules/@angular/core/testing/index.js" rel="nofollow noreferrer">http://localhost:3002/node_modules/@angular/core/testing/index.js</a></p>
  </blockquote>
  
  <p>So how do I make it do that? In <code>systemjs.config.js</code> surely, I will be doing something to this line?</p>
  
  <pre><code>map: {
    // our app is within the app folder
    app: 'js/app',
    // angular bundles
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  </code></pre>
  
  <p>Or adding another mapping after it specifically for the testing modules which are inside <code>@angular/core</code>?</p>
  
  <p>I've tried this:</p>
  
  <pre><code>map: {
    // our app is within the app folder
    app: 'js/app',
    // angular bundles
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    '@angular/core/testing': 'npm:@angular/core/testing/index.js',
  </code></pre>
  
  <p>and I have also tried this (look at the bottom package):</p>
  
  <pre><code>packages: {
    app: {
      main: 'main.js',
      defaultExtension: 'js'
    },
    "node_modules/ng2-bs3-modal": {
      defaultExtension: 'js' 
    },
    'node_modules/angular2-google-maps/core': { 
      defaultExtension: 'js', 
      main: 'index.js'
    },
    '@angular/core/testing': {
      main:'npm:@angular/core/testing/index.js'
    },
  </code></pre>
  
  <p>But both didn't work/cause other issues.</p>
  
  <p>What do I do to fix this error?</p>
  
  <p>My <code>systemjs.config.js</code> file:</p>
  
  <pre><code>/**
   * System configuration for Angular samples
   * Adjust as necessary for your application needs.
   */
  (function (global) {
    System.config({
      paths: {
        // paths serve as alias
        'npm:': 'node_modules/'
      },
      // map tells the System loader where to look for things
      map: {
        // our app is within the app folder
        app: 'js/app',
        // angular bundles
        '@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/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
        // other libraries
        'rxjs':                      'npm:rxjs',
        'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
      'angular2-google-maps': 'npm:angular2-google-maps',
      'angular2-google-map-auto-complete' : 'npm:angular2-google-map-auto-complete', 
      'ng2-bs3-modal': 'npm:ng2-bs3-modal',
      "ng2-popover": "npm:ng2-popover",
      },
      // packages tells the System loader how to load when no filename and/or no extension
      packages: {
        app: {
          main: 'main.js',
          defaultExtension: 'js'
        },
        "node_modules/ng2-bs3-modal": {
          defaultExtension: 'js' 
        },
        'node_modules/angular2-google-maps/core': { 
          defaultExtension: 'js', 
          main: 'index.js'
        },
        '@angular/core/testing': {
          main:'npm:@angular/core/testing/index.js'
        },
        rxjs: {
          defaultExtension: 'js'
        }
      }
    });
  })(this);
  </code></pre>
  
  <p>my jasmine spec runner html file:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html;charset=utf-8"&gt;
    &lt;title&gt;Vepo Unit Tests&lt;/title&gt;
    &lt;link rel="stylesheet" href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css"&gt;
    &lt;script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;!-- #1. add the system.js and angular libraries --&gt;
    &lt;script src="node_modules/zone.js/dist/zone.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
    &lt;script src="systemjs.config.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      Promise.all([
        System.import('js/app/landing-page/landing-page.component.spec.js'),
        System.import('js/app/pipes/my-uppercase.pipe.spec.js'),
        System.import('js/app/landing-page/subcomponents/middle-row.component.spec.js')
      ]).then(window.onload)
        .catch(console.error.bind(console));
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>my spec file:</p>
  
  <pre><code>import { ComponentFixture, TestBed } from '@angular/core/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; {
     beforeEach(() =&gt; {
        TestBed.configureTestingModule({
           declarations: [MiddleRowComponent], // declare the test component
        });
  
        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;
     });
  
     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>