I recently downloaded an Angular2 Webpack Starter seed project from GitHub and managed to set it up without encountering any issues. However, I have run into a slight inconvenience when trying to debug source files under unit tests. All *.spec.ts files are loaded directly into the browser and can be debugged, but no map files are generated for them. When stepping into a source file under test, this is the result:
https://i.sstatic.net/W84nh.png
Below is my karma config:
module.exports = function(config) {
var testWebpackConfig = require('./webpack.test.js');
config.set({
basePath: '',
frameworks: ['jasmine'],
exclude: [ ],
files: [ { pattern: './config/spec-bundle.js', watched: false } ],
preprocessors: { './config/spec-bundle.js': ['coverage', 'webpack', 'sourcemap'] },
webpack: testWebpackConfig,
coverageReporter: {
dir : 'coverage/',
reporters: [
{ type: 'text-summary' },
{ type: 'json' },
{ type: 'html' }
]
},
webpackServer: { noInfo: true },
reporters: [ 'mocha', 'coverage' ],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: [
'Chrome'
],
singleRun: false
});
};
And here is the webpack.test.js configuration:
const helpers = require('./helpers');
const ProvidePlugin = require('webpack/lib/ProvidePlugin');
const DefinePlugin = require('webpack/lib/DefinePlugin');
const ENV = process.env.ENV = process.env.NODE_ENV = 'test';
module.exports = {
devtool: 'inline-source-map',
resolve: {
extensions: ['', '.ts', '.js'],
root: helpers.root('src'),
},
module: {
preLoaders: [
{
test: /\.ts$/,
loader: 'tslint-loader',
exclude: [helpers.root('node_modules')]
},
{
test: /\.js$/,
loader: 'source-map-loader',
exclude: [
helpers.root('node_modules/rxjs'),
helpers.root('node_modules/@angular2-material'),
helpers.root('node_modules/@angular')
]}
],
// more configurations
}
The spec-bundle.js file:
Error.stackTraceLimit = Infinity;
require('core-js/es6');
require('core-js/es7/reflect');
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');
require('zone.js/dist/fake-async-test');
require('zone.js/dist/sync-test');
require('rxjs/Rx');
// more imports and functions
I am seeking advice on how to modify this setup so that the .ts source files are debuggable with accurate coverage statistics. Any suggestions or guidance would be greatly appreciated. Thank you!