Importing the Angular 2 testing classes ComponentFixture & TestBed causing 404 error
<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>