Comment déboguer une application angulaire en utilisant angular-cli webpack ?

Question

J'utilisais angular-cli@1.0.0-beta.10 avant et maintenant j'ai mis à jour vers angular-cli@webpack beta.11. Après de nombreuses modifications personnalisées, j'ai réussi à le faire fonctionner.

La seule chose est que maintenant je ne peux pas déboguer mon application angulaire en utilisant webstorm et chrome debugger parce que je n'obtiens pas de fichiers ts en utilisant ng serve. Avec angular-cli@1.0.0-beta.10, il était très facile de déboguer mon application en utilisant le plugin Jetbrains.

Comment déboguer mon application angulaire avec Webstorm et le débogueur Chrome en utilisant ng serve ?

Answer 1

Comment déboguer avec angular/cli

La nouvelle version d'angular/cli utilise webpack qui ne compile pas les fichiers ts dans un répertoire local comme dist avant (jusqu'à la beta 1.0.0-beta.10). Maintenant, il utilise une approche similaire à la mémoire.

Mais vous pouvez trouver les fichiers ts dans les outils de développement de Chrome, dans l'onglet "Sources".

---

(nouveau) Solution pour angular/cli@1.0.0-beta.26 et plus récent

Avis : Cette solution a été testée avec les versions 1.0.0-beta.26 et 1.2.1.

Avis : Dans cet exemple, j'ai utilisé le port 5321 au lieu de 4200. Utilisez simplement votre port.

Débogage avec Chrome Developer Tools

En exécutant ng serve (également utilisé dans npm start), vous pouvez trouver vos sources dans la section Chrome Developer Tools : "webpack://" :

Déboguer une application Angular 2 avec angular/cli en utilisant l'IDE JetBrains

Il suffit de modifier votre configuration Run/Debug dans Webstorm/PHPStorm comme suit :

1. Définissez le chemin de l'URL distant de votre répertoire de projet comme suit webpack://.
2. Définissez le chemin URL distant de votre répertoire src comme suit webpack://./src

---

(ancien) Solution pour angular-cli@1.0.0-beta.10 - .14

Débogage avec Chrome Developer Tools

En exécutant ng serve (également utilisé dans npm start), vous pouvez trouver vos sources dans la section Chrome Developer Tools : "webpack://" :

Débogage d'une application Angular 2 avec angular-cli@webpack en utilisant l'IDE JetBrains

Il suffit de modifier votre configuration Run/Debug dans Webstorm/PHPStorm comme suit : Définissez le chemin de l'URL distante du répertoire de votre projet comme suit

webpack:////Users/...FULL_PATH.. //sur Mac OSX

o

webpack:///C:/...FULL_PATH.. //exemple sur Windows

Remarque : sous Windows, vous n'avez besoin que de 3 barres obliques, sous Mac, de 4 barres obliques. après " webpack : ".

Vous pouvez également vérifier votre chemin en allant sur http://localhost:4200/main.map et recherchez un fichier ".ts". Vous pouvez facilement copier le chemin de ce fichier et le coller dans la boîte de dialogue de configuration de votre IDE.

EDIT : Peut-être devez-vous faire correspondre le chemin ajoutant "/src" à votre dossier src également. Merci @born2net

Amusez-vous.

Answer 2

Ok, ça marche, vous devez mapper à la fois Root et src. voir ici :

J'espère que cela aidera quelqu'un,

laissez-moi ajouter que parfois le débogueur manquera votre point d'arrêt ; ajoutez donc alert('foo') ou ;le code du débogueur juste avant votre point d'arrêt.

tx

ajoutera et convertira des projets jspm à de nouveaux clients. L'évier de cuisine d'Angular 2 : http://ng2.javascriptninja.io et source@ https://github.com/born2net/ng2Boilerplate Regards,

Sean

Answer 3

La réponse de 2017 pour : angular-cli: 1.0.0-beta.26 node: 6.9.2 os: darwin x64

Si vous rencontrez des problèmes, rendez-vous dans votre Onglet scripts dans votre débogueur et essayez d'aligner vos mappages d'URL en fonction de ce que vous voyez.

Aucune des autres réponses ne m'a aidé car ma version d'angular-cli mappe les choses d'une manière différente.

Answer 4

Ce qui m'a finalement aidé a été d'ajouter un / (barre oblique) après webpack:/// de sorte qu'il y en ait 4 au lieu de 3. Par défaut, il y avait 3 barres obliques avant

Le site remote URL pointe vers le même répertoire parent que celui de gauche, à l'exception de l'élément webpack://// schéma.

Il n'est pas non plus nécessaire d'activer le compilateur TS comme cela est souvent suggéré.

• MacOS
• Angular-CLI 2.4.1
• WebStorm 2016.3

Answer 5

Vous pouvez utiliser Augury, qui est une extension d'outil de développement pour les navigateurs Web, afin de déboguer les applications angulaires.

Voici le lien que vous pouvez installer :

https://augury.angular.io/

Cet outil est très utile pour visualiser la hiérarchie de votre routage dans votre application, la hiérarchie des modules et des composants et l'aperçu de l'injection de dépendances sur chaque composant.

Voici un graphique Inject de mon projet qui illustre mon explication ci-dessus :