typescript - IE11 Angular-CLI kildekart fungerer ikke

Ved bruk av Angular-CLI 1.0 og Angular 4, klarer jeg ikke å få kildekart (source maps) til å fungere til tross for at jeg har //# sourceMappingURL=main.bundle.js.map i den bundlede JavaScript-filen. Vet noen om en løsning for å få kildekartene til å fungere i IE-11? Normalt sett ville ikke dette vært et stort problem, jeg ville bare byttet til Firefox eller Chrome. Men jeg utvikler et Excel-tillegg med Office-js API, og det bruker en innebygd IE11-nettleser for å vise tillegget, så jeg er sittende fast med det.

Min 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"
  ]
}

Svar #1

Problemet var at det var flere //#sourceMappingURL-kommentarer i de sammenslåtte filene. For å fikse dette, kan du bruke source-map-loader for Webpack for å hente ut disse kommentarene og gi dem til webpack devtool for å lage en hoved-source-map-fil. Denne linken plasseres deretter på slutten av bunten. Nå er det bare én //#sourceMappingURL-kommentar i filen, slik IE11 forventer, og alt fungerer glimrende.

Slik gjorde jeg det:

  1. Jeg har ejet fra Angular-CLI Advarsel, dette kaster deg ut av Angular-CLI, noe som gjør deg ansvarlig for å håndtere din egen webpack-konfigurasjon, blant andre ting. Dette er irreversibelt. ng eject
  2. npm install source-map-loader
  3. Jeg redigerte webpack-konfigurasjonen min for å legge til dette:
{
  //...
  devtool: 'inline-source-map',
  module: {
    rules: [
      //...
      {
        test: /\.js$/,
        use: ["source-map-loader"],
        exclude: [/node_modules/],
        enforce: "post"
      }
    ]
  }
}

Med denne oppsettet kan jeg bruke brytepunkter i F12-verktøyene ved å bruke sourcemaps.

Hvis du vil gå ett skritt videre og forbedre stacktraces (som Chrome gjør), kan du bruke stacktrace.js for å lage frames og oversette dem med sourcemaps. Dette var litt tungvint, og løsningen er for lang til å legge ut her

Relaterte artikler