Authentification dans les applications Angular

Tout commence par l'intégration des boutons Signin et Register dans l'application Angular. J'ai créé un template d'application ASP.NET Core Angular par la commande suivante :

>dotnet new angular -o .\AspNetCoreAuthAngular -au Individual

J'étudie deux applications ; mon template et l'application suivante Asp.Net Core & IdentityServer

FullStackMark - User Authentication and Identity with Angular, Asp.Net Core and IdentityServer

Tout commence par le Bouton Login et lui, Mark ne s'embête pas, il le met dans une page tout seul et il s'appelle : Login with IdentityServer

Mais moi, je souhaite utiliser SmartAdmin comme architecture de mon application Angular. Et donc tout là haut, à droite, il y a un bouton SignIn derrière l'icône suivante :

fa-sign-in

C'est là que j'aimerais bien mettre mon code d'authentification. Mais derrière le bouton de Mark, il y a le tag suivant :

<button class="btn btn-lg btn-primary" (click)="login()">Login with IdentityServer</button>

Dans le fichier :

\AngularASPNETCoreOAuth\src\Spa\oauth-client\src\app\account\login\login.component.html

Alors que mon Icône de la SmartAdmin se trouve dans le fichier :

\DataMonitoring\ClientApp\src\app\shared\layout\user\logout\logout.component.html

Pour FullStackMark, j'arrive dans le code TS et je trouve un module 'ngx-spinner' qui est installé dans les node_modules.

Alors c'est quoi le module ngx-spinner ? Juste un module qui permet l'attente, l'attente de la demande d'authentification au Server en assombrissant l'écran.

Authentification dans les applications Angular - SmartAdmin

LoginComponent

damienbod/angular-auth-oidc-client

https://github.com/damienbod/AspNet5IdentityServerAngularImplicitFlow

Et puis il y a un deuxième projet :

IdentityModel/oidc-client-js

Alors c'est lequel le meilleur ?

StsIdentityServer unauthorized_client

Refused to frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".

IdentityServer4 and CORS policy

Partie cliente avec Angular

Le meilleur c'est Jason Watmore

Angular 8 - Tutoriel et exemple sur l'enregistrement et l'authentification des utilisateurs

En fait le FakeBackEnds n'est pas représentatif de la réalité, pas représentatif  de IdentityServer4, par exemple l'authentification se fait en regardant si l'utilisateur et le mot de passe correspondent dans la base de données ... c'est pas super sécur cela ne respecte pas le processus oidc ...

Authentification Guards Angular

Mon sujet est réellement celui là. Avec une présentation complète et bien documentée Ici :

Angular Authentication: Using Route Guards

Mais on va vite vers l'achat du bouquin c'est bien mais je n'ai pas le temps.

• CanActivate
• CanActivateChild
• CanDeactivate
• CanLoad
• Resolve

Et l'article vous redirige vers : Angular Doc ou vous trouverez une définition de tous ces termes. Mais dans la pratique qu'est ce que j'implémente dans mon application angular ?

Alors je poursuis par Ici :

Le Guide Angular Marmicode - Route Guards

Mais tout de suite vous êtes redirigé un ailleurs, vers plus de sécurité, Ici :

Wishtack - API ReST | Bonnes Pratiques et Sécurité

Mais là on s'écarte peut être un peu du sujet en tous cas on élargit avec les API REST. Cet article est une véritable SOMME en matière de présentation de l'authentification dans les réseaux. A lire absolument.

Alors la meilleur façon de faire, c'est de prendre la superbe Documentation Angular et de chercher les bons chapitres.

Router tutorial overview

Comme le chapitre suivant :

Preventing unauthorized access

et de poursuivre un peu plus loin avec le tutorial :

Router tutorial: tour of heroes

et le code source à télécharger

Download source code sample Router

C'est l'exemple parfait extrêmement bien documenté.

Voilà c'est fini, nous savons maintenant comment implémenter les autorisations de navigation au sein de notre application Angular et nous avons trouvé la bonne documentation.

Have fun!

Migration angular 7 vers angular 8

A votre avis est-ce facile de migrer de Angular 7 vers Angular 8, je vais m'atteler à cette question pour découvrir toutes les subtilités d'Angular afin de migrer mon application en Angular 8, allant de l'avant vers la modernité.


