No Angular source maps in Karma DEBUG RUNNER

Question

Since recently upgrading to the latest angular-cli and angular, I no longer see source-maps in the Chrome Karma debug runner.

Having done a bit of research I came across the ng test --sourcemaps=true option but that has made no difference, there is no webpack:// folder like there used to be in the chrome debug tools source tab.

ng -v log:

@angular/cli: 1.1.3
node: 6.9.4
os: win32 x64
@angular/animations: 4.2.4
@angular/common: 4.2.4
@angular/compiler: 4.2.4
@angular/core: 4.2.4
@angular/forms: 4.2.4
@angular/http: 4.2.4
@angular/platform-browser: 4.2.4
@angular/platform-browser-dynamic: 4.2.4
@angular/router: 4.2.4
@angular/cli: 1.1.3
@angular/compiler-cli: 4.2.4
@angular/language-service: 4.2.4

karma.conf:

module.exports = function (config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine', '@angular/cli'],
        plugins: [
            require('karma-jasmine'),
            require('karma-chrome-launcher'),
            require('karma-jasmine-html-reporter'),
            //require('karma-coverage-istanbul-reporter'),
            require('@angular/cli/plugins/karma')
        ],
        client: {
            clearContext: false // leave Jasmine Spec Runner output visible in browser
        },
        // coverageIstanbulReporter: {
        //     reports: ['html', 'lcovonly'],
        //     fixWebpackSourcePaths: true
        // },
        angularCli: {
            environment: 'dev'
        },
        reporters: ['progress', 'kjhtml'],
        port: 9876,
        colors: true,
        browsers: ['Chrome'],
        logLevel: config.LOG_DEBUG,
        autoWatch: true,
        singleRun: false,
        sourceMaps: true,
        captureTimeout: 25000,
        browserDisconnectTolerance: 3, //this one helps
        browserDisconnectTimeout: 25000,
        browserNoActivityTimeout: 25000,
        skipFiles: [
            "node_modules/**/*"
        ],
        webRoot: "${workspaceRoot}"
    });
};

It looks like it's the cli. try installing `@angular/cli: 1.1.0` and see if that helps. If thats the case, look for or create an issue on the anglur/cli repo — kodeaben, Jun 26 '17 at 12:45

Taras Shpek · Answer 1 · 2017-07-17T06:47:40.783

As @jenson-button-event said this bug has been already fixed, but seems like the latest @angular/cli 1.2.1 version has not include the fix yet.

So my temporal workaround is:

Go to YOUR_PROJECT/node_modules/@angular/cli/models/

Open common.js and remove the following block of code:

if (buildOptions.sourcemaps) {
  extraPlugins.push(new webpack.SourceMapDevToolPlugin({
    filename: '[file].map[query]',
    moduleFilenameTemplate: '[resource-path]',
    fallbackModuleFilenameTemplate: '[resource-path]?[hash]',
    sourceRoot: 'webpack:///'
  }));
}

Open browser.js and insert the removed code above just before return keyword (line #37)

                        || module.resource.startsWith(realNodeModules));
        }
    }));
}
//START !!!
if (buildOptions.sourcemaps) {
  extraPlugins.push(new webpack.SourceMapDevToolPlugin({
    filename: '[file].map[query]',
    moduleFilenameTemplate: '[resource-path]',
    fallbackModuleFilenameTemplate: '[resource-path]?[hash]',
    sourceRoot: 'webpack:///'
  }));
}
//END !!!
return {
    plugins: [
        new HtmlWebpackPlugin({

The other solution is to downgrade to the previous angular-cli version (as I read this bug started to reproduce from 1.0.6) but it was not suitable for me because of a lot compilation errors that I got after the downgrade.

jenson-button-event · Accepted Answer · 2017-07-16T17:41:37.477

0

This has been fixed see https://github.com/angular/angular-cli/pull/6862 in the latest angular-cli build

edited Jul 16 '17 at 17:41

answered Jul 06 '17 at 06:16

jenson-button-event

18,101
11
89
155

No Angular source maps in Karma DEBUG RUNNER

2 Answers2