IE11 Angular-CLI 源映射不工作

Question

使用 Angular-CLI 1.0 和 Angular 4，尽管捆绑的 JavaScript 中有 //# sourceMappingURL=main.bundle.js.map，但我无法使源映射工作。有谁知道让 sourcemaps 在 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 devtool 以创建主源映射文件。然后将其链接到捆绑包的末尾。现在，文件中只有一个 //#sourceMappingURL 评论，正如 IE11 所期望的那样，一切顺利。

我是这样做的：

I ejected from the 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 制作框架并使用 sourcemaps 翻译它们。这有点麻烦，解决方案太长 post 这里

IE11 Angular-CLI 源映射不工作

IE11 Angular-CLI source maps not working

source-maps

typescript

internet-explorer-11

office-js

angular-cli