Angular2 Typescript mit Visual Studio Code debuggen und ausführen?

Angular2 Typescript mit Visual Studio Code debuggen und ausführen?

Ich versuche, die Angular2-Typoskriptanwendung mit dem VS-Code https://angular.io/guide/quickstart zu debuggen

Kann jemand bitte Schritte zum Debuggen und Ausführen von VS-Code teilen?

Nach vielen Recherchen fand ich diese Schritte -

Bevor Sie beginnen, stellen Sie sicher, dass Sie über die neueste Version des VS-Codes verfügen. Sie können die neueste Version überprüfen - Hilfe> Nach Updates suchen oder Info.

1. Installieren Sie die Erweiterung "Debugger for Chrome". Starten Sie nach Abschluss der Installation den VS-Code neu.

2. Gehen Sie zum Debug-Fenster und öffnen Sie launch.json mit Chrome.

3. Verwenden Sie im Konfigurationsabschnitt Launch.json die folgende Konfiguration

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

4. Stellen Sie in tsconfig.json sicher, dass Sie "sourceMap": true haben

Damit sind Ihre Einstellungen für die Debug-Umgebung abgeschlossen. Stellen Sie jetzt vor dem Debuggen sicher, dass alle vorhandenen Chrome.exe-Instanzen geschlossen sind. Überprüfen Sie dies im Task-Manager ODER verwenden Sie den DOS-Befehl 'killall chrome'.

5. Führen Sie Ihr Projekt mit dem Befehl npm start und Chrome als Standardbrowser aus.

6. Sobald die Anwendung erfolgreich ausgeführt wurde, erhalten Sie die Portnummer. Kopieren Sie die URL aus dem Chrome-Browser und fügen Sie sie in den obigen URL-Abschnitt ein. (HINWEIS: Wenn Sie Routing in Ihrer Anwendung verwenden, möchte die URL oben, andernfalls wird index.html usw. beendet.)

7. Platzieren Sie nun Haltepunkte in Ihren Typoskriptdateien, wo immer Sie möchten.

8. Gehen Sie erneut zum Debug-Fenster in VS-Code und klicken Sie auf Ausführen. Ihre mit dem Debugger verbundene Registerkarte / Instanz sieht wie folgt aus.

Geben Sie ein userDataDir an. Dadurch werden Kollisionen mit anderen Chrome-Instanzen vermieden, die möglicherweise bereits ausgeführt werden. Ich habe aus diesem Grund festgestellt, dass Chrome auf keinen von Ihnen angegebenen Port mehr hört. Unten ist was ich benutze und es ist großartig!

{
    "name": "Launch",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:3000/#/about",
    "port": 9223,
    "sourceMaps": true,
    "diagnosticLogging": true,
    "webRoot": "${workspaceRoot}",
    "userDataDir": "${workspaceRoot}/out/chrome"
}

Dank an @reecebradley - GitHub: Verbindung zum Ziel kann nicht hergestellt werden: ECONNREFUSED verbinden

Ich hatte ein ähnliches Problem, aber mein Projekt enthielt auch ein Webpack, das dazu führte, dass die oben genannten Lösungen fehlschlugen. Nachdem ich das Internet durchquert hatte, fand ich eine Lösung in einem Thread auf Github:

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

Jedenfalls wurde dies getan.

Hinweis: - Bevor Sie beginnen, müssen Sie überprüfen, ob Sie über die neueste Version von Visual Studio-Code verfügen und die Erweiterung " Debugger für Chrome " in VS Code installiert haben .

Erstens in './config/webpack.dev.js'

• use => devtool: 'source-map'
• anstelle von => devtool: 'cheap-module-source-map'

Dann installieren und verwenden Sie das Write-File-Webpack-Plugin:

• npm install --save write-file-webpack-plugin

Fügen Sie das Plugin zu './config/webpack.dev.js' hinzu, indem Sie Folgendes hinzufügen:

• const WriteFilePlugin = require ('Schreibdatei-Webpack-Plugin');

unter den Webpack Plugins oben. Weiter hinzufügen:

• neues WriteFilePlugin ()

zur Liste der Plugins nach dem neuen neuen DefinePlugin (), dh

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

Dadurch wird sichergestellt, dass die Quellzuordnungen auf die Festplatte geschrieben werden

Schließlich ist meine launch.json unten angegeben.

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

Beachten Sie das Fehlen von '/ dist /' in der Webroot. Mit dieser Konfiguration befinden sich Quell-Maps in ./dist/, zeigen jedoch auf ./src/. vscode stellt dem Arbeitsbereich das absolute Stammverzeichnis voran und löst die Datei korrekt auf.

Hier finden Sie eine offizielle Dokumentation zum Visual Studio-Code zum Debuggen von Angular in VSCode https://code.visualstudio.com/docs/nodejs/angular-tutorial#_configure-the-chrome-debugger

