mercredi 2 octobre 2019

ASP.NET Core & Angular Template - 1

Je souhaite créer une application ASP.NET Core & Angular avec Visual Studio Community 2019. Je clique sur : File -> New -> Project oui je sais, pardon j'ai oublié de choisir le Français lors de l'installation de Visual Studio Community 2019 nous le ferons donc en anglais.

Je souhaite donc étudier une application "Template ASP.NET Core & Angular avec Visual Studio Community 2019" car les choses évoluent rapidement et ceux qui se sont évertués à vouloir créer ce type d'application avant l'avènement de ce Template se sont bien sûr cassé les dents (j'évoque ici l'avènement du modèle MVC alors qu'il a fallut coder à la main).

Maintenant qu'avons aujourd'hui nous avec Visual Studio 2019 ?

Template d'application ASP.NET Core & Angular avec Visual Studio Community 2019
On ne sait jamais vraiment ce qui nous attends, quand on créé une application avec ce genre de Template. Est-ce vraiment une application travaillable ?



Par exemple là si je clique sur "Create" ai-je encore des choix à faire ? Lesquels ? C'est pour cela que prends ces notes. Voici la prochaine boite de dialogues :


ASP.NET Core & Angular Visual Studio 2019 Community
Très intéressante, cette boite de dialogues le choix des deux Frameworks ASP.NET Core 2.1 ou ASP.NET Core 2.2 ... Agular, React, React and Redux, Razor ... Quels choix pléthorique !

Remarque concernant l'Authentification avec Angular : En choisissant Angular l'authentification est grisée je n'ai pas le choix de choisir autre chose que "No Authentification".

Comme framework front, je choisie Angular :


Structure du Template ASP.NET Core & Angular avec Visual Studio 2019 Community
Elle est pas belle cette application ASP.NET Core & Angular !?

Structure de mon application ASP.NET Core et Angular : Visual Studio 2019\Templates\WebApplication1\WebApplication1\ClientApp\src\app
Il s'agit d'une application Angular, les fichiers de la Client App sont en css html et TypeScript :

ASP.NET Core & Angular Template
Voilà, tout est là avec les trois pages d'exemple "counter", "fetch-data", "home", et "nav-menu" dans une application Angular les fichiers ".ts" sont en langage TypeScript.

Exécution de l'application

Essayons un petit "Run" pour voir ...


Exécution du Template d'application ASP.NET Core & Angular
Error MSB3073 The command "node --version" exited with code 9009


Et oui, il ne faut pas oublier d'installer Node JS dans cette pile de développement et là ce n'est pas fait.

Installation de Node JS

Oui l'utilisation d'Angular signifie l'installation de Node JS pour la commande les outils de développement etc ...

Template d'application ASP.NET Core & Angular avec NodeJS
Jusque là, tout va bien :

NodeJS
Installation de NodeJS
Vérification de la version installée de Node JS dans une fenêtre de commande :

>node --version

ASP.NET Core & Angular
Node JS version 10.16.3

Exécution de ASP.NET Core & Angular Webapplication1

Essayons un deuxième "Run" :

SSL - Would you like to trust the IIS Express SSL certificate ?
Bon, en même temps est ce que j'ai le choix ? Allez, je clique sur "Yes". Et BOUM !!!

ASP.NET Core & Angular
Do you want to install this certificate ?
Il suffit de relancer le certificat est installé mais évidemment cette application ne fonctionne pas avec IIS Express il faut utiliser ASP.NET Core alors ça recommence ...


ASP.NET Core & Angular
Install ASP.NET Core SSL
Evidemment, ASP.NET & Angular ne fonctionne pas avec Internet Explorer :
la console >ng se lance mais IE reste bloqué à "Loading..." :


ASP.NET Core  & Angular ne fonctionne pas avec Internet Explorer
Voici donc la configuration qu'il faut avoir pour exécuter l'application Angular :


ASP.NET Core & Angular
Avec cette configuration, vous avez une chance d'exécuter l'application ASP.NET Core & Angular votre WebApplication1 cette fois en utilisant le serveur web Kestrel :


Exécution de l'application ASP.NET Core et Angular "Hello, world!"
Vous êtes maintenant prêt à développer avec Visual Studio 2019 - ASP.NET Core 2.2 et Angular

La suite Ici :

ASP.NET C# - ASP.NET Core & Angular Template - 2

Have great fun!

Aucun commentaire:

Enregistrer un commentaire

Remarque : Seul un membre de ce blog est autorisé à enregistrer un commentaire.