IE11角度-CLIソースは角度-CLI 1.0と4角を使用して

Question

を働いていないマップ、私はソースマップが同梱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のコメントがあったということでした。この問題を解決するには、Webpackのsource-map-loaderを使用してコメントを抽出し、webpack devtoolにフィードして、マスターソースマップファイルを作成します。これは、バンドルの最後にリンクされます。 IE11が予期しているように、ファイルに//#sourceMappingURLのコメントが1つだけあり、物事はうまく機能します。ここで

が、私はそれをやった方法です：

1. I ejected from the Angular-CLI警告、これはとりわけ、あなた自身のWebPACKの設定を管理するための、あなたが責任を作り、角度-CLIのあなたを蹴ります。これは不可逆的です。私はsourcemapsを使用して、F12ツールにブレークポイントを使用することができるよ、この設定で

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

：

npm install source-map-loader

ng eject

私はこれを追加するために、私のWebPACKの設定を編集しました。

さらに進んでスタックトレースを改善したい場合（Chromeのように）、stacktrace.jsを使用してフレームを作成し、ソースマップでそれらを変換することができます。これはちょっとした痛みでしたが、解決策が長すぎてここに投稿できません