Comment déboguer angular angulaire à l'aide d'angular-cli webpack?
J'ai déjà utilisé [email protected] avant de mettre à jour angular-cli @ webpack beta.11. Après beaucoup de modifications personnalisées, je l'ai fait fonctionner.
Le seul problème est que je ne peux plus déboguer mon application angular avec Webstorm et le débogueur chrome, car je ne reçois aucun fichier ts utilisant ng serve. Avec [email protected], il était très facile de déboguer mon application en utilisant le plugin Jetbrains.
Comment déboguer mon application angular avec Webstorm et le débogueur Chrome à l'aide de ng serve?
Comment déboguer avec angular/cli
La nouvelle version angular/cli utilise webpack qui ne compile pas les fichiers ts dans un répertoire local comme dist auparavant (jusqu’à la version bêta 1.0.0-beta.10). Maintenant, il utilise une approche semblable à la mémoire.
Mais vous pouvez trouver les fichiers ts dans la Chrome Outils de développement dans l'onglet "Sources".
(nouveau) Solution pour angular/[email protected] et plus récente
Avis: Cette solution a été testée avec les versions 1.0.0-beta.26 et 1.2.1
Remarque: dans cet exemple, j'ai utilisé le port 5321 au lieu de 4200. Utilisez simplement votre port.
Débogage avec Chrome Outils de développement
Lorsque vous exécutez ng serve (également utilisé dans npm start), vous pouvez trouver vos sources dans la section Chrome Outils de développement: "webpack: //":
Débogage Angular 2 App avec angular/cli utilisant JetBrains IDE
Modifiez simplement votre configuration Run/Debug dans Webstorm/PHPStorm comme suit:
- Définissez votre chemin d’URL distant du répertoire de votre projet sur
webpack://. - Définissez votre chemin d’URL distant de votre répertoire src sur
webpack://./src
(old) Solution for [email protected] - .14
Débogage avec Chrome Outils de développement
Lorsque vous exécutez ng serve (également utilisé dans npm start), vous pouvez rechercher vos sources dans la section Chrome Outils de développement: "webpack: //":
Débogage Angular 2 App avec angular-cli @ webpack utilisant l'EDI de JetBrains
Modifiez simplement votre configuration Exécuter/Déboguer dans Webstorm/PHPStorm comme suit: Définissez le chemin de l’URL distante de votre répertoire de projet sur
webpack: ////Users/...FULL_PATH .. // sous Mac OSX
ou
webpack: /// C: /...FULL_PATH .. // exemple sous Windows
Remarque: sous Windows, vous n'avez besoin que de 3 barres obliques, sur Mac, vous avez besoin de 4 barres obliques après "webpack:"
Vous pouvez également vérifier votre chemin en accédant à http: // localhost: 4200/main.map et en recherchant le fichier ".ts". Vous pouvez facilement copier le chemin de ce fichier et le coller dans votre dialogue de configuration IDE).
[~ # ~] edit [~ # ~] : Vous devez peut-être également mapper le chemin en ajoutant "/ src" à votre dossier src. Merci @ born2net
S'amuser.
ok, ça marche, vous devez mapper root et src. vois ici:
j'espère que ça aide quelqu'un,
permettez-moi d'ajouter que parfois le débogueur manque votre point d'arrêt, ajoutez donc un code d'alerte ('foo') ou de débogueur juste avant votre point d'arrêt.
tx
ajoutera et fera converger des projets jspm vers de nouveaux cli Angular 2 évier de cuisine: http://ng2.javascriptninja.io et source @ https://github.com/born2net/ng2Boilerplate Cordialement,
Sean
2017 réponse pour: angular-cli: 1.0.0-beta.26 node: 6.9.2 os: darwin x64
Si vous rencontrez des problèmes, accédez à l'onglet Scripts de 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 de angular-cli mappait les choses d'une manière différente. 
Vous pouvez utiliser Augury, une extension de l’outil de développement destiné aux navigateurs Web, afin de déboguer des applications angular).
Voici le lien que vous pourriez installer:
Cet outil est très utile pour afficher la hiérarchie de votre routage dans votre application, la hiérarchie Module et Composants et la synthèse Injection de dépendance de chaque composant.
Voici un graphe d'injection de mon projet qui illustre mon explication ci-dessus:
Veuillez noter que les solutions ci-dessus NE vous permettent PAS de définir des points d'arrêt dans les fichiers HTML des composants angular lorsque vous utilisez IntelliJ. Vous ne pouvez le faire que dans Chrome. Je ne comprends pas pourquoi ce n'est pas possible. dans IntelliJ.
Ce qui m'a finalement aidé, c’est 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
Le remote URL pointe sur le même répertoire parent que celui de gauche, à l'exception du webpack://// schéma.
De plus, vous n'avez pas besoin d'activer le compilateur TS comme le suggère souvent.
- MacOS
- CLI angulaire 2.4.1
- WebStorm 2016.3