6

Source maps are showing up in the JavaScript bundleIE11 Açısal-CLI kaynak Eğik-CLI 1.0 ve 4 Eğik Kullanma

ç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" 
    ] 
} 
+0

Sadece bir önsezim var, ama // # ile bu satır küçültülebilir, ilerleyen küçültülmüş içerik hatalara neden olan bir satırı paylaşır. Örneğin -> // # işte bu dosyanın sonunun var thisVarsNowInTheCommentButFromAnotherFile var .. –

+0

Bu iyi bir düşünce, ama burada olanların olduğunu sanmıyorum. Bu ekran görüntüsü, uygulamayı çalıştırırken hata ayıklayıcıdan geliyor ve zaten paketlenmiş dosyayı son (dev) biçiminde gösteriyor. Prod için derlerken bir sorun olabilir. – Jolleyboy

+0

@Jolleyboy problemi çözebildin mi? Benzer konfigürasyonum var ve kaynak haritaları çalışmayı bıraktı. Chrome çalışıyor, IE değil. Teşekkürler. –

cevap

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.

    +0

    [What 'ng eject' 'den bahsetmek yararlı olabilir (yani, ** CLI'yi iptal eder **)] (https://github.com/angular/angular-cli/issues/6302#issuecomment-301225384) aşina olmayanlar ve onu bir terminale kopyalayıp yapıştırın, çalıştırın ve hemen çıldırın. – msanford

    +1

    @msanford iyi çağrı – Jolleyboy