Um den clientseitigen Angular-Code zu debuggen, müssen wir die Erweiterung Debugger for Chrome installieren. Öffnen Sie die Ansicht "Erweiterungen" (Strg + Umschalt + X) und geben Sie "Chrom" in das Suchfeld ein. Sie sehen mehrere Erweiterungen, die auf Chrome verweisen. Klicken Sie auf die Schaltfläche Installieren für Debugger for Chrome. Die Schaltfläche ändert sich in Installieren und nach Abschluss der Installation in Neu laden. Drücken Sie Neu laden, um VS Code neu zu starten und die Erweiterung zu aktivieren.

Wir müssen den Debugger zunächst konfigurieren. Wechseln Sie dazu in die Debug-Ansicht (Strg + Umschalt + D) und klicken Sie auf die Zahnradschaltfläche, um eine Debugger-Konfigurationsdatei für launch.json zu erstellen. Wählen Sie Chrome aus der Dropdown-Liste Umgebung auswählen. Dadurch wird eine launch.json-Datei in einem neuen .vscode-Ordner in Ihrem Projekt erstellt, die die Konfiguration zum Starten der Website oder zum Anhängen an eine laufende Instanz enthält. Für unser Beispiel müssen wir eine Änderung vornehmen: Ändern Sie den Port von 8080 auf 4200.

Ich hatte Probleme damit und während @Sankets Antwort half, war es dieses Problem, das es für mich löste https://github.com/angular/angular-cli/issues/2453 .

Fügen Sie speziell das Folgende zu launch.json hinzu

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

Für eckige Samen:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug with chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:5555",
      "sourceMaps": true,
      "webRoot": "${workspaceRoot}/src/client",
      "userDataDir": "${workspaceRoot}/out/chrome",
      "sourceMapPathOverrides": {
        "app/*": "${webRoot}/app/*"
      }
    }
  ]
}

Diese Mods launch.jsonfunktionierten für mich unter MacOS, wodurch ich den Debugger und die Haltepunkte in einer neuen Instanz von Chrome pro Debug-Sitzung zum Laufen bringen konnte ...

// 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}/*" }

Dieser ist bewährt -

Schritt 1: Chrome-Debugger installieren: Öffnen Sie einfach die Befehlspalette (Strg + Umschalt + P) in VS Code und geben Sie den Befehl Extensions: Install Extension ein. Wenn die Erweiterungsliste angezeigt wird, geben Sie 'chrome' ein, um die Liste zu filtern und die Debugger for Chrome-Erweiterung zu installieren. Anschließend erstellen Sie eine Startkonfigurationsdatei.

[Weitere Details zu Schritt 1]

Schritt 2: Erstellen und aktualisieren Sie die Datei launch.json: Zwei Beispiele für die Konfiguration von launch.json mit "request": "launch". Sie müssen entweder eine Datei oder eine URL angeben, um Chrome für eine lokale Datei oder eine URL zu starten. Wenn Sie eine URL verwenden, setzen Sie webRoot auf das Verzeichnis, aus dem Dateien bereitgestellt werden. Dies kann entweder ein absoluter Pfad oder ein Pfad sein, der $ {workspaceRoot} (den im Code geöffneten Ordner) verwendet. webRoot wird verwendet, um URLs (wie " http: //localhost/app.js ") in eine Datei auf der Festplatte (wie "/Users/me/project/app.js") aufzulösen. Achten Sie also darauf, dass sie richtig eingestellt sind. Aktualisieren Sie den Inhalt der Datei launch.json wie folgt:

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost/some_name",
            "webRoot": "${workspaceRoot}/wwwroot"
        },
        {
            "name": "Launch index.html (disable sourcemaps)",
            "type": "chrome",
            "request": "launch",
            "sourceMaps": false,
            "file": "${workspaceRoot}/index.html"
        },
    ]
}

[Weitere Details zu Schritt 2]

Ich muss verwenden, CORSdamit ich Chrome mit deaktivierter Web-Sicherheit öffne. Dann debugge ich die Angular-Anwendung, indem ich den Debugger an Chrome anhänge.

CMD-Linie zum Starten von Chrome mit deaktivierter Websicherheit:

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 Datei zum Anhängen des Debuggers:

{
    // 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}"
        },
    ]
}

Sankets Antwort war richtig, aber ich hatte einige Probleme damit.

Erstens befindet sich Launch.json im Verzeichnis ".vscode" des Projekts, und zweitens sollte die Portnummer mit dem Standardserverport übereinstimmen, den Sie zum Starten Ihrer App verwenden. Ich verwende ng serve von cmd zum Starten meines Projekts und die Standardportnummer war 4200 , daher habe ich die Datei launch.json wie folgt geändert.

{
    // 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": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "webRoot": "${workspaceFolder}"
        }
    ]
}