We Keep Coding

Webpack: issue with breakpoints and mapping in typescript - breakpoints automatically moves at the end of file on debug

After I've updated webpack from 3.11.0 to 4.6.0, breakpoints in Angular Typescript started moving automatically at the end of the file during debug.
If I stop debug, they returns where I've placed them.
EXAMPLE (which will explain the situation better than my intro above)
If I have - for example - a .ts file of 100 lines and I set a
breakpoint on typescript on Visual Studio at line 50, when I run my
app debug, the breakpoints moves automatically at the end of the file
(so at line 100). When I stop debug, it returns on line 50.
The issue started when I've updated Webpack to last version and seems like to be related to sourcemap.
I share with you my webpack.config.js content below. After the code snippet, I will also tell you what I've changed from 3.11.0 to 4.6.0.
Can anyone help me to solving this?
P.S.: I've kept the default line that enable in-line sourcemaps if you delete or comment it in the config file (see comment Remove this line if you prefer inline source maps in my code below) because using in-line sourcemaps on typescript literally kills my computer.
MY CODE BELOW
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const AngularCompilerPlugin = require('#ngtools/webpack').AngularCompilerPlugin;
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
var nodeExternals = require('webpack-node-externals');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const isClient = typeof window !== 'undefined';
module.exports = (env) => {
// Configuration in common to both client-side and server-side bundles
const isDevBuild = !(env && env.prod);
const sharedConfig = {
stats: { modules: false },
context: __dirname,
resolve: { extensions: ['.js', '.ts'] },
output: {
filename: '[name].js',
publicPath: 'dist/', // Webpack dev middleware, if enabled, handles requests for this URL prefix
globalObject: 'self'
},
module: {
rules: [
{ test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] },
{ test: /\.html$/, use: 'html-loader?minimize=false' },
{ test: /\.css$/, use: ['to-string-loader', 'style-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize'] },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },
//font management
{
test: /\.(svg|eot|ttf|woff|woff2)$/,
use: [{
loader: 'file-loader',
options: {
name: 'images/[name].[hash].[ext]'
}
}]
}
]
},
plugins: [new CheckerPlugin()]
};
// Configuration for client-side bundle suitable for running in browsers
const clientBundleOutputDir = './wwwroot/dist';
const clientBundleConfig = merge(sharedConfig, {
entry: { 'main-client': './ClientApp/boot.browser.ts' },
output: { path: path.join(__dirname, clientBundleOutputDir) },
optimization: {
minimizer: [
// specify a custom UglifyJsPlugin here to get source maps in production
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
compress: false,
ecma: 6,
mangle: true
},
sourceMap: true
})
]
},
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
})
].concat(isDevBuild ? [
// Plugins that apply in development builds only
new webpack.SourceMapDevToolPlugin({
filename: '[file].map', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
})
] : [
])
});
// Configuration for server-side (prerendering) bundle suitable for running in Node
const serverBundleConfig = merge(sharedConfig, {
resolve: { mainFields: ['main'] },
entry: { 'main-server': './ClientApp/boot.server.ts' },
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./ClientApp/dist/vendor-manifest.json'),
sourceType: 'commonjs2',
name: './vendor'
})
].concat(isDevBuild ? [] : [
]),
output: {
libraryTarget: 'commonjs',
path: path.join(__dirname, './ClientApp/dist')
},
target: 'node',
externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
devtool: 'inline-source-map'
});
return [clientBundleConfig, serverBundleConfig];
};
WHAT CHANGED BETWEEN VERSIONS
webpack.config.js
1. - moved uglify from plugins to optimization, but copy-pasting this configuration from the internet. (Maybe the issue is related to this?)
optimization: {
minimizer: [
// specify a custom UglifyJsPlugin here to get source maps in production
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
compress: false,
ecma: 6,
mangle: true
},
sourceMap: true
})
]
},
2. - removed AOT webpack plugin from production environment configuration

Solved by disabling browser link in Visual Studio 2017.
Also set "sourcemap:true" on tsconfig.

Webpack - Excluding node_modules with also keep a separated browser and server management

