IE11 Açısal-CLI kaynak Eğik-CLI 1.0 ve 4 Eğik Kullanma

Question

çalışmıyor haritaları, ben kaynak haritaları birlikte JavaScript //# sourceMappingURL=main.bundle.js.map olmasına rağmen çalışma alamıyor. IE-11'de çalışan sourcemaps'ları almak için etrafta bir çalışma bilen var mı? Normalde bu çok büyük bir sorun olmaz, sadece firefox veya chrom'a geçebilirdim. Ancak, Office-js api ile bir Excel eklentisi geliştiriyorum ve eklentiyi görüntülemek için yerleşik bir IE11 tarayıcısı kullanıyor, bu yüzden ona takılıyorum.

Benim 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

konu paketlenmiş dosyaları birden fazla //#sourceMappingURL yorumlar var idi. Bunu düzeltmek için, bir ana kaynak-harita dosyası oluşturmak amacıyla bu yorumları ayıklamak ve bunları web paketi devtoolüne beslemek için WebPaket için source-map-loader'u kullanabilirsiniz. Bu daha sonra paketin sonunda bağlanır. Artık IE11'in beklediği gibi dosyada sadece bir tane //#sourceMappingURL yorumu var ve işler hızla çalışıyor. İşte

nasıl yaptığımı geçerli:

1. I ejected from the Angular-CLIUyarı: Bu diğer şeyler arasında, kendi webpack yapılandırma yönetmek sen sorumlusun, Açısal-CLI dışına atar. Bu geri dönüşümsüz. Ben sourcemaps kullanarak, F12 araçları kesme noktaları kullanmak mümkün, bu kurulumla

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

:

npm install source-map-loader

ng eject

Bunu eklemek için benim webpack yapılandırması düzenlenebilir.

Bir adım daha ileri gitmek ve (Chrome'un yaptığı gibi) yığınlarınızı geliştirmek istiyorsanız, çerçeveler oluşturmak ve bunları sourcemaps ile çevirmek için stacktrace.js kullanabilirsiniz. Bu biraz acı vericiydi ve çözüm burada yayınlamak için çok uzun.