Debug & Exécuter Angular2 Tapuscrit avec le Code de Visual Studio?

Après beaucoup de recherches, j'ai trouvé ces étapes-

Avant de commencer, assurez-vous d'avoir la dernière version de VS code. Vous pouvez vérifier la version la plus récente – Aide > Vérifier les Mises à jour ou Environ.

1. Installer une extension appelée "Débogueur pour "Chrome". Une fois l'installation terminée, redémarrez VS code.

2. Aller à la fenêtre de Débogage, ouvrez le lancement.json à l'aide de Chrome.

3. Dans Le Lancement.json section de configuration, d'utilisation ci-dessous config

   {
       "name": "Launch localhost with sourcemaps",
       "type": "chrome",
       "request": "launch",
       "url": "http://localhost:3000/Welcome",
       "sourceMaps": true,
       "webRoot": "${workspaceRoot}"
   }
   

4. Dans le tsconfig.json, assurez-vous que vous avez "sourceMap": true

Cela complète de votre environnement de débogage paramètres.
Maintenant, avant de démarrer le débogage, assurez-vous que tous vos Chrome.exe les instances sont fermés. Vérifiez dans le Gestionnaire des Tâches OU DOS de l'Utilisation de la commande "killall " chrome"

1. Exécuter votre projet, à l'aide de mnp commande de démarrage et google Chrome comme navigateur par défaut.

2. Une fois que l'application est exécutée avec succès, vous recevrez un numéro de port. Copiez l'URL à partir du navigateur chrome et coller l'url de l'article ci-dessus.
   (REMARQUE: Si vous utilisez le routage dans votre application, puis l'url comme ci-dessus, sinon ça sera la fin index.html etc)

3. Maintenant, placer des points d'arrêt où vous le souhaitez dans votre fichier d'enregistrement des fichiers.

4. Encore une fois, allez à la fenêtre de débogage dans VS code, et cliquer sur Exécuter.
   Votre onglet/instance connecté à débogueur regarde comme ci-dessous.

J'ai eu un problème similaire mais mon projet a également inclus webpack qui a causé les solutions ci-dessus à l'échec. Après la traversée de l'Internet, j'ai trouvé une solution dans un thread sur github:

https://github.com/AngularClass/angular2-webpack-starter/issues/144#issuecomment-218721972

De toute façon, c'est ce qui a été fait.

Remarque:- Avant de commencer, vous devez vérifier que vous avez la dernière version de code de visual studio et également avoir installé l'extension appelée " Débogueur pour Chrome " dans VS Code.

Tout d'abord, dans". /config/webpack.dev.js'

• utilisation => outil développeur d'internet explorer: 'source-map"
• au lieu de => outil développeur d'internet explorer: pas cher-module-source-map"

Puis d'installer et d'utiliser l'écriture de fichiers webpack-plugin:

• npm install --enregistrer l'écriture de fichiers webpack-plugin

Ajouter le plugin './config/webpack.dev.js " en ajoutant:

• const WriteFilePlugin = require('write-fichier-webpack-plugin');

sous le Webpack Plugins en haut. Continuer à ajouter:

• nouveau WriteFilePlugin()

à la liste des plugins après le nouveau DefinePlugin(), j'.e

plugins:[
    new DefinePlugin({....}),
    new WriteFilePlugin(),
    ....
]

Cela garantit que la source des cartes sont écrites sur le disque

Enfin, mon lancement.json est donnée ci-dessous.

{
    "version": "0.2.0",
    "configurations": [{
        "name": "Launch Chrome against localhost, with sourcemaps",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:3000/",
        "runtimeArgs": [
           "--user-data-dir",
           "--remote-debugging-port=9222"
        ],
        "sourceMaps": true,
        "diagnosticLogging": true,
        "webRoot": "${workspaceRoot}",
        "userDataDir": "${workspaceRoot}/.vscode/chrome"
    },
    {
        "name": "Attach to Chrome, with sourcemaps",
        "type": "chrome",
        "request": "attach",
        "url": "http://localhost:3000/",
        "port": 9222,
        "sourceMaps": true,
        "diagnosticLogging": true,
        "webRoot": "${workspaceRoot}"
    }]
}

avis l'absence de '/dist/" dans la racine de votre site. avec cette config, source-les cartes sont en ./dist/, mais ils pointent ./src/. vscode ajoute l'absolu de la racine de l'espace de travail, et correctement résout le fichier.

J'ai eu des problèmes avec cela et tout @Sankets réponse aidé c'était ce problème résolu pour moi https://github.com/angular/angular-cli/issues/2453.

Spécifiquement l'ajout de la ci-dessous pour lancer.json

"sourceMapPathOverrides": {
    "webpack:///c:/foo/bar/angular-project/*": "${workspaceRoot}/*"
}

Ces mods pour launch.json a fonctionné pour moi sur MacOS, ce qui m'a permis d'obtenir le débogueur & les points d'arrêt de travail dans une nouvelle instance de Chrome par session de débogage...

//This forces chrome to run a brand new instance, allowing existing
//chrome windows to stay open.
"userDataDir": "${workspaceRoot}/.vscode/chrome",
"webRoot": "${workspaceRoot}",
"sourceMaps": true,
"sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }

J'ai besoin d'utiliser CORS donc j'ouvre chrome en ayant désactivé la sécurité sur le web. Puis-je faire de débogage Angulaire de la demande en joignant débogueur de chrome.

Ligne de CMD pour lancer chrome handicapés, sécurité web:

cd "C:\Program Files (x86)\Google\Chrome\Application\"
chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security --remote-debugging-port=9222

launch.json fichier pour attacher le débogueur:

{
    //Use IntelliSense to learn about possible attributes.
    //Hover to view descriptions of existing attributes.
    //For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceFolder}"
        },
    ]
}