Angular 2 keeps adding "/testing" to the end of my file imports - systemjs

Question

I've just started to add unit tests to my angular 2 app and I am having a nightmare, every time I have to import something new into my app that I haven't used before, it adds "/testing" to the end of each import:

eg:

localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js/testing 404 (Not Found)

It is driving me nuts because I fix one of that error and then the same thing happens to another file import when I need to import something else.

current full error:

zone.js:1382 GET http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js/testing 404 (Not Found)scheduleTask @ zone.js:1382ZoneDelegate.scheduleTask @ zone.js:245Zone.scheduleMacroTask @ zone.js:171(anonymous function) @ zone.js:1405send @ VM1624:3fetchTextFromURL @ system.src.js:1051(anonymous function) @ system.src.js:1781ZoneAwarePromise @ zone.js:518(anonymous function) @ system.src.js:1780(anonymous function) @ system.src.js:2809(anonymous function) @ system.src.js:3387(anonymous function) @ system.src.js:3701(anonymous function) @ system.src.js:4093(anonymous function) @ system.src.js:4556(anonymous function) @ system.src.js:4825(anonymous function) @ system.src.js:407ZoneDelegate.invoke @ zone.js:232Zone.run @ zone.js:114(anonymous function) @ zone.js:502ZoneDelegate.invokeTask @ zone.js:265Zone.runTask @ zone.js:154drainMicroTaskQueue @ zone.js:401ZoneTask.invoke @ zone.js:339
zone.js:232 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js/testing(…)ZoneDelegate.invoke @ zone.js:232Zone.run @ zone.js:114(anonymous function) @ zone.js:502ZoneDelegate.invokeTask @ zone.js:265Zone.runTask @ zone.js:154drainMicroTaskQueue @ zone.js:401ZoneTask.invoke @ zone.js:339
zone.js:1382 GET http://localhost:3002/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js/testing 404 (Not Found)

I've been trying to fix it by adding lines like this to my systmejs.config.js:

'@angular/core/testing': "npm:@angular/core/bundles/core-testing.umd.js", each time a new error like it arises and it sometimes works and sometimes doesn't but it is taking a long time regardless - is there something wrong with my systemjs.config.js?:

/**
 * 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/core/testing': "npm:@angular/core/bundles/core-testing.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/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.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",
      "zone.js": "npm:zone.js"
    },
    // 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'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

Answer 1

You need to map the testing packages to the testing files. For instance, look your core module configuration

'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/core/testing': "npm:@angular/core/bundles/core-testing.umd.js",

Here, @angular/core/testing is mapped to the core-testing.umd.js file. Now look at you compiler module configuration

'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',

There's no corresponding testing configuration. So when a file tries to import

import { Something } from '@angular/compiler/testing`

it takes @angular/compiler from the available mapping (compiler.umd.js) and adds the testing at the end. This doesn't happen with the core module, because there is a testing mapping.

So what you need to do is create the correct mappings for both the compiler module and the common module. If you look in the example in the karma-test-shim of the quickstart, you'll see all the different testing modules available.

'@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',