Angular

Bien sûr tout le monde connait le guide de migration qui soit disant permet de migrer n'importe quelle application d'une version d'Angular vers un autre. Je vous présente, roulements de tambours le guide de migration de toutes les versions d'Angular vers toutes les autres ...



Guide de migration Angular

Encore qu'après quelques manipulation et un peu de lecture, on comprend que cela ne va pas être si facile.

Donc tout dépend de votre application actuelle en Angular 7. Est-elle au goût du jour, ou avez vous attendu trop longtemps. Le logiciel c'est évolutif en permanence, rester figé c'est mourir, n'attendez pas trop longtemps pour migrer.

#editeurlogiciel #agile

ASP.NET Core & Angular StarterKit

Le Template de projet instancié à partir de Visual Studio Community 2019 est assez évolué, l'objet de ce post est d'expliquer comment ajouter rapidement "un module", une page qui permettent de faire des tests simples et de créer une "étape d'intégration" afin d'intégrer un module un ensemble de fonctionnalités à un projet plus vaste.

C'est ainsi que l'on doit procéder pour garder une trace des interdépendances des différents modules de votre logiciel afin de garantir une traçabilité des étapes d'intégration.



Respecter les étapes d'intégration - Editeur de logiciels

Créer un projet étape d'intégration un StarterKit

J'ai donc instancié un projet ASP.NET Core & Angular :


ASP.NET Core & Angular StarterKit

Et je souhaite ajouter rapidement une nouvelle page.

Ajouter un nouveau component Angular

Je me souvenais de la commande :

>ng generate component builder-dnd

Je souhaite appeler mon composant "builder-dnd" ... je lance la commande mais rien d'y fait :

More than one module matches. Use skip-import option to skip importing the component into the closest module.

On me répond que la commande c'est :

>ng g c new-component --module app

Ah ben ça a du changer alors ! JE suis dans le répre

>ng generate component builder-dnd --module app

CREATE src/builder-dnd/builder-dnd.component.html (26 bytes)
CREATE src/builder-dnd/builder-dnd.component.spec.ts (657 bytes)
CREATE src/builder-dnd/builder-dnd.component.ts (288 bytes)
CREATE src/builder-dnd/builder-dnd.component.css (0 bytes)
UPDATE src/app/app.module.ts (1665 bytes)

bon ... passons. Finalement component module il faudra chercher la différence. Finalement ce n'est pas ça que je veux. Je me retrouve à supprimer ce module "à la main". GRrrr, ARrrrGGG, Au secours.

Angular - CLI Overview and Command Reference

Finalement on en revient toujours là. Finalement, je me suis placé dans le répertoire app et j'ai balancer la même commande :

>ng generate component builder-dnd --module app

En croisant les doigts très fort pour qu'il me fasse ce que je souhaitais.

CREATE src/app/builder-dnd/builder-dnd.component.html (26 bytes)
CREATE src/app/builder-dnd/builder-dnd.component.spec.ts (657 bytes)
CREATE src/app/builder-dnd/builder-dnd.component.ts (288 bytes)
CREATE src/app/builder-dnd/builder-dnd.component.css (0 bytes)
UPDATE src/app/app.module.ts (1664 bytes)

Cette fois, ce fut la bonne, c'est bête non.

Connecter mon nouveau composant

Je vais dans :

\ClientApp\src\app\nav-menu\nav-menu.component.html

Ajouter :

<li class="nav-item" [routerLinkActive]="['link-active']">
  <a class="nav-link text-dark" [routerLink]="['/builder-dnd']">Builder</a>
</li>

Dans :

\ClientApp\src\app\app.module.ts

J'ajoute :

RouterModule.forRoot([
{ path: '', component: HomeComponent, pathMatch: 'full' },{ path: 'builder-dnd', component: BuilderDndComponent },
{ path: 'counter', component: CounterComponent },
{ path: 'fetch-data', component: FetchDataComponent, canActivate: [AuthorizeGuard] }, ])
 
Et mon nouveau module est connecté :



ASP.NETCore & Angular StarterKit

C'est un peu laborieux mais ça y est ! J'ai une nouvelle page vierge dans laquelle je vais pouvoir intégrer le package :

npm - @swimlane/ngx-dnd