(webpack.config.js file content below)
I'm trying to make a webpack exclusion on node modules.
I found that using webpack-node-externals works for it but using that on my common config causes this other error:
Require is not defined on reflect-metadata - __webpack_require__ issue
So... I was wondering how can i exclude webpack bundling also on the browser side without getting any issue.
My webpack version: 3.11.0
webpack-config.js
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const AotPlugin = require('#ngtools/webpack').AotPlugin;
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
var nodeExternals = require('webpack-node-externals');
module.exports = (env) => {
// Configuration in common to both client-side and server-side bundles
const isDevBuild = !(env && env.prod);
const sharedConfig = {
//externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
stats: { modules: false },
context: __dirname,
resolve: { extensions: [ '.js', '.ts' ] },
output: {
filename: '[name].js',
publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
},
module: {
rules: [
{ test: /\.ts$/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] : '#ngtools/webpack' },
{ test: /\.html$/, use: 'html-loader?minimize=false' },
{ test: /\.css$/, use: [ 'to-string-loader', 'style-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
]
},
plugins: [new CheckerPlugin()]
};
// Configuration for client-side bundle suitable for running in browsers
const clientBundleOutputDir = './wwwroot/dist';
const clientBundleConfig = merge(sharedConfig, {
entry: { 'main-client': './ClientApp/boot.browser.ts' },
output: { path: path.join(__dirname, clientBundleOutputDir) },
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
})
].concat(isDevBuild ? [
// Plugins that apply in development builds only
new webpack.SourceMapDevToolPlugin({
filename: '[file].map', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
})
] : [
// Plugins that apply in production builds only
new webpack.optimize.UglifyJsPlugin(),
new AotPlugin({
tsConfigPath: './tsconfig.json',
entryModule: path.join(__dirname, 'ClientApp/app/app.browser.module#AppModule'),
exclude: ['./**/*.server.ts']
})
])
});
// Configuration for server-side (prerendering) bundle suitable for running in Node
const serverBundleConfig = merge(sharedConfig, {
resolve: { mainFields: ['main'] },
entry: { 'main-server': './ClientApp/boot.server.ts' },
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./ClientApp/dist/vendor-manifest.json'),
sourceType: 'commonjs2',
name: './vendor'
})
].concat(isDevBuild ? [] : [
// Plugins that apply in production builds only
new AotPlugin({
tsConfigPath: './tsconfig.json',
entryModule: path.join(__dirname, 'ClientApp/app/app.server.module#AppModule'),
exclude: ['./**/*.browser.ts']
})
]),
output: {
libraryTarget: 'commonjs',
path: path.join(__dirname, './ClientApp/dist')
},
target: 'node',
externals: [nodeExternals()], // in order to ignore all modules in node_modules folder,
devtool: 'inline-source-map'
});
return [clientBundleConfig, serverBundleConfig];
};

