¿Depurar y ejecutar Angular2 Typecript con Visual Studio Code?

¿Depurar y ejecutar Angular2 Typecript con Visual Studio Code?

Estoy tratando de depurar la aplicación de mecanografía Angular2 con el código VS https://angular.io/guide/quickstart

¿Alguien puede compartir los pasos para depurar y ejecutar desde el código VS?

Después de mucha investigación, encontré estos pasos:

Antes de comenzar, asegúrese de tener la última versión del código VS. Puede verificar la última versión: Ayuda> Buscar actualizaciones o Acerca de.

1. Instale la extensión llamada 'Depurador para Chrome'. Una vez que se complete la instalación, reinicie el código VS.

2. Vaya a la ventana Depurar, abra launch.json usando Chrome.

3. En la sección de configuración de Launch.json, use la siguiente configuración

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

4. En tsconfig.json, asegúrese de tener "sourceMap": true

Esto completa la configuración del entorno de depuración. Ahora, antes de comenzar a depurar, asegúrese de que todas sus instancias de Chrome.exe existentes estén cerradas. Verifique desde el Administrador de tareas O use el comando de DOS 'killall chrome'

5. Ejecute su proyecto, usando el comando npm start y Chrome como navegador predeterminado.

6. Una vez que la aplicación se haya ejecutado correctamente, recibirá el número de puerto. Copie la URL del navegador Chrome y péguela en la sección de URL de arriba. (NOTA: Si está utilizando el enrutamiento en su aplicación, entonces la URL le gustaría arriba, de lo contrario terminará index.html, etc.)

7. Ahora, coloque los puntos de interrupción donde desee en sus archivos mecanografiados.

8. Nuevamente, vaya a la ventana de depuración en el código VS y presione Ejecutar. Su pestaña / instancia conectada al depurador se verá a continuación.

Especifique un userDataDir: esto evitará colisiones con otras instancias de Chrome que ya tenga en ejecución. He notado que debido a esto, Chrome simplemente deja de escuchar en cualquier puerto que especifique. ¡A continuación se muestra lo que uso y es genial!

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

Gracias a @reecebradley - GitHub: No se puede conectar al objetivo: conecte ECONNREFUSED

Tenía un problema similar, pero mi proyecto también incluía un paquete web que causaba que las soluciones anteriores fallaran. Después de atravesar Internet, encontré una solución en un hilo en github:

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

De todos modos, esto es lo que se hizo.

Nota: - Antes de comenzar, debe verificar si tiene la última versión del código de Visual Studio y también ha instalado la extensión llamada ' Debugger for Chrome ' dentro de VS Code.

En primer lugar, en './config/webpack.dev.js'

• use => devtool: 'source-map'
• en lugar de => devtool: 'cheap-module-source-map'

Luego instale y use el plugin write-file-webpack-plugin:

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

Agregue el complemento a './config/webpack.dev.js' agregando:

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

debajo de Webpack Plugins en la parte superior. Continuar agregando:

• nuevo WriteFilePlugin ()

a la lista de complementos después del nuevo DefinePlugin (), es decir

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

Esto asegura que los mapas de origen se escriban en el disco.

Finalmente, mi launch.json se muestra a continuación.

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

observe la ausencia de '/ dist /' en webroot. con esta configuración, los mapas de origen están en ./dist/, pero apuntan a ./src/. vscode antepone la raíz absoluta al espacio de trabajo y resuelve correctamente el archivo.

Aquí hay una documentación oficial del código de Visual Studio sobre cómo depurar Angular en VSCode https://code.visualstudio.com/docs/nodejs/angular-tutorial#_configure-the-chrome-debugger

Para depurar el código angular del lado del cliente, necesitaremos instalar la extensión Debugger for Chrome. Abra la vista Extensiones (Ctrl + Shift + X) y escriba 'chrome` en el cuadro de búsqueda. Verá varias extensiones que hacen referencia a Chrome. Presione el botón Instalar para Debugger para Chrome. El botón cambiará a Instalando y luego, después de completar la instalación, cambiará a Recargar. Presione Recargar para reiniciar VS Code y activar la extensión.

Necesitamos configurar inicialmente el depurador. Para hacerlo, vaya a la vista Depurar (Ctrl + Shift + D) y haga clic en el botón de engranaje para crear un archivo de configuración del depurador launch.json. Elija Chrome en el menú desplegable Seleccionar entorno. Esto creará un archivo launch.json en una nueva carpeta .vscode en su proyecto que incluye la configuración tanto para iniciar el sitio web como para adjuntarlo a una instancia en ejecución. Necesitamos hacer un cambio para nuestro ejemplo: cambiar el puerto de 8080 a 4200.

Tuve problemas con esto y, aunque la respuesta de @Sankets ayudó, fue este problema el que me resolvió https://github.com/angular/angular-cli/issues/2453 .

Específicamente agregando lo siguiente a launch.json

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

Para semilla angular:

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

Estas modificaciones launch.jsonme funcionaron en MacOS, lo que me permitió hacer que el depurador y los puntos de interrupción funcionaran en una nueva instancia de Chrome por sesión de depuración ...

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

Este está probado y probado:

Paso 1: Instale el depurador de Chrome: simplemente abra la paleta de comandos (Ctrl + Shift + P) dentro de VS Code y escriba Extensiones: comando Instalar extensión. Cuando aparezca la lista de extensiones, escriba 'chrome' para filtrar la lista e instalar la extensión Debugger for Chrome. Luego, creará un archivo de configuración de lanzamiento.

[Más detalles del paso 1]

Paso 2: Cree y actualice el archivo launch.json: Dos configuraciones de launch.json de ejemplo con "request": "launch". Debe especificar un archivo o una URL para iniciar Chrome en un archivo local o una URL. Si usa una URL, configure webRoot en el directorio desde el que se sirven los archivos. Esta puede ser una ruta absoluta o una ruta usando $ {workspaceRoot} (la carpeta abierta en Code). webRoot se usa para resolver URL (como " http: //localhost/app.js ") en un archivo en el disco (como "/Users/me/project/app.js"), así que tenga cuidado de que esté configurado correctamente. actualice el contenido del archivo launch.json de la siguiente manera:

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

[Más detalles del paso 2]

Necesito usar CORS así que abro Chrome con la seguridad web deshabilitada. Luego hago la depuración de la aplicación Angular adjuntando el depurador a Chrome.

Línea CMD para iniciar Chrome con seguridad web desactivada:

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 archivo para adjuntar el depurador:

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

La respuesta de Sanket fue correcta pero tuve algunos problemas con eso.

Primero, Launch.json está en el directorio ".vscode" del proyecto, y segundo, el número de puerto debe ser el mismo que el puerto del servidor predeterminado que usas para iniciar tu aplicación. Utilizo ng serve de cmd para iniciar mi proyecto y el número de puerto predeterminado era 4200 , así que cambié el archivo launch.json de la siguiente manera.

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