IE11 Angular-CLI源映射不起作用

Question

使用Angular-CLI 1.0和Angular 4,尽管已经//# sourceMappingURL=main.bundle.js.map捆绑了JavaScript ,但我无法获得源映射.有没有人知道如何让源图在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捆绑文件中有多个注释。要解决此问题，您可以使用Webpack 的source-map-loader来提取这些注释并将其提供给 webpack 开发工具，以便创建主源映射文件。然后将其链接到捆绑包的末尾。//#sourceMappingURL现在，正如 IE11 所期望的那样，文件中只有一条注释，一切进展顺利。

我是这样做的：

1. 我从 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来制作框架并使用源映射来翻译它们。这有点痛苦，解决方案太长，无法在这里发布