npm - @swimlane/ngx-dnd

Et obtenir le résultat suivant en intégrant ce package dans mon StarterKit :



ASP.NET Core & Angular StarterKit - swimlane Drag and Drop package.

ASP.NET Core & Angular StarterKit Conclusion

C'est à ça que sert un "Starter Kit" un kit de démarrage dans une techno afin de vérifier la validité d'une intégration. Assurer l'intégrabilité d'un solution, être sûr que l'on va pouvoir ajouter cette fonctionnalité au projet en cours. Pour ça, il faut réaliser des étapes d'intégration. Toutes les méthodologies sont bonnes, dès lors qu'elles permettent le travail organisé, en groupe.

Trop de Développeurs et je ne parle même pas des Product owner, ont oublié d'effectuer le découpage du projet en étapes d'intégration distinctes les unes des autres, afin de bien maitriser ce qui correspond à un ensemble de fonctionnalités et ce qui n'en fait pas partie.

Trop de clients, trop de projets ont perdu leur Starter Kit ou n'ont même pas effectué d'étapes d'intégration ou bien les ont perdues et lorsqu'il s'agit d'intégrer un nouvel ensemble de fonctionnalités, comme un package de DragAndDrop, par exemple, ils intègrent directement dans le projet final. Le développeur se perd alors et mets un temps infini à s'en sortir car tout est mélangé dans un indigeste plat de spaghettis.

C'est aussi ça être un véritable éditeur de logiciels.

Intégrer le module @swimlane/ngx-dnd dans une application ASP.NET Core & Angular

J'ai quelques déboires à intégrer ce module dans un projet plus important. J'ai récupéré les sources depuis le github :  Swimlane/ngx-dnd

J'ai suivi les instructions du site :


Swimlane/ngx-dnd - Instructions

Le module fonctionne, avec mon Visual Studio Code je suis allé lancer les commandes Angular/CLI qui vont bien.

Swinlane exécution du module ngx-dnd

Je launch mon chrome et j'obtiens l'exécution du module : Je peux construire ma Target en drag and droppant les Sources.



Exécution du module ngx-dnd sur ma machine de développement

Mais quand j'essaye d'intégrer ce module dans un autre projet alors c'est la catastrophe ! Je tire les fils des dépendances de ce module et tout vient avec au bout du compte cela ne fonctionne pas.

Le module ngx-dnd n'est pas assez isolé de tout le fatras de code de Swinlane (framework) si je regarde un instant dans le répertoire :

ngx-dnd-master\node_modules\@swimlane

Voici les module installés :

• docspa-core
• docspa-remark-preset
• dragula
• ngx-dnd
• prettier-config-swimlane

docspa-core est un module intéressant qui permet de transformer du "MarkDown" en html ... mais c'est à la sauce Swinlane, moi je ne veux pas de cela dans mon projet.

Alors je vais voir si je peux intégrer ce module dans une application "standard" ASP.NET Core & Angular.

To Be Continued !



Http failure response for (unknown url): 0 Unknown Error : [object ProgressEvent]

Je cherche à corriger cette erreur : Http failure response for (unknown url): 0 Unknown Error : [object ProgressEvent] dans mon application ASP.NET Core & Angular et je tombe sur Stackoverflow :

stackoverflow - I get “Http failure response for (unknown url): 0 Unknown Error” instead of actual error message in Angular

Alors comme personne n'a la bonne réponse à cette erreur : Http failure response for (unknown url) et bien je m'en vais vous la donner.



Http failure response for (unknown url): 0 Unknown Error

Alors qu'ai-je fait pour autant de haine et je ne trouve pas de réponse !
Et pourtant c'est tout simple, dans la barre d'URL j'ai mis le port à 8400, je ne sais pas pourquoi j'ai eu envie de modifier cette donnée pour voir et c'est ce qui a généré cette erreur, il n'y a plus de données dans mon application ASP.NET Core & Angular. Entity Framework Core ne peut plus me délivrer de données.



Corrigez l'erreur : Http failure response for (unknown url): 0 Unknown Error

Si je remets par exemple une url avec un port à 65631 et bien mon application fonctionne à nouveau. Grrrrrr !

Je tâcherai de trouver une explication plus rationnelle une autre fois ...

ASP.NET Core - Authentification avec Angular

