IE11 Angular -CLI Source Cards Not Working

Question

Using Angular -CLI 1.0 and Angular 4, I cannot get the source maps, despite the presence //# sourceMappingURL=main.bundle.js.mapin the associated JavaScript. Does anyone know how to work to get the source files working in IE-11? Normally this would not be a big problem, I would just switch to firefox or chrome. But I'm developing an Excel add-in with Office-js api, and it uses the IE11 built-in browser to display the add-in, so I am 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

, //#sourceMappingURL. , source-map-loader Webpack, webpack devtool, . . //#sourceMappingURL, IE11, .

:

• Angular -CLI , Angular -CLI, , , webpack. . ng eject
• npm install source-map-loader
• webpack, :

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

F12, .

(, Chrome), stacktrace.js . , .