IE11 Angular-CLI源映射不起作用

Question

使用Angular-CLI 1.0和Angular 4，尽管在捆绑的JavaScript中使用了//# sourceMappingURL=main.bundle.js.map，但我无法获得源映射。有没有人知道如何让源图在IE-11中运行？通常这不是一个大问题，我只是切换到firefox或chrome。但我正在使用Office-js api开发一个Excel加载项，它使用嵌入式IE11浏览器来显示加载项，所以我坚持使用它。

我的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 for Webpack来提取这些注释并将它们提供给webpack devtool，以便创建主源映射文件。然后在捆绑的末尾链接。现在文件中只有一个//#sourceMappingURL注释，就像IE11所期望的那样，事情可以顺利进行。

我是这样做的：

1. I ejected from the Angular-CLI警告，这会让你退出Angular-CLI，让你负责管理你自己的webpack配置等等。这是不可逆转的。 ng eject
2. npm install source-map-loader
3. 我编辑了我的webpack配置来添加：

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

通过此设置，我可以使用源图在F12工具中使用断点。

如果你想更进一步改善你的堆栈跟踪（比如Chrome），你可以使用stacktrace.js制作帧并用源图转换它们。这有点痛苦，解决方案太长了，无法在此发布