Développer en Angular avec Asp.net core - Dev to be curious

Est-il possible, à votre avis de développer sous aspnet .core et de créer une application angular ?

Buy me a coffee ! 

Mes articles te plaisent ? Achète moi un café ! :)

Plutôt que de tout le temps passer par une application Node.js et créer la confusion : mon application angular a-t-elle besoin de node.js pour fonctionner, revenons aux fondamentaux.

Une application Angular est avant tout une application côté navigateur

Vous l’avez bien compris, il existe deux mondes d’applications :

1. Les applications (les sites web) où tout se prépare côté serveur et le rendu final est envoyé au client
   Nous trouvons ici : mvc.net, asp.net, php, java j2ee, ruby on rails, …
2. Les applications où très peu de code Html est préparé et présenté au chargement sur le navigateur : les SPA. C’est côté client que tout va se charger et s’afficher.
   Nous y trouvons ici ReactJs, Angular, Vue.js…

Ainsi, vu que tout est côté client, en fait, on peut avoir une page html pure : index.html et c’est tout.

Tout le reste, c’est le javascript, qui sera chargé par le navigateur, qui va s’occuper de tout fonctionner. Dans notre cas : le moteur Angular (les modules, les composants, ..).

Ainsi, nous pouvons très bien avoir une application sous asp.net core, et avoir le javascript comme toute application, site web “normal”.

Etape 1 – On choisit le projet asp.net

A priori, nous avons un template, un patron d’auto-génération, pour créer une application Angular, avec asp.net core depuis Visual Studio Community.

Testons tout ça !

Choisir le template de projet dédié : Angular

Clic sur OK, et attendre que la génération du projet se fasse.

Même structure d’un projet asp.net core, avec une différence, dans ClientApp

Dans le ClientApp, nous avons toute la structure du projet Angular :

Des problèmes qui arrivent

Or, si on analyse le fichier package.json, présent dans le dossier ClientApp, on note que la version d’Angular proposée par le template est la 5.
Cependant, nous souhaitons travailler avec la 6 ou bien la 7.

Ainsi, pour ça, suivons les étapes suivantes :

1. Mettre à jour npm : npm install -g npm
2. Mettez à jour les packages Angular grâce à :
1. npm install -g npm-check-updates
2. ncu -u
3. Pis nous migrons de version, grâce à Angular Cli : ng update @angular/core
   sans ça, nous nous retrouvons avec un message d’erreur au lancement : le fichier angular.json est introuvable. (si vous vous trouvez dans ce cas-là, c’est qu’à priori votre version d’angular est encore en 5.0 ou inférieure).

Malgré cela, nous nous retrouvons avec un message d’erreur :
Could not find module “@angular-devkit/build-angular”

En invite de commande nous lançons un npm install –save-dev “@angular-devkit/build-angular

Que c’est fastidieux ! Un moteur de génération doit nous faire gagner du temps, pas nous en faire perdre !

NOTE: par moment, ça fonctionne le moteur de génération, il nous reste à investiguer pourquoi par moment ça fonctionne, pourquoi dans d’autres moments, nous avons plein de problèmes.

Essayons par une autre méthode : un projet api asp.net core

L’idée ici est de créer un projet en deux temps :

1. Création d’un projet api asp.net core
2. Lancer le moteur de génération d’une nouvelle application Angular dans le dossier, à la racine

Création d’un projet api asp.net core

Créez une application asp.net core.

Choisissez bien API comme générateur de projet.

Lancer le moteur de génération avec ng new

Assurez-vous bien que Angular et Angular CLI sont bien installés sur votre pc.

L’inconvénient du ng new, c’est qu’il ne permet pas, de base, de générer tout le contenu nécessaire dans un dossier contenant déjà du code / des fichiers.

Utilisez plutôt : ng new {nom du projet angular} –directory ./

ATTENTION : le nom du projet angular doit être le même que celui de votre csproj.

Tous vos fichiers et vos dossiers angular ont donc été générés depuis la racine de votre projet csproj.

Reste quelques étapes à suivre

Enfin, vous devez configurer :

1. Le csproj de votre projet et lui rajouter du xml dédié pour précompiler, et aussi prévoir la compilation typescript à chaque build

<PropertyGroup>
     <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
     <PostBuildEvent>ng build –aot</PostBuildEvent>
   </PropertyGroup>

2. Changer le dossier de génération du moteur Angular CLI, via le fichier angular.json, et la propriété : “outputPath”.
   Vous devez mettre, à la place de dist/{nom du projet angular}, “outputPath”: “wwwroot”,
3. Changer l’url à lancer par défaut dans le launchSettings (dans le dossier Properties) :

“WebApplication1”: {
       “commandName”: “Project”,
       “launchBrowser”: true,
       “launchUrl”: “”,
       “applicationUrl”: “http://localhost:5000″,
       “environmentVariables”: {
         “ASPNETCORE_ENVIRONMENT”: “Development”
       }
     }

4. Ajouter la référence NuGet Microsoft.AspNetCore.StaticFiles
5. Configurer le Startup.cs, avec des middlewares nécessaires :

app.UseDefaultFiles();
app.UseStaticFiles();

And voilà :