Depurar y ejecutar Angular2 Typescript con código de Visual Studio?

Depurar y ejecutar Angular2 Typescript con código de Visual Studio?

Estoy intentando depurar la aplicación de texto typescript 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 ‘Debugger for Chrome’. Una vez que se complete la instalación, reinicie el código VS.

    2. Ir a la ventana de depuración, abra launch.json usando Chrome.

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

      { "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 la depuración, asegúrese de que todas las instancias de Chrome.exe existentes estén cerradas. Verificar desde el Administrador de tareas O usar el comando DOS ‘killall chrome’

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

    2. Una vez que la aplicación se ejecuta con éxito, recibirá el número de puerto. Copie la URL del navegador Chrome y pegue en la sección url anterior. (NOTA: Si está utilizando el enrutamiento en su aplicación, la URL le gustaría más arriba; de lo contrario, terminará index.html, etc.)

    3. Ahora, coloque puntos de interrupción donde desee en sus archivos de mecanografía.

    4. Una vez más, 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.

    Depuración de Chrome

    Especifique un userDataDir: esto evitará colisiones con otras instancias de Chrome que posiblemente ya tenga en ejecución. Me di cuenta de que, debido a esto, Chrome simplemente deja de escuchar en cualquier puerto que especifiques. Debajo está 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 con el objective: conectar ECONNREFUSED

    Estaba teniendo un problema similar, pero mi proyecto también incluía un paquete web que hacía que fallaran las soluciones anteriores. 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 visual studio y también ha instalado la extensión llamada ‘ Debugger for Chrome ‘ dentro del código VS.

    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 los complementos de Webpack en la parte superior. Continúa agregando:

    • nuevo WriteFilePlugin ()

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

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

    Esto asegura que los mapas de origen se escriben en el disco

    Finalmente, mi launch.json se da 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 la raíz web. con esta configuración, los mapas fuente están en ./dist/, pero apuntan a ./src/. vscode especifica la raíz absoluta en el espacio de trabajo y resuelve el archivo correctamente.

    Aquí hay una documentación oficial del código de estudio visual 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ás varias extensiones que hacen referencia a Chrome. Presione el botón Instalar para Debugger for Chrome. El botón cambiará a Instalación y luego, después de completar la instalación, cambiará a Recargar. Presione Recargar para reiniciar el Código VS 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 @Sankets contestó, me ayudó a solucionar este problema https://github.com/angular/angular-cli/issues/2453 .

    Específicamente, agregue lo siguiente para launch.json

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

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

    Estos mods para launch.json funcionaron para mí en MacOS, lo que me permitió hacer funcionar el depurador y los puntos de interrupción 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 es probado y probado –

    Paso 1: Instale el depurador de Chrome: simplemente abra la Paleta de comandos (Ctrl + Shift + P) dentro del Código VS 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. A continuación, creará un archivo de configuración de inicio.

    [Más detalles del Paso 1]

    Paso 2: crea y actualiza el archivo launch.json: dos ejemplos de configuración de launch.json con “solicitud”: “lanzamiento”. Debes especificar el archivo o la url para iniciar Chrome contra un archivo local o una url. Si usa una url, establezca webRoot en el directorio desde el que se sirven los archivos. Puede ser una ruta absoluta o una ruta usando $ {workspaceRoot} (la carpeta se abre en Código). webRoot se usa para resolver URL (como ” http: //localhost/app.js “) a un archivo en el disco (como “/Users/me/project/app.js”), así que tenga cuidado de que esté configurado correctamente. actualiza 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 para abrir Chrome con seguridad web desactivada. Luego hago la depuración de la aplicación angular adjuntando el depurador a Chrome.

    Línea CMD para lanzar 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 

    archivo launch.json para adjuntar depuración:

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