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.