He utilizado [email protected] antes y ahora que he actualizado a angular de la cli [email protected] beta.11. Después de un montón de cambios personalizados yo tengo que trabajar.

La única cosa es que ahora no puedo depurar mi angulares de la aplicación a través de webstorm y chrome depurador porque no tengo ningún ts archivos mediante ng servir. Con [email protected] fue muy fácil para depurar mi aplicación a través de la Jetbrains Plugin.

¿Cómo puedo depurar mi angulares de la aplicación con Webstorm y el Chrome Depurador usando ng servir?

InformationsquelleAutor geronimo678 | 2016-09-06

6 Comentarios

  1. 52

    Cómo depurar con angular/cli

    El nuevo angular/cli versión utiliza webpack que no compila los archivos de ts a un directorio local como dist antes (hasta 1.0.0 beta-beta.10). Ahora se utiliza la memoria como en el enfoque.

    Pero usted puede encontrar los Archivos de ts en las Herramientas para Desarrolladores de Chrome en las «Fuentes» de la ficha.


    (nuevo) Solución para angular/[email protected] y más reciente

    Aviso: Esta solución se ha probado con la versión 1.0.0-beta.26 y 1.2.1

    Aviso: En este ejemplo he utilizado el puerto 5321 en lugar de 4200. Sólo tiene que utilizar su puerto.

    De depuración con Herramientas para Desarrolladores de Chrome

    Mientras se ejecuta ng servir (también se usa en npm start), usted puede encontrar sus orígenes en las Herramientas para Desarrolladores de Chrome sección: «webpack://»:

    Cómo depurar angular de la aplicación usando angular de la cli de webpack?

    Depuración Angular 2 App con angular/cli mediante JetBrains IDE

    Acaba de editar su Ejecución/Configuración de Depuración en Webstorm/PHPStorm a la siguiente:

    1. Establecer su control Remoto Ruta de la URL de directorio de tu proyecto para webpack://.
    2. Establecer su control Remoto Ruta de la URL de su directorio src para webpack://./src

    Cómo depurar angular de la aplicación usando angular de la cli de webpack?


    (antiguo) Solución para [email protected] – .14

    De depuración con Herramientas para Desarrolladores de Chrome

    Mientras se ejecuta ng servir (también se usa en npm start), usted puede encontrar sus orígenes en las Herramientas para Desarrolladores de Chrome sección: «webpack://»:

    Cómo depurar angular de la aplicación usando angular de la cli de webpack?

    Depuración Angular 2 App con angular de la cli [email protected] el uso de JetBrains IDE

    Acaba de editar su Ejecución/Configuración de Depuración en Webstorm/PHPStorm a los siguientes: Establecer el control Remoto Ruta de la URL de directorio de tu proyecto para

    webpack:////Users/…FULL_PATH.. //en Mac OSX

    o

    webpack:///C:/…FULL_PATH.. //por ejemplo en Windows

    Aviso: en Windows, usted sólo necesita 3 barras, en Mac necesita 4 barras
    después de «webpack:»

    También puede comprobar su Camino por el que va a http://localhost:4200/main.map y la búsqueda de cualquier «.ts» Archivo. Usted puede copiar fácilmente la ruta de este archivo y pegarlo en el IDE de Diálogo de Configuración.

    Cómo depurar angular de la aplicación usando angular de la cli de webpack?

    EDITAR: tal vez usted necesita un mapa de la ruta añadiendo «/src» a tu carpeta src demasiado. Gracias @born2net

    Divertirse.

    • Un problema que he encontrado, en el caso de la depuración con Chrome con una webpack construir, es que a veces es imposible de configurar correctamente un punto de interrupción, el sourcemaps están en mal estado, tal vez. Es por eso que me volvió a desarrollar con un systemjs construir (no hay ningún problema en establecer puntos de interrupción)
    • para ser justos debería admitir que el webpack construir de forma angular-cli está todavía en fase beta. Supongo que este problema con la fuente de los mapas serán mejoradas en la versión final de [email protected]
    • punto justo. Espero (espero!) la asignación de origen será fijo. De lo contrario, el angular de la cli es una excelente herramienta solo espero que para mejor.
    • En Windows se debe utilizar tres barras en lugar de las cuatro de la URL remota, como webpack:///C:/Users/…
    • No trabajo con Angular de la CLI 7.2.2, la solución fue stackoverflow.com/a/54883663/706012
  2. 13

    ok tengo trabajo,
    es necesario asignar la raíz y src.
    ver aquí:

    espero que ayude a alguien,

    Cómo depurar angular de la aplicación usando angular de la cli de webpack?

    permítanme añadir que, a veces, el depurador se pierda el punto de interrupción para agregar alert(‘foo’); o depurador de código justo antes de su punto de ruptura.

    tx

    va a añadir y convering jspm proyectos nuevos cli
    Angular 2 fregadero de la Cocina: http://ng2.javascriptninja.io
    y de la [email protected] https://github.com/born2net/ng2Boilerplate
    Saludos,

    Sean

    • ¿estás seguro de que no funciona sin la asignación de la carpeta src para el camino? Normalmente la carpeta principal debe ser asignado a la ruta de acceso absoluta y todas las subcarpetas relativa a la ruta de acceso principal.
    • ya que el programa de instalación es el único que trabajó para mí
    • sí, la adición de las dos asignaciones trabajó también para mí.
    • ambas asignaciones parece ser necesario en windows.
    • Excelente, funcionó en el primer intento 🙂
    • Esto es lo más confuso, pero sí, funciona. angular-cli: 1.0.0-beta.24 node: 6.9.1 os: darwin x64
    • como @nitto denko, trabajó en el primer intento 🙂 , pero una nota: la adición de la «URL Remota» en la raíz del proyecto es suficiente.

  3. 4

    2017 respuesta para:
    angular-cli: 1.0.0-beta.26 node: 6.9.2 os: darwin x64

    Si usted está teniendo problemas con esto, vaya a su secuencias de comandos de la ficha en el depurador y tratan de alinear su URL asignaciones de acuerdo a lo que se ve.

    Ninguna de las otras respuestas me ayudó porque mi versión de angular-cli asignada cosas de una manera diferente.
    Cómo depurar angular de la aplicación usando angular de la cli de webpack?

  4. 1

    Puede utilizar Augurio que es una herramienta dev extensión para los navegadores web con el fin de depurar angular aplicaciones.

    Aquí está el enlace se puede instalar:

    https://augury.angular.io/

    Esta herramienta es muy útil en la visualización de la jerarquía de enrutamiento en su aplicación, Módulo y los Componentes de la jerarquía y la Inyección de dependencias descripción de cada componente.

    Aquí es un Inyectar Gráfico de mi proyecto que ilustran mi explicación anterior:

    Cómo depurar angular de la aplicación usando angular de la cli de webpack?

  5. 0

    Lo que finalmente me ayudó fue a agregar un adicional de / (barra diagonal) después de webpack:///, por lo que hay 4 en lugar de 3. Por defecto hay 3 barras diagonales

    Cómo depurar angular de la aplicación usando angular de la cli de webpack?

    La remote URL puntos para el mismo directorio padre como en la izquierda, excepto el webpack://// esquema.

    También no es necesario habilitar el TS compilador como sugerido a menudo.

    • MacOS
    • Angular de la CLI 2.4.1
    • WebStorm 2016.3
  6. 0

    Por favor, tenga en cuenta que las soluciones anteriores NO permiten establecer puntos de interrupción en el código html de los archivos de componentes angulares cuando el uso de IntelliJ. Usted sólo puede hacer esto en Chrome. No entiendo por qué esto no es posible en IntelliJ.

Dejar respuesta

Please enter your comment!
Please enter your name here