ASP.NET Core & Angular Template - 2

L'utilisation d'application Angular CLI avec ASP.NET Core est assez délicate nous avons tout une pile de serveurs webs de scripts de codes qui doivent fonctionner ensemble et les erreurs sont peu interprétables.

Avec : ASP.NET Core & Angular Template - 1
On a vu la création de notre première Applications ASP.NET Core Angular à partir du Template Visual Studio. On a vu l'installation de la pile nécessaire à l'exécution de l'application.

Maintenant on va voir comment exécuter l'application avec "ng serve" indépendamment avec Visual Studio Code d'une part et Visual Studio Community d'autre part.

[error] Error: Cannot find module '@angular/compiler-cli/ngcc'

Je dois noter ici l'erreur que je faisais à mes débuts : Vouloir installer "Angular CLI" alors qu'il l'est déjà. En ouvrant l'application au niveau du répertoire ClientApp avec Visual Studio Code, je tapais les commandes Angular CLI suivantes :

>cd ClientApp
>npm install --save-dev @angular-devkit/build-angular

A partir de là, tout allait de travers ... avec des messages d'erreurs incohérents que j'essaye de corriger mais le remède est pire que le mal.

Je reprends donc.

Je créé une nouvelle application à partir du Template ASP.NET Core & Angular.

Je souhaite Exécuter "ng serve" indépendamment

Microsoft - Exécuter "ng serve" indépendamment

Car chaque fois que je modifie mon code C#, le serveur CLI Angular redémarre et il lui faut environ 10 secondes. Je souhaite exécuter mon Serveur CLI Angular en externe, indépendamment du processus AP.NET Core.

J'ai modifié le code de mon application ASP.NET Core & Angular comme il est dit :

spa.UseProxyToSpaDevelopmentServer("http://localhost:4200"); // npm start dans VSCode

Il faut faire un Build après la création d'une application ASP.NET Core pour reconstruire le contenu du répertoire node_modules avec ce qui va bien dedans.

Remarque importante : Si vous avez un problème avec les commandes Angular, il ne faut pas hésiter à supprimer ce répertoire car il sera recréé à partir de npm (NodeJS Package Management) au prochain build.

Ensuite, j'ouvre le bon répertoire dans mon Visual Studio Code.

Visual Studio Code ouvrir le Répertoire ClientApp

Je vais chercher le bon répertoire de mon application, c'est important d'aller sur le bon répertoire sinon le Terminal que l'on va ouvrir ne trouvera pas les bonnes commandes Angular ce qui est fâcheux.


Dans Visual Studio Code ouvrir le bon répertoire ClientApp

Ensuite, j'ouvre un nouveau Terminal pour exécuter mes commandes :


Ouvrir un Terminal dans le bon répertoire

Exécuter la commande Angular :
>npm start



Exécution de "npm start" dans le Terminal de Visual Studio Code

Je retourne dans Visual Studio, je lance l'exécution en debug de l'application : Si maintenant je vais Visual Studio Code par exemple modifier le fichier :

src\app\home\home.component.html



Modification du fichier home.component.html

J'ajoute le texte : "angular". C'est là le miracle. Quand je fais "save" :

La commande Save -> Recompilation avecc Angular CLI

Angular CLI recompile, recharge dans le navigateur et ma modification apparait automatiquement dans mon navigateur :



Modification "à la volée" de mon application Web ASP.NET Core & Angular

Voilà, je viens d'apprendre à lancer le Server Angular CLI depuis Visual Studio Code indépendamment du processus ASP.NET Core.

Ceci pour optimiser mon développement, je n'aurais plus à attendre qu'Angular CLI redémarre à chaque modification de mon code source.

Have fun!