Regardons un peu ce que nous propose le Template de Visual Studio en matière d'authentification pour les applications ASP.NET Core & Angular. Je me souviens qu'avec ASP.NET Core 2.2 il n'y a pas moyen de changer on est obligé de choisir l'option "No Authentification".

Comparons les deux version d'ASP.NET Core :

ASP.NET Core 2.2


Avec ASP.NET Core 2.2 - No Authentification

Avec ASP.NET Core 3.0



ASP.NET Core 3.0 - Change Authentification

Je clique sur Change Authentification :

ASP.NET Core 3.0 - Options pour l'Authentification

Learn more about third-party open source authentification

ASP.NET Core & Angular & Authentification

Voici les fichiers créés par le Template :



src/api-athorization

Voilà, toute la structure de l'application en TypeScript concernant l'authentification dans les applications ASP.NET Core & Angular est là.

Microsoft - Authentification et autorisation pour SPAs

Le lien plus haut nous donne accès aux parties tierces fournisseurs de services d'authentification.

Exécution de l'application ASP.NET Core 3.0

Je lance l'exécution de mon application :



Template d'application ASP.NET Core 3.0 avec Authentification

Et ce qui m'intéresse c'est de pouvoir me Logger :


ASP.NET Core 3.0 - Register a new User

On ne peut pas dire que le formulaire de "Log in" soit de plus fun mais il y a l'essentiel je note la fonctionnalité "Forgot your password ?". Et je créé un nouvel utilisateur :



ASP.NET Core 3.0 - Create a new User

Là non plus c'est pas des plus fun mais il y l'essentiel.

Ah c'est mots de passe quelle chianlie !

Puis finalement, je peux cliquer sur Register pour créer mon nouvel utilisateur :


ASP.NET Core 3.0 - Création de tout un système d'authentification

Avec ASP.NET Core 3.0, c'est drôlement bien fait, tout est là, la base ASP.NET d'authentification a été crée. Les explications de ce qu'il faut faire pour continuer nous sont données.

Je vous laisse poursuivre la découverte de ce nouveau module que j'identifierai par IdentityServer4, cela me rappelle mes premières applications ASP.NET en 2003 avec mon premier projet dans le CodePlex : "Login Module".

Par la suite, il faut savoir comment séparer votre application métier de toute la mécanique d'authentification.

Have fun!




Quel est le meilleur framework front pour ASP.NET Core ?

J'ai envie de passer un peu de temps à me poser cette question, je suis adepte d'Angular mais pourquoi pas autre chose et qu'est ce que cela impliquerait pour mon application développée avec ASP.NET Core en C# ?

La question est vite entendue avec une autre question, un peu équivalente posée par l'excellent site Développez.com qui a posé cette question sous la forme suivante : Quels sont les frameworks que vous aimeriez apprendre en 2019 ? Et quelles sont vos motivations ?

En effet cette question consiste à demander aux développeurs dans quel Frameworks seriez vous prêt à investir votre temps ? Le temps, c'est le nerf de la guerre en cette matière, pour ma part je déteste investir du temps pour prendre en main une technologie qui sera en suite abandonnée rapidement (cf. Silverlight).

C'est bien aussi pour cette raison que je souhaite être le plus certain possible de faire le bon choix. Vous pouvez voter sur le site de Développez.com pour répondre à ce sondage que voici :



Développez.com - Quels sont les frameworks que vous aimeriez apprendre en 2019 ?

Concernant Angular le site précise :

Angular est un framework coté client open source développé par Google et basé sur TypeScript. Il s'agit d'une réécriture complète du framework JavaScript AngularJS, construit par la même équipe.
On peut déjà verser une larme pour ceux qui ont investi massivement sur AngularJS encore qu'ils ont certainement pu s'adapter rapidement ...

C'est une bonne chose lire cela : "la même équipe". Ce n'est pas donné souvent cette opportunité de réécrire une stack en améliorant et en corrigeant la précédente. Ca dénote un vrai respect pour le travail de l'équipe de dev.

En suite, c'est donc le choix de Google basé sur un langage TypeScript créé par Microsoft, c'est donc le bon combo à mon humble avis.


Angular CLI

Et puis Angular, entre nous cela permet de faire l'impasse sur le Razor et entre Razor et Razoir, il n'y a qu'une lettre, vous ne trouvez pas !

