IE11 Angular-CLI source maps not working

Question

Using Angular-CLI 1.0 and Angular 4, I am unable to get source maps working despite having //# sourceMappingURL=main.bundle.js.map in the bundled JavaScript. Does anyone know a work around to get the sourcemaps working in IE-11? Normally this wouldn't be a huge issue, I'd just switch to firefox or chrome. But I'm developing an Excel add-in with the Office-js api, and it uses an embedded IE11 browser to display the add-in, so I'm stuck with it.

My tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "pretty": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
        "es2017",
        "dom"
    ]
  }
}

tsconfig.app.json:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": "",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

Answer 1

The issue was that there were multiple //#sourceMappingURL comments in the bundled files. To fix this, you can use the source-map-loader for Webpack to extract those comments and feed them to the webpack devtool in order to create a master source-map file. This is then linked at the end of the bundle. Now there is only one //#sourceMappingURL comment in the file as IE11 expects, and things work swimmingly.

Here is how I did it:

1. I ejected from the Angular-CLI Warning, this kicks you out of the Angular-CLI, making you responsible for managing your own webpack config, among other things. This is irreversible. ng eject
2. npm install source-map-loader
3. I edited my webpack config to add this:

{
  //...
  devtool: 'inline-source-map',
  module: {
    rules: [
      //...
      {
        test: /\.js$/,
        use: ["source-map-loader"],
        exclude: [/node_modules/],
        enforce: "post"
      }
    ]
  }
}

With this setup, I am able to use breakpoints in the F12 tools, using the sourcemaps.

If you want to go one step further and improve your stacktraces (like Chrome does) you can use stacktrace.js to make frames and translate them with the sourcemaps. This was a bit of a pain, and the solution is too long to post here