बनाम कोड स्रोत मानचित्र के साथ कोणीय क्ली डीबगिंग

Question

नमस्ते मैंने कोणीय-क्ली का उपयोग करके एक ऐप बनाया है और मैं क्रोम एक्सटेंशन के लिए बनाम कोड और डीबगर का उपयोग करके इसे डीबग करने का प्रयास कर रहा हूं। थोड़ी देर के बाद मैं इसे काम करने में सक्षम था, अच्छी तरह से। क्या होता है कि मैं अपने टाइपस्क्रिप्ट क्लास में ब्रेक-पॉइंट सेट कर सकता हूं लेकिन इसे गलत लाइन नंबर पर रखा जाता है जैसे सोर्स मैप गलत है।

डिबग प्रक्रिया - खुला टर्मिनल एनजी

मैं निम्नलिखित है vscode में डिबग टैब पर जाएं और क्लिक करें F5 से सेवा करते हैं: मैं LaunchChrome विन्यास का उपयोग

launch.json

{ 
    "version": "0.2.0", 
    "configurations": [ 
     { 
      "name": "LaunchChrome", 
      "type": "chrome", 
      "request": "launch", 
      "url": "http://localhost:4200", 
      "sourceMaps": true, 
      "webRoot": "${workspaceRoot}", 
      "diagnosticLogging": true, 
      "userDataDir": "${workspaceRoot}/.vscode/chrome", 
      "sourceMapPathOverrides": { 
      "webpack:///C:*": "c:/*" 
     } 
     }, 
     { 
      "name": "AttachChrome", 
      "type": "chrome", 
      "request": "attach", 
      "port": 9222, 
      "sourceMaps": true, 
      "webRoot": "${workspaceRoot}", 
      "diagnosticLogging": true, 
      "sourceMapPathOverrides": { 
       "webpack:///*": "/*" 
      } 
     } 
    ] 
} 

कोणीय-cli.json

{ 
    "project": { 
    "version": "1.0.0-beta.18", 
    "name": "frontend" 
    }, 
    "apps": [ 
    { 
     "root": "src", 
     "outDir": "./dist", 
     "assets": [ 
     "assets", 
     "favicon.ico" 
     ], 
     "index": "index.html", 
     "main": "main.ts", 
     "test": "test.ts", 
     "tsconfig": "tsconfig.json", 
     "prefix": "app", 
     "mobile": false, 
     "styles": [ 
     "styles.css", 
     "../semantic/dist/packaged/semantic.css" 
     ], 
     "scripts": [ 
      "../node_modules/jquery/dist/jquery.js", 
      "../semantic/dist/packaged/semantic.js", 
      "../node_modules/chart.js/dist/Chart.bundle.js" 
     ], 
     "environments": { 
     "source": "environments/environment.ts", 
     "dev": "environments/environment.ts", 
     "prod": "environments/environment.prod.ts" 
     } 
    } 
    ], 
    "addons": [], 
    "packages": [], 
    "e2e": { 
    "protractor": { 
     "config": "./protractor.conf.js" 
    } 
    }, 
    "test": { 
    "karma": { 
     "config": "./karma.conf.js" 
    } 
    }, 
    "defaults": { 
    "styleExt": "css", 
    "prefixInterfaces": false, 
    "inline": { 
     "style": false, 
     "template": false 
    }, 
    "spec": { 
     "class": false, 
     "component": true, 
     "directive": true, 
     "module": false, 
     "pipe": true, 
     "service": true 
    } 
    } 
} 

tsconfig.json

{ 
    "compilerOptions": { 
    "declaration": false, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "lib": ["es6", "dom"], 
    "module": "es6", 
    "moduleResolution": "node", 
    "outDir": "../dist", 
    "sourceMap": true, 
    "target": "es5", 
    "typeRoots": [ 
     "../node_modules/@types" 
    ] 
    } 
} 

Answer 1

मैं कोणीय CLI-beta19-3 और टाइपप्रति 2.0.6 के लिए अद्यतन और क्रोम में कैश साफ़ कर अब यह काम करता है है।

अद्यतन: कोणीय 2.4.1 का उपयोग कर अब

क्या अजीब है कि यह

"sourceMapPathOverrides": { 
    "webpack:///*": "${webRoot}/*" 
} 

यहां बताए गए https://github.com/Microsoft/vscode-chrome-debug

के साथ काम नहीं करता है, लेकिन यह

"sourceMapPathOverrides": { 
    "webpack:///C:*": "c:/*" 
} 

के साथ काम करता है

और लिनु के लिए एक्स के रूप में @carpinchosaurio कहा

"webpack:///*": "/*" 

अद्यतन 2017/02/21:

कोणीय और टाइपप्रति के नए संस्करणों के साथ

अब और स्रोत नक्शा पथ ओवरराइड के लिए कोई जरूरत नहीं है।

"@angular/compiler-cli": "2.4.8", 
"@angular/cli": "1.0.0-beta.32.3", 
"typescript": "2.1.6" 
angular version 2.4.8 

कार्य स्थापना:

{ 
    "version": "0.2.0", 
    "configurations": [ 
    { 
     "name": "LaunchChrome", 
     "type": "chrome", 
     "request": "launch", 
     "url": "http://localhost:4200", 
     "sourceMaps": true, 
     "webRoot": "${workspaceRoot}", 
     "userDataDir": "${workspaceRoot}/.vscode/chrome" 
    } 
    ] 
} 

Answer 2

किसी के लिए अभी भी यह मेरे लिए काम किया रुचि -

{ 
     "name": "Launch localhost with sourcemaps", 
     "type": "chrome", 
     "request": "launch", 
     "url": "http://localhost:4200", 
     "sourceMaps": true, 
     "webRoot": "${workspaceRoot}/src",   
     "userDataDir": "${workspaceRoot}/.vscode/chrome", 
     "sourceMapPathOverrides": {    
      "webpack:///./~/*": "${workspaceRoot}/node_modules/*", 
      "webpack:///./src/*": "${workspaceRoot}/src/*" 
     } 
     // Uncomment this to get diagnostic logs in the console 
     // "diagnosticLogging": true 
    }