404s from unclear karma.basePath karma-systemjs.config.baseURL and config.baseURL dependencies.

[richburdon]

I get 404s when my tests try to reference SystemJS modules (conf files below). E.g.,

Error: XHR error (404 Not Found) loading http://localhost:9876/lib/github/angular/bower-angular@1.4.4.js

But I have added these systemjs libs to the systemjs "file" def (below). Although it's not clear to me why I need to add any of this since it seems that all of the appropriate information can be gleaned from the config.js?

[karma.conf.js]

"basePath": "src/main/javascript",
"systemjs": {
  "configFile": "config.js",
  "files": [
    "app/testing/**/*.js",
    "lib/**/*.js",
    "lib/github/angular/bower-angular@1.4.4.js"     // Explicitly added but still 404!
  ],
  "config": {
    "baseURL": "../../..",             // To counteract basePath: "src/main/javascript"
    "paths": {
      "babel": "node_modules/babel-core/browser.js",
      "es6-module-loader": "node_modules/es6-module-loader/dist/es6-module-loader.js",
      "phantomjs-polyfill": "node_modules/phantomjs-polyfill/bind-polyfill.js",
      "system-polyfills": "node_modules/systemjs/dist/system-polyfills.js",
      "systemjs": "node_modules/systemjs/dist/system.js"

[config.js]

System.config({
"baseURL": "/js",
"defaultJSExtensions": true,
"transpiler": "babel",
"paths": {
"github:": "lib/github/",
"npm:": "lib/npm/"
}
});

System.config({
"map": {
"angular": "github:angular/bower-angular@1.4.4",

[richburdon]

It seems that setting "baseURL" to "." (not "") works, but I don't understand why.

[rolaveric]

Ok, it's hard for me to be sure without seeing the full layout of your project but the first thing I notice is that your 404 error doesn't include '/base/' at the start of the path.
Karma serves all files from localhost:[port]/base/.
karma-systemjs tries to handle this by appending /base to the start of your baseURL.
This has been kind of tricky for me because everyone has their own opinions on what baseURL should be, so I've tried to be as accommodating as I can but it does start to get confusing.
You can find the exact logic it uses here: https://github.com/rolaveric/karma-systemjs/blob/master/lib/adapter.js#L60

Oh, also baseURL in the SystemJS config has no relation what so ever with the basePath in your Karma configuration, so don't think you need to use "../../../" to cancel them out.
basePath is what Karma uses to resolve paths on your local file system. (eg. /home/rolaveric/myProject/), while baseURL is what SystemJS uses to build URLs within your browser to GET modules (eg. http://localhost:[port]/base/myLibrary.js).

[richburdon]

Thanks for the response.

My (abbreviated) configs are below. This is now working for me, but as I say the systemjs.baseURL="." is completely non-intuitive (discovered after much trial-and-error), and having to prefix "../../.." on my paths since my "node_modules" and sources are in different places is a bit ugly.

For context, I'm using Flask (not node) as my web server. All JS resources are served via "/js"; my JS code source root is "src/main/javascript" (since I have "src/main/python", etc.), so (much simplified):

project/
    karma.conf.js
    node_modules/
    src/main/javascript/
        app/main.js
        lib/system.js
        config.js

[src/main/javascript/config.js]
System.config({
  "baseURL": "/js",
}

[karma.conf.js]
module.exports = function(config) {
  config.set({
    "basePath": "src/main/javascript",
    "systemjs": {
      "configFile": "config.js",
      "files": [
        "app/**/*.js",
      ],

      "config": {
        "baseURL": ".",
        "paths": {
          "babel":              "../../../node_modules/babel-core/browser.js",
          "es6-module-loader":  "../../../node_modules/es6-module-loader/dist/es6-module-loader.js",
          "phantomjs-polyfill": "../../../node_modules/phantomjs-polyfill/bind-polyfill.js",
          "system-polyfills":   "../../../node_modules/systemjs/dist/system-polyfills.js",
          "systemjs":           "../../../node_modules/systemjs/dist/system.js"
        }
      },
    },

[johnjbarton]

Karma serves all files from localhost:[port]/base/.

I missing something really basic in the config for karma-systemjs: how to I serve my test files located in <root of git repo>/test?

[rolaveric]

Sorry for the late reply.

TLDR;
If you want to just serve (like web server) files, put them under systemjs.serveFiles and they will map to http://localhost:$port/base/$pathRelativeToBasePath
If you want to server and run (like <script src="myFile">) files, put them under files.
And if you don't use a basePath which is a common ancestor of all your file paths, you're going to have difficulties.

Karma does 2 important things:

1. Karma is serving files as a simple http-server under the URLhttp://localhost:$port/base/.
2. Karma serves a special HTML file under the URL http://localhost:$port/ which includes a select group of files using <script src="url"> tags.

The Karma Doco refers to this as "served" (1) and "included" (2).

You tell karma in the config that you want to serve files from your filesystem, based off a basePath, which defaults to your current folder.
So lets say you run Karma from your <root of git repo> and want it to include test/*.js as that's where all your test suites are. So your karma config looks something like this:

{
  basePath: './', // Default
  files: ['test/*.js']
}

Without systemjs-karma, this would translate into:

• Karma serving ./test/*.js as http://localhost:$port/base/test/*.js.
  eg. `http://localhost:$port/base/test/myTestSuite.js
• Karma's root HTML including a <script src=""> tag for each file it found at ./test/*.js.
  eg. <script src="/base/test/myTestSuite.js"></script>

What karma-systemjs does is highjack the process so that instead of including your files with <script> tags, it handles them with System.import() calls.
And since modules can import from other modules, that leads to other subsequent System.import(), etc.
The problem is that while Karma is perfectly aware of where it's serving all it's files from, and therefore what URLs to use in it's <script> tags - karma-systemjs is not.
All it knows is that Karma provides all it's files under a "/base/" prefix, and what it can glean from the SystemJS config.

The simplest solution is just to use a common ancestor as your basePath in Karma, and things flow much smoother.

[buddyackerman]

I'm not sure if my issue is the same as this one (mainly because I don't know how Karma really works and now I've added in karma-systemjs to the mix so I know even less of what's going on). I'm running Angular 2 RC5 and I'm getting the following output with 404 warnings when I start karma (with the karma-systemjs plugin installed):

01 09 2016 13:40:19.865:DEBUG [middleware:source-files]: Requesting /base/app/RegisterUser/register-user.js /
01 09 2016 13:40:19.868:DEBUG [middleware:source-files]: Fetching C:/Projects/CustomerPortal/Dev/poc/src/Angular2MVCTest/app/RegisterUser/register-user.js
01 09 2016 13:40:19.872:DEBUG [middleware:source-files]: Requesting /base/node_modules/@angular/core//bundles/core.umd.js /
01 09 2016 13:40:19.878:DEBUG [middleware:source-files]: Fetching C:/Projects/CustomerPortal/Dev/poc/src/Angular2MVCTest/node_modules/@angular/core//bundles/core.umd.js 01 09 2016 13:40:19.882:DEBUG [middleware:source-files]: Requesting /base/node_modules/@angular/router/index.js /
01 09 2016 13:40:19.887:DEBUG [middleware:source-files]: Fetching C:/Projects/CustomerPortal/Dev/poc/src/Angular2MVCTest/node_modules/@angular/router/index.js
01 09 2016 13:40:19.891:DEBUG [web-server]: serving (cached): C:/Projects/CustomerPortal/Dev/poc/src/Angular2MVCTest/app/RegisterUser/register-user.js
01 09 2016 13:40:19.896:WARN [web-server]: 404: /base/node_modules/@angular/core//bundles/core.umd.js
01 09 2016 13:40:19.900:WARN [web-server]: 404: /base/node_modules/@angular/router/index.js

And eventually I get this error

Error: (SystemJS) Error: XHR error (404 Not Found) loading node_modules/@angular/core//bundles/core.umd.js
Error loading node_modules/@angular/core//bundles/core.umd.js as "@angular/core" from app/Authorization/authorize.js

Not sure why it can't find the modules since they are defined in systemjs.config.js.

My karma.conf.js looks like this

`

module.exports = function(config) {
  config.set({

    basePath: '.',

    plugins: ['karma-systemjs', 'karma-jasmine', 'karma-chrome-launcher'],

    frameworks: ['jasmine', 'systemjs'],

    files: [
      'unittests/**/*.js',
      'app/**/*.js'
    ],

    exclude: [
        'app/app.js'
    ],

    systemjs: {
        configFile: 'systemjs.config.js',
    },

    preprocessors: {
    },

    reporters: ['progress'],

    port: 9876,

    colors: true,

    logLevel: config.LOG_DEBUG,

    autoWatch: true,

    browsers: ['Chrome'],

    singleRun: false,

    concurrency: Infinity
  })
}

`

My systemjs.config.js looks like this:
`

(function (global) {
    // map tells the System loader where to look for things
    var map = {
        'app': 'app', // 'dist',
        '@angular': 'node_modules/@angular',
        'rxjs': 'node_modules/rxjs',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        'ng2-bootstrap': 'node_modules/ng2-bootstrap',
        'moment': 'node_modules/moment/moment.js',
        'primeng': 'node_modules/primeng',
        '@angular/router': 'node_modules/@angular/router',
        'angular2-jwt': 'node_modules/angular2-jwt/angular2-jwt.js',
        'lodash': 'node_modules/lodash'
    };
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app': { main: 'app.js', defaultExtension: 'js' },
        'rxjs': { main: 'bundles/Rx.umd.min.js', defaultExtension: 'js' },
        'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
        'ng2-bootstrap': { main: 'ng2-bootstrap.js', defaultExtension: 'js' },
        'primeng': { defaultExtension: 'js' },
        '@angular/router': { main: 'index.js', defaultExtension: 'js' },
        'angular2-jwt': { defaultExtension: 'js' },
        'lodash': {main:'index.js', defaultExtension:'js'}
    };
    var ngPackageNames = [
      'common',
      'compiler',
      'core',
      'http',
      'platform-browser',
      'platform-browser-dynamic',
      'forms'
    ];
    // Add package entries for angular packages
    ngPackageNames.forEach(function (pkgName) {
        packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
    });

    var paths = {
        'systemjs': 'node_modules/systemjs/dist/system.js',
        'system-polyfills': 'node_modules/systemjs/dist/system-polyfills.js'
    };

    var config = {
        map: map,
        packages: packages,
        transpiler: null,
        paths: paths
    };
    System.config(config);
})(this);

`

[kapoorruchi]

I'm facing issues running tests with angular2 seed(https://github.com/mgechev/angular-seed) karma. I'm getting below issue.
'START:
09 11 2016 12:31:12.195:WARN [web-server]: 404: /base/node_modules/angular2localization/bundles/angular2localization.umd.min.js
Chrome 54.0.2840 (Windows 7 0.0.0) ERROR: '(SystemJS) XHR error (404 Not Found) loading http://localhost:9876/base/node_modules/angular2localization/bundles/angular2localization.umd.min.js
Error: XHR error (404 Not Found) loading http://localhost:9876/base/node_modules/angular2localization/bundles/angular2localization.umd.min.js
at XMLHttpRequest.wrapFn as _onreadystatechange
at ZoneDelegate.invokeTask (http://localhost:9876/base/node_modules/zone.js/dist/zone.js?c35727d0e64913b5669320b167e496fc94fc6928:236:37)
at Zone.runTask (http://localhost:9876/base/node_modules/zone.js/dist/zone.js?c35727d0e64913b5669320b167e496fc94fc6928:136:47)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:9876/base/node_modules/zone.js/dist/zone.js?c35727d0e64913b5669320b167e496fc94fc6928:304:33)
Error loading http://localhost:9876/base/node_modules/angular2localization/bundles/angular2localization.umd.min.js as "angular2localization" from http://localhost:9876/base/dist/dev/app/app.component.js '
Below are my thoughts:

1. May be this issue is with the angular2localization library integration with angular2 seed.
2. Or currently I'm using, https://github.com/mgechev/angular-seed . Can this issue be due to karma version?
   "name": "angular2-seed",
   "version": "0.0.0"
   I need an urgent help on this, it would lead to delay in my project delivery.
   Please help.