typescript - ¿Cómo depuras una biblioteca de Angular 6?

Estoy escribiendo una biblioteca en Angular 6 y no puedo averiguar cómo entrar en el TypeScript.

Generé la aplicación usando: ng new mylibapp

Luego añadí la biblioteca usando: ng g library @abc/cool-lib -p abc

cuando ejecuto: ng build @abc/cool-lib

genera el código en la carpeta mylibapp/dist/abc/cool-lib

¿Cómo puedo ahora depurar este código y establecer puntos de ruptura en el archivo ts ubicado en mylibapp/projects/abc/cool-lib/src/lib?

Respuesta #1

A partir de @angular/cli v7, puedes agregar la siguiente configuración a tu archivo angular.json para habilitar los mapas de origen para una biblioteca al servir utilizando ng serve:

{
  "projects": {
    "your-app": {
      "architect": {
        "serve": {
          "options": {
            "vendorSourceMap": true

Respuesta #2

Al mirar la documentación de Angular CLI sobre bibliotecas, menciona lo siguiente:

Algunas configuraciones similares en su lugar agregan la ruta al código fuente directamente dentro de tsconfig. Esto hace que ver los cambios en tu aplicación sea más rápido.

Entonces, a partir de eso, en realidad puedes actualizar tu tsconfig.json para referenciar tu código fuente local en lugar de la biblioteca compilada.

Usando el proyecto construido:

 "paths": {
  "abc": [
    "dist/abc"
  ]

Cámbialo para usar la fuente real:

"paths": {
  "abc": [
    "projects/abc/src/public_api"
  ]

Existen desventajas como se menciona en los documentos:

Pero hacer eso es arriesgado. Cuando haces eso, el sistema de construcción de tu aplicación también está construyendo la biblioteca. Pero tu biblioteca se construye usando un sistema de construcción diferente al de tu aplicación.

Pero en mi caso, valió la pena porque me permitió depurar en Chrome de manera interactiva, así como ver los cambios de inmediato sin reconstruir. Sin embargo, sí pruebo completamente con el proyecto compilado fuera de este flujo de trabajo.