IE11 कोणीय-CLI स्रोत से काम नहीं कर नक्शे

Question

कोणीय-CLI 1.0 और कोणीय 4 का उपयोग करना, मैं स्रोत नक्शे बंडल जावास्क्रिप्ट में //# sourceMappingURL=main.bundle.js.map होने के बावजूद काम कर पाने में असमर्थ हूँ। क्या कोई आईई -11 में काम कर रहे स्रोतों को प्राप्त करने के लिए आसपास के काम को जानता है? आम तौर पर यह एक बड़ा मुद्दा नहीं होगा, मैं सिर्फ फ़ायरफ़ॉक्स या क्रोम पर स्विच करूंगा। लेकिन मैं Office-js api के साथ एक एक्सेल ऐड-इन विकसित कर रहा हूं, और यह ऐड-इन प्रदर्शित करने के लिए एम्बेडेड IE11 ब्राउज़र का उपयोग करता है, इसलिए मैं इसके साथ अटक गया हूं।

मेरे 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

मुद्दा बंडल फ़ाइलों में एक से अधिक //#sourceMappingURL टिप्पणियाँ थीं था। इसे ठीक करने के लिए, आप उन टिप्पणियों को निकालने के लिए वेबपैक के लिए source-map-loader का उपयोग कर सकते हैं और उन्हें मास्टर स्रोत-मानचित्र फ़ाइल बनाने के लिए वेबपैक devtool पर फ़ीड कर सकते हैं। यह तब बंडल के अंत में जुड़ा हुआ है। आईई 11 की अपेक्षा है कि फ़ाइल में केवल //#sourceMappingURL टिप्पणी है, और चीजें तैराकी से काम करती हैं।

यहाँ है कैसे मैंने किया:

1. I ejected from the Angular-CLIचेतावनी, यह कोणीय-CLI से बाहर आप किक, आप अपने खुद webpack config प्रबंध, अन्य बातों के अलावा के लिए जिम्मेदार बना रही है। यह अपरिवर्तनीय है। ng eject
2. npm install source-map-loader
3. मैं इस जोड़ने के लिए मेरी webpack config संपादित:

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

इस स्थापना के साथ, मैं F12 उपकरण में breakpoints उपयोग करने के लिए, sourcemaps का उपयोग कर में सक्षम हूँ।

यदि आप एक कदम आगे बढ़ना चाहते हैं और अपने स्टैकट्रैसेस (क्रोम की तरह) में सुधार करना चाहते हैं तो आप फ्रेम बनाने और स्रोतमैप के साथ अनुवाद करने के लिए stacktrace.js का उपयोग कर सकते हैं। यह दर्द का थोड़ा सा था, और समाधान