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 :


Installation de NodeJS

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

>node --version


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 !!!


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 ...



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!