Mise à jour en 2020

Et surtout pour le choix d'un framework javascript il y a ce fameux document :

The Ultimate Guide to JavaScript Frameworks

Et pour étayer il y a ce post où je découvrais les frameworks JavaScripts proposés avec Visual Studio

Que penser de React pour ASP.NET Core ?

Si vous tombez sur ce post :

https://2018.stateofjs.com/front-end-frameworks/angular/

Attention les chiffres sont trompeurs. C'est le seul article qui donne React en tête, je suis circonspect ... Sinon souvenons-nous que React est le framework de Facebook et que Angular est soutenu par Google qui a adopté le TypeScript langage créé par Microsoft.

Pour moi Angular est donc le bon choix, CQFD !

ASP.NET Core & AuthorizationPolicyProvider

Un peu de lecture au sujet de l'Authorization Policy, comment définir un Provider dans mon application ASP.NET Core MVC :

C# Corner - Creating Custom Authorization Policy Provider In ASP.NET Core

Et l'article que l'on me propose ensuite :

C# Corner - Claim Based And Policy-Based Authorization With ASP.NET Core 2.1

Et pendant que j'y suis :

C# Corner - Role Base Authorization In ASP.NET Core 2.1

Et donc avec ça, j'ai résolut les problèmes de droits d'accès dans mon application ASP.NET Core & Angular.

Au hasard de mes pérégrinations sur Github je tombe sur les travaux de damienbod

Github - damienbod
J'y reviendrai son github est intéressant à plusieurs titres et concernant l'authentification.

To Be Continued

ASP.NET Core & Entity Framework & Angular - Architecture d'une application professionnelle

Voici une stack stable ASP.NET Core & Angular et bien sûr Entity Framework Core pour l'accès aux données. Une stack avec laquelle on peut développer durablement des applications webs. Dans ce post j'aborde les solutions pour réaliser une vraie application ASP.NET Core & Angular (full stack).

Après la mise en bouche de l'article 1 :

ASP.NET Core & Angular Template - 1
Apprendre à installer et à exécuter une Application ASP.NET Core & Angular

Suivi de l'article 2 :

ASP.NET Core & Angular Template - 2
Apprendre à lancer le Server Angular CLI depuis Visual Studio Code indépendamment du processus ASP.NET Core.

Je définis l'architecture d'une véritable application du monde réel avec des vraies données.

ASP.NET Core et Visual Studio Community 2019 nous donne maintenant accès à un Template d'application Angular. Angular c'est du langage TypeScript, ce langage développé par Miscrosoft et adoubé par Google, alors allons y.

Etude de faisabilité et architecture

Les Design Patterns de notre Application :

Microsoft - Implémenter la couche de persistance de l’infrastructure avec Entity Framework Core

Le schéma suivant est intéressant :



Utilisation de dépôts personnalisés par rapport à un simple DbContext

Voici les deux Patterns principaux de notre Application ASP.NET Core & Angular, le "Repository" et le "UnitOfWork" qui rassemblent les objets récupérés depuis la base de donnée.

Ce projet est du type SPA (Single Page Application) ce qui implique cette organisation avec un Repository pour tout charger au lancement de l'application. Cela donne une bien meilleure réactivité à l'interface utilisateur.

Voici un peu de code avec la page suivante :

Micorsoft - Tom Dykstra - Implementing the Repository and Unit of Work Patterns in an ASP.NET MVC Application

Pattern IoC, Repository and Unit Of Woks sont des mots clefs qui sonnent bons dans le cadre de ce projet. Alors allons y défrichons !

Il s'agit donc du DDD (Domain Driven Design).

Je regarde les travaux de Tugberk Ugurlu

Tugberk Ugurlu - Generic Repository Pattern - Entity Framework, ASP.NET MVC and Unit Testing Triangle

Ce sont les travaux les plus avancés en matière de "Repository Pattern" mais dans sa "Best approach" à mon sens il va trop loin en générifiant également le contexte dans la classe abstraite suivante :

