Angular-cli @ webpack和wallabyjs

Question

I'm trying to configure wallabyjs for my project generated with latest angular-cli (angular-cli@webpack-beta.11). I followed the "official" angular2-webpack-wallaby config , but unfortunately I've got an error

[Error] Runtime error: Error: Cannot find module "./app.component"
[Error] Runtime error: Error: Module parse failed: .\src\app\app.component.spec.ts Unexpected token (12:31)
[Error] You may need an appropriate loader to handle this file type.
[Error] | 
[Error] |   it('should create the app',
[Error] |     inject([AppComponent], (app: AppComponent) => {
[Error] |       expect(app).toBeTruthy();
[Error] |     }));
[Error] at http://localhost:58135/__modules/926.js?1471691462032:1
[Error] Runtime error: Error: Cannot find module "./app.component"
[Error] at http://localhost:58135/src/app/app.component.spec.ts.compiled.js.wbp.js?1471691462037&wallabyFileId=12:4

Here is my wallaby.js

var wallabyWebpack = require('wallaby-webpack');

var webpackPostprocessor = wallabyWebpack({
  entryPatterns: [
    'config/spec-bundle.js',
    'src/**/*spec.js'
  ],

  module: {
    loaders: [
      {test: /\.css$/, loader: 'raw-loader'},
      {test: /\.html$/, loader: 'raw-loader'},
      {test: /karma-require/, loader: 'null'}
    ]
  }
});

module.exports = function () {

  return {
    files: [
      {pattern: 'config/spec-bundle.js', load: false},
      {pattern: 'config/karma-require.js', load: false},
      {pattern: 'src/**/*.ts', load: false},
      {pattern: 'src/**/*.css', load: false},
      {pattern: 'src/**/*.html', load: false},
      {pattern: 'src/**/*spec.ts', ignore: true}
    ],

    tests: [
      {pattern: 'src/**/*spec.ts', load: false}
    ],

    testFramework: 'jasmine',

    env: {
      runner: require('phantomjs-prebuilt').path,
      params: { runner: '--web-security=false' }
    },

    postprocessor: webpackPostprocessor,

    setup: function () {
      window.__moduleBundler.loadTests();
    }
  };
};

And my spec-bundle.js

Error.stackTraceLimit = Infinity;

require('core-js');

// Typescript emit helpers polyfill
require('ts-helpers');

require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/jasmine-patch');
require('zone.js/dist/async-test');

// RxJS
require('rxjs/Rx');

var testing = require('@angular/core/testing');
var browser = require('@angular/platform-browser-dynamic/testing');

testing.setBaseTestProviders(
  browser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
  browser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS
);

Object.assign(global, testing);

window.__karma__;

var testContext = require.context('../src', true, /\.spec\.ts/);

function requireAll(requireContext) {
  return requireContext.keys().map(requireContext);
}

// requires and returns all modules that match
var modules = requireAll(testContext);

Can someone help me with this?

Answer 1

I have asked it on the official wallaby github and got an answer. Here it is.