GOT IT!
Before posting my solution, I'd like to thanks Aluan Haddad for his useful comment in my question above.
As suggested by Aluan, in fact, the problem was related to the need to use also a module loader, more than a module bundler.
So, the steps that I followed are these:
Installing requireJS ==> http://requirejs.org/docs/node.html
Removing externals: [nodeExternals()], // in order to ignore all modules in node_modules folder from my common webpack configuration and adding it under my server configuration (done before my question, but it's a really important step) [see webpack.config.js content in the question]
Adding target: 'node', before my externals point above, under my server side section (done before my question, but it's a really important step) [see webpack.config.js content in the question]
This makes sure that browser side keeps target:'web' (default target), and target becomes node just for the server.
launched webpack config vendor command manually from powershell webpack --config webpack.config.vendor.js
launched webpack config command manually from powershell webpack --config webpack.config.js
That worked for me! Hope It will works also for anyone else reading this question and encountering this issue!

Unit testing Leaflet app with Karma, Jasmine and Webpack (vanilla ES6). `Uncaught Error: Map container not found`

I'm developing a small mapping app with an straigh forward configuration. The dependencies of the app are Leaflet, for displaying the map, Webpack for building (and webpack-dev-server to hot reload), Babel and Karma and Jasmine for unit testing.
The app is written in vanilla JS implementing some kind of pub/sub pattern (dom events trigger some setters that update the state and notify map and DOM handler functions that update the view with the new state).
This are Karma and Webpack config files.
karma.conf.js
var webpackConfig = require('./webpack.config.js')
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
files: [
'index.html',
'./test/spec/*.spec.js'
],
plugins: [
'karma-chrome-launcher',
'karma-jasmine',
'karma-webpack'
],
preprocessors: {
'test/spec/*.spec.js': ['webpack']
},
webpack: webpackConfig,
reporters: ['progress'],
// web server port
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
concurrency: Infinity
})
}
webpack.config.js
module.exports = {
resolve: {
extensions: ['.js', '.html', '.css']
},
context: __dirname,
entry: {
app:['./index.js']
},
output: {
path: __dirname +'/build',
filename: 'app.js',
publicPath: '/build/'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
}
]
},
devServer: {
host: 'localhost',
port: 8080
}
}
The app gets fired from index.html that has a <script> tag that serves build/app.js
I trying to run some unit tests but I'm getting Uncaught Error: Map container not found and two warnings:
26 11 2017 21:19:51.778:WARN [web-server]: 404: /css/general.css
26 11 2017 21:19:51.779:WARN [web-server]: 404: /build/app.js
I'm only running this setters.spec.js file:
'use strict'
import {state} from '../../modules/store.js'
import {setHue} from '../../modules/setters.js'
import {notifyBaseHueChange} from '../../modules/eventBus.js'
describe("Setters", function() {
it("setHue should update state baseHue and notify the change",
function() {
var hue = 120
setHue(hue)
expect(state.baseHue).toEqual(hue)
})
})
Notification functions triggers some methods inside mapHandler.js and DOMhandler.js which update the map and DOM values on index.js, but is evident that karma, nor webpack, does not know anything about index.js andcan not access to the <div id="map"></div> where map is displayed on the page.
I'm not really sure how to make karma aware of index.html to use while testing.
I've been through some forums answers but I'm a little bit lost.
Of course I'm not a seasoned tester :_(
Any advice would be apreciated

Build error while compiling create-react-app

