Using SystemJS with Karma - 404 on package.json

Question

Problem:

Attempting to integrate SystemJS config with Karma using karma-systemjs, however Karma is complaining about not being able to find the package.json file for each import:

...
10 07 2017 13:38:15.107:WARN [web-server]: 404: /node_modules/angular-mocks/package.json
10 07 2017 13:38:15.380:WARN [web-server]: 404: /node_modules/moment/package.json
10 07 2017 13:38:15.382:WARN [web-server]: 404: /node_modules/angular/package.json
PhantomJS 2.1.1 (Windows 7 0.0.0) ERROR
  Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:9876/node_modules/angular-mocks/package.json
    Error loading http://localhost:9876/node_modules/angular-mocks/package.json
    Error loading build/js/app.spec.js

PhantomJS 2.1.1 (Windows 7 0.0.0): Executed 0 of 0 ERROR (0.945 secs / 0 secs)

Above has been truncated, but there are several more missing package.json warnings above the output. Also these errors only relate to Karma, actually application itself runs fine with below setup.

Dependency Versions:

• "karma": "1.7.0"
• "karma-jasmine": "1.1.0"
• "karma-systemjs": "0.16.0"
• "systemjs": "0.19.47"

SystemJS Config:

(Referenced from: https://github.com/systemjs/systemjs/issues/767#issuecomment-139515090)

System.config({
  defaultJSExtensions: true,
  transpiler: "babel",
  babelOptions: {
    "optional": [
      "runtime",
      "optimisation.modules.system"
    ]
  },
  paths: {
    '*': './node_modules/*',
  },
  packageConfigPaths:  ['./node_modules/*/package.json'],
  map: {
    'systemjs': './node_modules/systemjs/dist/system.js',
    'system-polyfills': './node_modules/systemjs/dist/system-polyfills.js',
    'babel': './node_modules/babel-core/browser.js',
    'angular-feature-flags': './node_modules/angular-feature-flags/dist/featureFlags.min.js',
    crypto: '@empty',
    fs: '@empty',
    stream: '@empty'
  }
});

Karma Config:

module.exports = function (config) {
  "use strict";
  config.set({
    autoWatch: true,
    singleRun: false,
    port: 9876,
    frameworks: ["systemjs", "jasmine"],

    babelPreprocessor: {
      options: {
        compact: true
      }
    },

    files: [
      "node_modules/phantomjs-polyfill-object-assign/object-assign-polyfill.js",
      {pattern: "app/assets/images/**/*", watched: false, included: false, served: true},
      "build/**/*spec*.js"
    ],

    systemjs: {
      configFile: "./config.js",
      serveFiles: [
        './build/**/*.js'
      ]
    },
    browsers: ["PhantomJS"],
    reporters: ["spec"]
  });

};

Answer 1

karma-systemjs is supposed to read your SystemJS configuration and automatically tell karma to serve the files that you tell SystemJS about. However, I looked at the code of karma-systemjs and I don't see any provision there to deal with packageConfigPaths. (And the project needs a new maintainer, which does not inspire confidence.) Therefore, you should add an element to your files configuration like:

{ pattern: "node_modules/**/package.json", included: false }

I'm suggesting a pattern with ** so that you can automatically handle paths like node_modules/@angular/core/package.json, which are more than one level deep.