Angular 2 - Karma Error - Module Parse Failed 'You may need an appropriate loader to handle this file type'

Question

I am setting up Karma for my angular 2 Application. I am getting an error for missing plugin.. can you help please. I am using https://github.com/AngularClass/angular2-webpack-starter for reference. here is my dev-dependencies for karma.

"istanbul": "^0.4.5",
    "jasmine-core": "^2.4.1",
    "json-loader": "^0.5.4",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-coverage": "^1.1.1",
    "karma-istanbul-reporter": "0.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-mocha-reporter": "^2.2.0",
    "karma-remap-coverage": "^0.1.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^1.8.0",
    "lodash-webpack-plugin": "^0.10.2",
    "npm-scripts-info": "^0.3.6",
    "raw-loader": "0.5.1",
    "rimraf": "^2.5.2",
    "source-map": "^0.5.6",
    "source-map-loader": "^0.1.5",

here is my karma.conf.js

var webpackConfig = require('./webpack.test');

module.exports = function (config) {
  var _config = {
    basePath: '',

    frameworks: ['jasmine'],

    files: [
      {pattern: './config/karma-test-shim.js', watched: false}
    ],

    preprocessors: {
      './config/karma-test-shim.js': ['coverage','webpack', 'sourcemap'],
      './src/**/!(*.spec).(ts|js)': ['sourcemap']
    },

    webpack: webpackConfig,
    coverageReporter: {
      type: 'in-memory'
    },

    remapCoverageReporter: {
      'text-summary': null,
      json: './coverage/coverage.json',
      html: './coverage/html'
    },
    webpackMiddleware: {
      stats: 'errors-only'
    },

    webpackServer: {
      noInfo: true
    },

    //reporters: ['progress'],
     /*
     * test results reporter to use
     *
     * possible values: 'dots', 'progress'
     * available reporters: https://npmjs.org/browse/keyword/karma-reporter
     */
    reporters: [ 'mocha', 'coverage', 'remap-coverage' ],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: false,
    browsers: ['Chrome'],
    singleRun: true
  };

  config.set(_config);
};

I am getting this error on run:

Chrome 54.0.2840 (Windows 7 0.0.0) ERROR
  Uncaught Error: Module parse failed: {location}\src\app\app.component.spec.ts Unexpected t
oken (13:57)
  You may need an appropriate loader to handle this file type.
  |     ]}));
  |
  |   it('should have a state', inject([ AppComponent ], (app: AppComponent) => {
  |     expect(app.state).toEqual('blank');
  |   }));

at config/karma-test-shim.js:69437

Answer 1

I think this is similar to question .

You need to add following change in your webpack.test.js (webpack config file):

try updating loader 'awesome-typescript-loader' like this:

{
   loader: 'awesome-typescript-loader?presets[]=es2017',
   options: { configFileName: helpers.root('src', 'tsconfig.json') }
}