I am new to Reactjs and am started learning it. I have been trying to start a basic hello world program but its failing at compilation level.
Created a start up hello-word program with create-react-app hello-world it gave me a nice folder structure with bunch of files.
And Here you can see the compilation error
Failed to compile
./src/index.js
Module build failed: Error: Failed to load plugin import: Cannot find module
'eslint-plugin-import'
Referenced from:
at Array.forEach (native)
at Array.reduceRight (native)
This error occurred during the build time and cannot be dismissed.
Here the error states cannot find module so i tried to install eslint plugin import ,standard ..etc but still its not worked.
Below is my webpack.config.dev.js
// #remove-on-eject-begin
/**
* Copyright (c) 2015-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
// #remove-on-eject-end
'use strict';
const autoprefixer = require('autoprefixer');
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-
plugin');
const InterpolateHtmlPlugin = require('react-dev-
utils/InterpolateHtmlPlugin');
const WatchMissingNodeModulesPlugin = require('react-dev-
utils/WatchMissingNodeModulesPlugin');
const eslintFormatter = require('react-dev-utils/eslintFormatter');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getClientEnvironment = require('./env');
const paths = require('./paths');
const env = getClientEnvironment(publicUrl);
module.exports = {
// You may want 'eval' instead if you prefer to see the compiled output in
DevTools.
// See the discussion in https://github.com/facebookincubator/create-
react-app/issues/343.
devtool: 'cheap-module-source-map',
entry: [
// We ship a few polyfills by default:
require.resolve('./polyfills'),
// Include an alternative client for WebpackDevServer. A client's job is to
// connect to WebpackDevServer by a socket and get notified about changes.
// When you save a file, the client will either apply hot updates (in case
// of CSS changes), or refresh the page (in case of JS changes). When you
// make a syntax error, this client will display a syntax error overlay.
// Note: instead of the default WebpackDevServer client, we use a custom one
// to bring better experience for Create React App users. You can replace
// the line below with these two lines if you prefer the stock client:
// require.resolve('webpack-dev-server/client') + '?/',
// require.resolve('webpack/hot/dev-server'),
require.resolve('react-dev-utils/webpackHotDevClient'),
// Finally, this is your app's code:
paths.appIndexJs,
// We include the app code last so that if there is a runtime error during
// initialization, it doesn't blow up the WebpackDevServer client, and
// changing JS code would still trigger a refresh.
],
output: {
// Next line is not used in dev but WebpackDevServer crashes without it:
path: paths.appBuild,
// Add /* filename */ comments to generated require()s in the output.
pathinfo: true,
// This does not produce a real file. It's just the virtual path that is
// served by WebpackDevServer in development. This is the JS bundle
// containing code from all our entry points, and the Webpack runtime.
filename: 'static/js/bundle.js',
// There are also additional JS chunk files if you use code splitting.
chunkFilename: 'static/js/[name].chunk.js',
// This is the URL that app is served from. We use "/" in development.
publicPath: publicPath,
// Point sourcemap entries to original disk location (format as URL on
Windows)
devtoolModuleFilenameTemplate: info =>
path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
},
resolve: {
modules: ['node_modules', paths.appNodeModules].concat(
// It is guaranteed to exist because we tweak it in `env.js`
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
),
extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx'],
alias: {
// #remove-on-eject-begin
// Resolve Babel runtime relative to react-scripts.
// It usually still works on npm 3 without this but it would be
// unfortunate to rely on, as react-scripts could be symlinked,
// and thus babel-runtime might not be resolvable from the source.
'babel-runtime': path.dirname(
require.resolve('babel-runtime/package.json')
),
// #remove-on-eject-end
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-
with-react-native-for-web/
'react-native': 'react-native-web',
},
plugins: [
// Prevents users from importing files from outside of src/ (or
node_modules/).
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
],
},
module: {
strictExportPresence: true,
rules: [
// TODO: Disable require.ensure as it's not a standard language feature.
// We are waiting for https://github.com/facebookincubator/create-react-
app/issues/2176.
// { parser: { requireEnsure: false } },
// First, run the linter.
// It's important to do this before Babel processes the JS.
{
test: /\.(js|jsx)$/,
enforce: 'pre',
use: [
{
options: {
formatter: eslintFormatter,
eslintPath: require.resolve('eslint'),
// #remove-on-eject-begin
baseConfig: {
extends: [require.resolve('eslint-config-react-app')],
},
ignore: false,
useEslintrc: false,
// #remove-on-eject-end
},
loader: require.resolve('eslint-loader'),
},
],
include: paths.appSrc,
},
{
// "oneOf" will traverse all following loaders until one will
// match the requirements. When no loader matches it will fall
// back to the "file" loader at the end of the loader list.
oneOf: [
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
// Process JS with Babel.
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
// #remove-on-eject-begin
babelrc: false,
presets: [require.resolve('babel-preset-react-app')],
cacheDirectory: true,
},
},
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use a plugin to extract that CSS to a file, but
// in development "style" loader enables hot editing of CSS.
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
{
// Exclude `js` files to keep "css" loader working as it injects
// it's runtime that would otherwise processed through "file"
loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.js$/, /\.html$/, /\.json$/],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
],
},
],
},
plugins: [
new InterpolateHtmlPlugin(env.raw),
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
}),
new webpack.NamedModulesPlugin(),
new webpack.DefinePlugin(env.stringified),
new webpack.HotModuleReplacementPlugin(),
new CaseSensitivePathsPlugin(),
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
],
node: {
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty',
},
performance: {
hints: false,
},
};
Can any one guide me how to come out of this build error.

This means eslint-plugin-import not available in your node_modules.
A fresh npm install eslint-plugin-import and restart the application should fix this issue.
If that didn't fix, try upgrading your npm version:
npm install -g npm#latest

Finally issue got resolved after installing few below packages globally:
eslint-config-react-app
eslint
babel-eslint
eslint-plugin-react
eslint-plugin-import
eslint-plugin-jsx-a11y
eslint-plugin-flowtype
And deleted package.lock.json file then ran npm install
Finally npm start Its just worked. Thank you

