web-dev-qa-db-fra.com

Comment déboguer un Angular 6 bibliothèque

J'écris une Angular 6 Library et je ne sais pas comment entrer dans TypeScript.

J'ai généré l'application à l'aide de: ng new mylibapp

J'ai ensuite ajouté la bibliothèque en utilisant: ng g library @abc/cool-lib -p abc

quand j'exécute: ng build @abc/cool-lib

il génère le code dans le dossier mylibapp/dist/abc/cool-lib

Comment puis-je maintenant déboguer ce code et définir des points d'arrêt dans le fichier ts situé à mylibapp/projects/abc/cool-lib/src/lib

angulartypescriptangular-cliangular-cli-v6ng-packagr
5
JoAMoS

En regardant la Angular docs CLI sur les bibliothèques , il mentionne les éléments suivants:

Certaines configurations similaires ajoutent à la place le chemin d'accès au code source directement dans tsconfig. Cela accélère l'affichage des modifications dans votre application.

Ainsi, à partir de cela, vous pouvez réellement mettre à jour votre tsconfig.json pour référencer votre code source local au lieu de la bibliothèque construite. 

En utilisant le projet construit:

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

Changez-le pour utiliser la source réelle:

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

Il y a des inconvénients comme mentionné dans la documentation:

Mais cela est risqué. Lorsque vous faites cela, le système de construction de votre application construit également la bibliothèque. Mais votre bibliothèque est construite en utilisant un système de construction différent de celui de votre application.

Mais dans mon cas, cela valait la peine de me permettre de déboguer de manière interactive dans Chrome et de voir immédiatement les modifications sans reconstruire. Je teste complètement avec le projet construit en dehors de ce flux de travail cependant.

4
Andy Kachelmeier

Depuis Angular CLI v. 6.11 , vous pouvez utiliser le commutateur --vendor-source-map qui vous permettra d’entrer dans la source TypeScript de votre bibliothèque lors du débogage. Essayez ng build @abc/cool-lib --vendor-source-map et voyez si cela aide. Vous pouvez également utiliser le commutateur avec ng serve. Dans mon cas, je lance ng serve sur mon application hébergeant la bibliothèque et la carte source de la bibliothèque est incluse. De cette façon, vous éviterez également de modifier tsconfig.json

3
Scott Grodberg

La configuration est maintenant assez simple (avec Angular 7, probablement 6.2 déjà):

  • Compiler la bibliothèque en mode veille: ng build [mylib] --watch
  • Démarrer l'application avec les cartes source du fournisseur: ng serve --vendor-source-map

Des sources de bibliothèque sont maintenant disponibles (dans les outils Chrome/Firefox/... dev).

Mise à jour pour Angular 7.2:

--vendor-source-map a été remplacé par --sourceMap=true|false pour ng serve :

  • ng serve --source-map=true
1
Markus Pscheidt