IE11 kątowa-CLI źródło mapy nie działa

Question

Korzystanie skośnych CLI 1.0 i kątowe 4, nie jestem w stanie dostać mapy źródłowe pracy pomimo //# sourceMappingURL=main.bundle.js.map w pakiecie JavaScript. Czy ktokolwiek zna się na pracy, aby uzyskać efekty pracy w IE-11? Zwykle nie byłby to wielki problem, po prostu przerzuciłbym się na firefox lub chrome. Ale rozwijam dodatek Excel z api Office-js i używa on wbudowanej przeglądarki IE11 do wyświetlenia dodatku, więc utknąłem z tym.

Moja 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

Problem było to, że było wielu //#sourceMappingURL komentarze w dołączonych plikach. Aby to naprawić, można użyć narzędzia source-map-loader dla pakietu Webpack, aby wyodrębnić te komentarze i podać je do devtoola, aby utworzyć główny plik mapy źródłowej. To jest następnie połączone na końcu pakietu. Teraz w pliku znajduje się tylko jeden komentarz //#sourceMappingURL, a rzeczy działają płynnie.

Oto jak to zrobiłem:

1. I ejected from the Angular-CLIWarning, to kopie cię kątowego-CLI, dzięki czemu można odpowiedzialny za zarządzanie własną WebPACK config, między innymi. To jest nieodwracalne. ng eject
2. npm install source-map-loader
3. edytowany moje WebPACK config dodać to:

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

Przy tej konfiguracji, jestem w stanie wykorzystać punkty przerwania w narzędziach F12, wykorzystując sourcemaps.

Jeśli chcesz pójść o krok dalej i ulepszyć swoje stosy (takie jak Chrome), możesz użyć ramki stacktrace.js, aby tworzyć ramki i tłumaczyć je za pomocą sourcemaps. To było trochę uciążliwe, a rozwiązanie jest zbyt długie, aby opublikować tutaj: