nguồn IE11 góc-CLI các bản đồ về không làm việc

Question

Sử dụng góc-CLI 1.0 và góc 4, tôi không thể để có được bản đồ nguồn làm việc mặc dù có //# sourceMappingURL=main.bundle.js.map trong JavaScript kèm. Có ai biết một công việc xung quanh để có được sourcemaps làm việc trong IE-11? Thông thường đây không phải là vấn đề lớn, tôi chỉ chuyển sang firefox hoặc chrome. Nhưng tôi đang phát triển một bổ trợ Excel với api Office-js, và nó sử dụng trình duyệt IE11 được nhúng để hiển thị bổ trợ, vì vậy tôi bị mắc kẹt với nó.

tsconfig.json của tôi:

{ 
    "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

Vấn đề là có nhiều //#sourceMappingURL bình luận trong các tập tin kèm. Để khắc phục điều này, bạn có thể sử dụng source-map-loader cho Webpack để trích xuất các nhận xét đó và đưa chúng vào webpack devtool để tạo tệp bản đồ nguồn chính. Điều này sau đó được liên kết ở cuối gói. Hiện tại, chỉ có một chú thích //#sourceMappingURL trong tệp như IE11 mong đợi và mọi thứ hoạt động hiệu quả.

Sau đây là cách tôi đã làm nó:

1. I ejected from the Angular-CLICảnh báo, đây đá bạn ra khỏi góc-CLI, làm cho bạn trách nhiệm quản lý cấu hình webpack của riêng bạn, trong số những thứ khác. Điều này là không thể đảo ngược. ng eject
2. npm install source-map-loader
3. tôi sửa cấu hình webpack của tôi để thêm video này:

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

Với thiết lập này, tôi có thể sử dụng breakpoint trong các công cụ F12, sử dụng sourcemaps.

Nếu bạn muốn tiến xa hơn một bước và cải thiện stacktraces của bạn (như Chrome), bạn có thể sử dụng stacktrace.js để tạo khung và dịch chúng bằng các bản đồ nguồn. Đây là một chút đau đớn, và giải pháp quá dài để đăng ở đây