public abstract class GenericRepository<C, T> :
    IGenericRepository<T> where T : class where C : DbContext, new() {

Autres liens utiles pour travailler avec ASP.NET Core EF et Angular

Arch - UnitOfWork
Joli projet à étudier, bel exemple de pattern Repository et Unit Of Work

CODE MAZE - Implementing Asynchronous Generic Repository in ASP.NET Core
Le modèle Repository augmente le niveau d'abstraction dans votre code. Cela peut rendre le code plus difficile à comprendre pour les développeurs qui ne sont pas familiarisés avec ce pattern. Mais une fois que vous en aurez pris connaissance, cela réduira la quantité de code redondant et facilitera la maintenance de la logique.

Et encore Ici :

.NET Entity Framework Core Generic Async Operations With Unit Of Work Generic Repository

Voilà, avec tous ces éléments, nous sommes en mesure de réaliser le projet d'un Dashboard Universel qu'il suffirait de brancher sur une base de données pour en connaitre les éléments essentiels et afficher dans une interface Web en Angular leurs évolutions dans le temps.

Spécifications du projet

Je souhaite utiliser au maximum les possibilités d'Angular et le rafraichissement des datas en provenance d'une base de données afin de réaliser un Dashboard Universel (un Tableau de bord) afin de maitriser le SI (Système d'Information de l'entreprise).

Mon projet réalise du Monitoring de données et permet à l'utilisateur de positionner des indicateurs, des "vue mètres", des gauges, des graphiques afin de permettre l'observation des données en fonction du temps (en temps réel ;-).

Exemple : J'ai à traiter 1000 tickets sur ma plateforme de Call Center. Tout au long de la journée des opérateurs interviennent pour traiter ces tickets, ils mettent à jour la case "NbTicket" dont la valeur augmente d'heure en heure.

Voici le graphique que j'obtiens à la fin de la journée :

Le Graphe de mon Data Monitor sur les tickets traités

Les opérateurs démarrent à 8 h et terminent à 19 h.

Voici encore quelques exemples de projets Dashboard desquels s'inspirer :

Dashing - The exceptionally handsome dashboard framework

Et ceux qui en parlent le mieux, ce sont eux :

Agile Tribu - DASHING DEUX EN UN : POUR UN DASHBOARD ÉTINCELANT !

Je sais ça fait des dizaines d'années que l'on cherche à faire un "Dashboard" pour ma part, j'ai débuté en 2011 avec Silverlight ce fut un fiasco. Je crois qu'avec Angular, on peut faire quelque choses de bien.

Ici c'est magique
Attention cela ne fonctionne pas pour le navigateur IE !

Mon projet, c'est donc de faire un Shopify/dashing en C#.NET

dashing.net is a direct .net port of the dashing framework originally created by Shopify/dashing

De faire du monitoring de données et le meilleur site pour en parler que j'ai trouvé c'est ici :

Informatica - What is Data Monitoring?

Un autre site avec des acteurs du "Data Monitoring"

solarwinds - Server & Application Monitor

Et là, il y de superbes graphiques :

https://solutionsreview.com/network-monitoring/

IHM ou Front

C'est une application Angular CLI que l'on ouvre avec Visual Studio Code pour y lancer la commande du type :

>ng serve

Exemple de Dashboard :

DevExpress - Sales & Revenue Dashboard

Application ASP.NET Core & Angular

Le répertoire ClientApp héberge l'application Angular au sein du répertoire src autour de l'application Angular pour qu'elle fonctionne il y a plein de trucs "Windows".

Autour du Répertoire "ClientApp" nous avons :

Le fichier Startup.cs

Avec ASP.NET Core contrairement à ASP.NET Framework, il y a plus d'ouvertures vers des extensions "libres" et donc plus de choses à configurer à travers le fichier Startup.cs.

J'ai une erreur du type :

Severity Code Description Project File Line Suppression State
Error CS1929 'CompatibilityVersion' does not contain a definition for 'SetCompatibilityVersion' and the best extension method overload 'MvcCoreMvcBuilderExtensions.SetCompatibilityVersion(IMvcBuilder, CompatibilityVersion)' requires a receiver of type 'IMvcBuilder'

Heureusement il y a StackOverFlow :

StackOverflow - How to fix 'IMvcBuilder' doesn't contain a definition for 'AddXmlDataContractSerializerFormatters'

>PM Install-Package Microsoft.AspNetCore.Mvc.Formatters.Xml

Mais je croyais que les Packages Nugets étaient réinstallés automatiquement !

IConfigurationSection

IServiceCollection.Configure

Fichier de configuration appsettings.json

D'où viennent les paramètres de configuration ? Il n'y a plus de fichier Web.Config mais il y a ce code :

var environment = Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT");

var config = new ConfigurationBuilder()
                .SetBasePath(pathToContentRoot)
                .AddJsonFile("appSettings.json", optional: true, reloadOnChange: true)
                .AddJsonFile($"appsettings.{environment}.json", optional: true)
                .Build();

Alors d'où vient la variable d'environnement : ASPNETCORE_ENVIRONMENT

ASPNETCORE_ENVIRONMENT value = Development

MSDN - Utiliser plusieurs environnements dans ASP.NET Core 

Dependency Injection

Un sujet à travailler autour de la fonction AddMvc : MVC services to the specified Microsoft.Extensions.DependencyInjection.IServiceCollection

AddMvc Extensions.DependencyInjection AddJsonOptions

Localisation

Localization de l'application c'est un sujet qu'il faut prendre en compte au début du développement. Le meilleur site que j'ai trouvé pour ça :

Blog of Joonas W. - ASP.NET Core Localization Deep Dive

Couche Model

Implémentation des Models de base de données avec EF Core, c'est un jeu d'enfant.

Couche Business

Autour de l'objet DbContext elle crée les services de l'application liés au métier, du type :

ObjetQueryBusiness
ObjetDefinitionBusiness

Implémente le Pattern UnitOfWork

Implémente l'interface de l'ensemble des données du projet : MyProject

IMyProjectBusiness

Création d'un objet SQL Server Connector

Il s'agit de créer un Multiconnectors pour gérer les liaisons aux bases de données, il faut être capable de se connecter à tout type de base données c'est prévu de base par EF Core.

Ca me rappelle mes bonnes vielles applications webs asp.net avec des connecteurs multiples à des bases multiples et puis à maintenir, c'était tellement compliqué qu'à la fin on finissait par ne choisir plus qu'un seul modèle de connecteur : SQLServer !

ASP.NET Core SqlServeur Connector

Entity Framework - Fournisseurs de base de données

GetQueryResultJsonAsync
  ReceiveToJsonAsync
    Exécution d'une query et retour en Json
    REST services with ASP.NET Core and SQL Database
    syed-afraz-ali/SqlDataReaderExtensions.cs
    Mais aussi par ici : blog4rami - SqlDataReader to JSON string

EntityDatabaseTransaction

On regardera également du côté de :

GitHub - EntityFramework.SqlServerCompact

Couche Data Access Layer (DAL)

On doit y Implémenter le Pattern Repository
Possède le répertoire "Migrations" et les éléments nécessaires à l'accès aux base de données.

Implémente la Class MyProjectDbContext qui dérive de DbContext.

Question : Quelles différences entre les fonctions DbSet et Set() dans Entity Framework Core ? Avec la réponse sur ce site intéressant :

Entity Framework Core Tutorial
Vous utilisez DbSet lorsque vous connaissez le type d'entité avec lequel vous souhaitez jouer. Vous utilisez Set<> lorsque vous ne connaissez pas le type d'entité avec lequel vous voulez jouer.

Les Widgets

L'avantage avec l'utilisation de JavaScripts, c'est qu'il existe bon nombre de librairies graphiques de contrôles utilisateurs prêts à être utilisés. Pour n'en citer qu'une je prendrai ZingChart :

Zingchart - Gauge Chart Type Demos
De magnifiques Gauges


Zingchart - Your First JavaScript Chart



Conclusion

L'architecture des applications ASP.NET Core est complexe avec de nombreuses possibilités de configuration grâce à l'Injection des Dépendances et des modules tiers. Nous allons aborder chacun de ces morceaux pour créer l'architecture d'une Véritable application ASP.NET Core & Angular.

Pour terminer l'étude de ce projet de "Dashboard Universel", encore un peu de lecture au sujet des Widgets, je vous laisse avec la lecture de la page suivante :

BFM Business - Le standard Universal Widget API

Et maintenant notre produit final, une solution Open Source : 

Dashboard Universel

ASP.NET Core & Angular - Dashboard Universel

Come and visit us you'll be always welcome !

Have great fun!


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!

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!