intellij idea - studio - ¿Cómo depurar la aplicación angular usando angular-cli webpack?
angular visual studio code (5)
Cómo depurar con angular / cli
La nueva versión angular / cli usa un paquete web que no compila los archivos ts en un directorio local como dist before (hasta beta 1.0.0-beta.10). Ahora usa un enfoque similar a la memoria.
Pero puedes encontrar los archivos ts en las herramientas para desarrolladores de Chrome en la pestaña "Fuentes".
(nueva) Solución para angular/[email protected] y más reciente
Aviso: Esta solución fue probada con la versión 1.0.0-beta.26 y 1.2.1
Aviso: en este ejemplo utilicé el puerto 5321 en lugar de 4200. Solo use su puerto.
Depuración con herramientas de desarrollo de Chrome
Mientras ejecuta ng serve (también se usa en npm start), puede encontrar sus fuentes en la sección Herramientas de desarrollo de Chrome: "webpack: //":
Depuración de la aplicación Angular 2 con angular / cli usando JetBrains IDE
Simplemente edite su configuración de ejecución / depuración en Webstorm / PHPStorm a lo siguiente:
- Establezca su ruta URL remota de su directorio de proyecto en
webpack://. - Establezca su ruta URL remota de su directorio src a la
webpack://./src
(antiguo) Solución para [email protected] - .14
Depuración con herramientas de desarrollo de Chrome
Mientras ejecuta ng serve (también se usa en npm start), puede encontrar sus fuentes en la sección Herramientas de desarrollo de Chrome: "webpack: //":
Depuración de la aplicación Angular 2 con angular-cli @ webpack utilizando JetBrains IDE
Simplemente edite su configuración de ejecución / depuración en Webstorm / PHPStorm a lo siguiente: establezca su ruta URL remota de su directorio de proyecto a
webpack: ////Users/...FULL_PATH .. // en Mac OSX
o
webpack: /// C: /...FULL_PATH .. // ejemplo en Windows
Aviso: en Windows solo necesitas 3 barras, en Mac necesitas 4 barras después de "webpack".
También puede verificar su ruta yendo a http://localhost:4200/main.map y buscar cualquier archivo ".ts". Puede copiar fácilmente la ruta de este archivo y pegarlo en su cuadro de diálogo de configuración IDE.
EDITAR : Quizás necesite mapear la ruta añadiendo "/ src" a su carpeta src también. Gracias @ born2net
Que te diviertas.
Utilicé [email protected] antes y ahora actualicé a angular-cli @ webpack beta.11. Después de muchos cambios personalizados, lo hice funcionar.
Lo único es que ahora no puedo depurar mi aplicación angular usando webstorm y Chrome depugger porque no obtengo ningún archivo ts usando ng serve. Con [email protected] fue muy fácil depurar mi aplicación usando el complemento Jetbrains.
¿Cómo puedo depurar mi aplicación angular con Webstorm y Chrome Debugger usando ng serve?
Lo que finalmente me ayudó fue agregar una / barra diagonal webpack:/// después de la webpack:/// , de modo que hay 4 en lugar de 3. De manera predeterminada, había 3 barras diagonales hacia adelante
La remote URL apunta al mismo directorio padre que a la izquierda, excepto el webpack://// esquema.
Además, no necesita habilitar el compilador de TS como se sugiere a menudo.
- Mac OS
- Angular-CLI 2.4.1
- WebStorm 2016.3
Ok, funcionó, necesitas asignar tanto root como src. mira aquí:
con suerte, ayuda a alguien,
permítanme agregar que a veces el depurador perderá su punto de interrupción, así que agregue la alerta (''foo'') o el código del depurador justo antes de su punto de interrupción.
tx
agregará y convergerá proyectos de jspm a la nueva cli de Angular 2 Kitchen sink: http://ng2.javascriptninja.io y fuente @ https://github.com/born2net/ng2Boilerplate Saludos,
Sean
Puede usar Augury, que es una extensión de herramienta de desarrollo para los navegadores web para depurar aplicaciones angulares.
Aquí está el enlace que puede instalar:
Esta herramienta es muy útil para ver la jerarquía de su enrutamiento en su aplicación, la jerarquía de Módulos y Componentes y la descripción general de Inyección de Dependencia en cada componente.
Aquí hay un gráfico de inyección de mi proyecto que ilustra mi explicación anterior:
Respuesta 2017 para: angular-cli: 1.0.0-beta.26 node: 6.9.2 os: darwin x64
Si tiene problemas con esto, vaya a la pestaña Scripts en su depurador e intente alinear sus asignaciones de URL según lo que vea.
Ninguna de las otras respuestas me ayudó porque mi versión de angular-cli mapeó las cosas de una manera diferente.
