typescript – IE11 Angular-CLI源映射不起作用

发布时间：2020-12-17 18:10:21 所属栏目：安全来源：网络整理

导读：使用Angular-CLI 1.0和Angular 4,尽管在捆绑的JavaScript中有// sourceMappingURL = main.bundle.js.map,但我无法获得源映射.有没有人知道如何让源图在IE-11中运行？通常这不是一个大问题,我只是切换到firefox或chrome.但我正在使用Office-js api开发一个Exc

Source maps are showing up in the JavaScript bundle

使用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"
  ]
}

解决方法

问题是捆绑文件中有多个//#sourceMappingURL注释.要解决此问题,您可以使用 source-map-loader for Webpack提取这些注释并将它们提供给webpack devtool,以便创建主源映射文件.然后在捆绑的末尾链接.现在文件中只有一个//#sourceMappingURL注释,就像IE11所期望的那样,并且工作顺利进行.

我是这样做的：

> I ejected from the Angular-CLI警告,这会让你退出Angular-CLI,让你负责管理你自己的webpack配置等等.这是不可逆转的.
ng弹出
> 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制作帧并使用源图将其翻译.这有点痛苦,解决方案太长了,无法在此发布

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!