使用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制作帧并使用源图将其翻译.这有点痛苦,解决方案太长了,无法在此发布
