files not loading correctly while testing angular 2 with Jasmine

Question

I am trying to run Jasmine test on my angular app and get the following message while debugging using Developer Tools

Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:45870/node_modules/@angular/core/bundles/core.umd.js/testing

I think what is trying to load is incorrect because I can see this node_modules/@angular/core/bundles/core.umd.js and core.umd.js is a file and not folder. However there is a foldler node_modules/@angular/core/bundles/testing.

Please see my Systemjs.config.js file below

/**
 * 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: 'app',
      '@progress/kendo-angular-grid': 'npm:@progress/kendo-angular-grid',
        '@progress/kendo-angular-intl': 'npm:@progress/kendo-angular-intl',
        '@telerik/kendo-intl': 'npm:@telerik/kendo-intl',
      // 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',
       'primeng': 'node_modules/primeng',
       'angular2-google-maps/core': 'npm:angular2-google-maps/core/core.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      'npm:@progress/kendo-angular-grid': {
          main: './dist/npm/js/main.js',
          defaultExtension: 'js'
      },
      'npm:@progress/kendo-angular-intl': {
          main: './dist/npm/js/main.js',
          defaultExtension: 'js'
      },
      'npm:@telerik/kendo-intl': {
          main: './dist/npm/js/main.js',
          defaultExtension: 'js'
      },
      'primeng': { defaultExtension: 'js' },
      rxjs: {
        defaultExtension: 'js'
      },
      'angular-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
      }
    }
  });
})(this);

Paul Samsotha Paul Samsotha · Accepted Answer · 2016-12-18T11:12:41

So you have all the Angular files required for running the application, set up in your systemjs.config.js file. But in your tests, you are trying to import things that are in the Angular testing modules. These are in different bundles, which are not (rightly) configured in the application systemjs.config.js.

What you need to do also map those testing modules. But you should do this in a separate file that you only load for tests. If you look at the Angular quickstart project, there is a karma-test-shim.js SystemJS config mapping for the testing modules.

Even after fixing that, you may still run into other errors (can't tell without seeing the jasmine set up. There is a lot more involved with setting this up. You see this plunker for a complete set up.

Personally though, I would recommend setting up Karma. You can check out this article, where I do a pretty thorough walk-through of making the conversion from Browser/Jasmine to Karma/Jasmine.

files not loading correctly while testing angular 2 with Jasmine

1 Answers