Run this command:
"lint:fix": "eslint './src/**/*.{js,jsx}' --fix"
Then fixed all problems.
And Sure file ".eslint.js" has no any problem:
module.exports = {
root: true,
env: {
browser: true,
node: true,
},
parserOptions: {
parser: "babel-eslint",
ecmaVersion: 2020,
sourceType: "module",
},
extends: ["plugin:react/recommended", "plugin:prettier/recommended"],
plugins: [],
rules: {
"react/prop-types": 0,
},
};

Can't find source maps for Karma + Jasmine + TypeScript + Webpack

I'm trying to test (with coverage) my TypeScript application using Karma, Jasmine, and Webpack. With the following, I'm able to successfully run tests, but am unable to generate coverage properly. I'm using karma-remap-coverage (https://github.com/sshev/karma-remap-coverage) and it seems simple enough.
It looks as though something interesting is happening (and I'm getting some kind of coverage report) but with a few tweaks here and there, the numbers change drastically and I can never actually load the sourcemaps.
Here's the basic setup:
I have a src directory that contains 10 .ts files. Only one has a corresponding .spec file at the moment.
The spec file is pretty simple and was just enough to prove that I could run tests:
import ComponentToTest from './componentToTest';
describe('ComponentToTest', () => {
it('should run a test', () => {
expect(1+1).toBe(2);
});
it('should be able to invoke the a method', () => {
spyOn(ComponentToTest, 'foo').and.callThrough();
ComponentToTest.foo('testing foo');
expect(ComponentToTest.foo).toHaveBeenCalled();
});
});
This works like a charm when paired with my tsconfig.json file:
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"noImplicitAny": false,
"sourceMap": true,
"lib": ["es6", "dom"],
"experimentalDecorators": true
},
"exclude": [
"node_modules"
]
}
and karma.conf.js file:
module.exports = config => config.set({
frameworks: ['jasmine'],
mime: { 'text/x-typescript': ['ts','tsx'] },
// if I make this a generic './src/**/*.ts' it seems to freeze up
// without throwing any errors or running any tests, but that seems
// like a separate issue...
files: [
'./src/lib/componentToTest.ts',
'./src/lib/componentToTest.spec.ts'
],
preprocessors: {
'./src/**/*.spec.ts': ['webpack'],
'./src/**/*.ts': ['webpack', 'sourcemap', 'coverage']
},
webpack: {
devtool: "source-map",
module: {
rules: [
{
test: /\.ts?$/,
loader: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: [".ts", ".js"]
}
},
webpackMiddleware: {
quiet: true,
stats: {
colors: true
}
},
// add both "karma-coverage" and "karma-remap-coverage" reporters
reporters: ['progress', 'coverage', 'remap-coverage'],
// save interim raw coverage report in memory
coverageReporter: {
type: 'in-memory'
},
// define where to save final remaped coverage reports
remapCoverageReporter: {
'text-summary': null,
html: './coverage/html',
cobertura: './coverage/cobertura.xml'
},
colors: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: true
});
And finally, I'm launching the tests with a simple Gulp task:
gulp.task('test', function (done) {
new Server({
configFile: __dirname + '/karma.conf.js',
singleRun: true
}, (exitCode) => {
done();
process.exit(exitCode);
}).start();
});
When run, I get an output that seems (mostly) promising:
Chrome 58.0.3029 (Mac OS X 10.12.3): Executed 1 of 2 SUCCESS (0 secs / 0.002 secs)
Chrome 58.0.3029 (Mac OS X 10.12.3): Executed 2 of 2 SUCCESS (0.026 secs / 0.004 secs)
[Error: Could not find source map for: "app/src/lib/componentToTest.ts"]
[Error: Could not find source map for: "app/src/lib/componentToTest.spec.ts"]
========================= Coverage summary =========================
Statements : 43.69% ( 322/737 )
Branches : 15.7% ( 38/242 )
Functions : 35.47% ( 61/172 )
Lines : 44.91% ( 322/717 )
====================================================================
So something is happening! Which makes me feel like I'm close. When I browse to my coverage report in a browser, I see both the .spec.ts file and the .ts file listed (which is again, getting closer) but I'm not quite there for a couple of reasons:
The .spec.ts file is being included in the coverage report. Since this is the test file, I do not want to include it.
Source maps are not being properly generated - this is clear from the errors in the console and also from the inability to browse to the specific file's coverage report.
I do feel like I'm pretty darn close. Is there anything simple that I'm missing or suggestions?
Update:
I realized I was using an older version of Node and thought that may be causing some issues. I upgraded to 6.11.0 and while that didn't solve anything, it did provide slightly more context:
The errors are being reported by remap-istanbul (no surprise there, really):
CoverageTransformer.addFileCoverage (/app/node_modules/remap-istanbul/lib/CoverageTransformer.js:148:17)
I am using karma-remap-coverage#0.1.4 which uses remap-istanbul#0.8.4 - it seems like there have been issues with remap-istanbul in the past, but not at the version I'm using.
Also using Webpack 2.6.1 and TypeScript 2.3.2

Well, after several days of trying different things, I've finally found a solution that works. I'm not sure specifically what was causing the issue in my first post, but here's where I've ended up. This may be helpful for someone else looking for a really simple TypeScript, Karma, Jasmine, Webpack (with coverage) setup.
My file structure and spec file stayed the same.
My tsconfig.json updated to:
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"noImplicitAny": false,
"inlineSourceMap": true, // this line
"sourceMap": false, // and this one
"experimentalDecorators": true,
"lib": ["es6", "dom"]
},
"exclude": [
"node_modules"
]
}
I switched to using the awesome-typescript-loader instead of ts-loader.
And finally, my karma.conf.js file now looks like:
module.exports = config => config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
frameworks: ['jasmine'],
mime: { 'text/x-typescript': ['ts','tsx'] },
files: [
'node_modules/angular/angular.min.js',
'./src/**/*.ts'
],
preprocessors: {
'./src/**/*.ts': ['webpack']
},
webpack: {
devtool: 'inline-source-map',
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
loader: 'source-map-loader',
exclude: [
'node_modules',
/\.spec\.ts$/
]
},
{
test: /\.ts?$/,
use: [
{
loader: 'awesome-typescript-loader',
query: {
/**
* Use inline sourcemaps for "karma-remap-coverage" reporter
*/
sourceMap: false,
inlineSourceMap: true,
compilerOptions: {
removeComments: true
}
},
}
]
},
{
enforce: 'post',
test: /\.(js|ts)$/,
loader: 'istanbul-instrumenter-loader',
exclude: [
/node_modules/,
/\.spec\.ts$/
]
},
{ test: /\.html$/, loader: 'html-loader' }
]
},
resolve: {
extensions: [".ts", ".js", ".html"]
},
externals: {
angular: "angular"
}
},
webpackMiddleware: {
quiet: true,
stats: {
colors: true
}
},
// add both "karma-coverage" and "karma-remap-coverage" reporters
reporters: ['progress', 'coverage', 'remap-coverage'],
// save interim raw coverage report in memory
coverageReporter: {
type: 'in-memory'
},
// define where to save final remaped coverage reports
remapCoverageReporter: {
'text-summary': null,
html: './coverage/html',
cobertura: './coverage/cobertura.xml'
},
colors: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: true
});
Final package versions include:
node 4.2.6 (I was also able to get this to work with a newer version of node, but need to be here for other reasons)
awesome-typescript-loader 3.1.2
istanbul-instrumenter-loader 2.0.0
jasmine-core 2.5.2
karma 1.6.0
karma-chrome-launcher 2.0.0
karma-coverage 1.1.1
karma-jasmine 1.1.0
karma-remap-coverage 0.1.4
karma-webpack 2.0.3
typescript 2.3.2
webpack 2.6.1
Now my tests run, there are no errors in the console, and I have a coverage report of the original TypeScript files!
Lots of credit to the folks who put this together (it ended up guiding quite a bit of my final solution): https://github.com/AngularClass/angular-starter/tree/master/config