Premiers pas avec Nx (Nrwl Extensions) dans Angular

Parrainé par l'interface utilisateur de Kendo pour l'équipe Angular

Vous souhaitez en savoir plus sur la création d'excellentes applications Web angulaires? Tout commence avec Kendo UI for Angular – une bibliothèque de composants d'interface utilisateur complète qui vous permet de créer rapidement des applications réactives de haute qualité. Il comprend tout ce dont vous avez besoin, des grilles et graphiques aux listes déroulantes et jauges.

L'équipe de Kendo UI for Angular s'engage à vous fournir les derniers conseils et astuces dans le monde du développement angulaire. Nous espérons que vous apprécierez le post!

Dans cet article, nous verrons comment utiliser Nx (Nrwl Extensions) pour créer une application complète. L'application comportera une application frontale construite avec Angular et une application dorsale utilisant Nest.js.

Nrwl Extensions (Nx) est un projet lancé par les développeurs Google. Il s'agit d'un projet open source qui fournit un ensemble d'extensions (schémas et constructeurs) permettant d'étendre les fonctionnalités de la CLI angulaire. Il fournit des commandes pour créer des espaces de travail contenant plusieurs projets. Nrwl Extensions fournit non seulement des commandes pour la gestion de projets angulaires complexes et robustes, mais également pour la création de projets de pile complète à l'aide de Express et de Nest.js.

Dans cet article, nous allons voir comment créer et exécuter une pile complète. application utilisant Nest.js et Angular.

Avant de commencer, cet article requiert une compréhension de base de Angular et de Nest.js.

Application d'initialisation

Nrwl ne remplace pas la CLI angulaire – il étend la fonctionnalité de la CLI avec commandes permettant de créer plusieurs applications dans un espace de travail. Pour commencer à utiliser Nrwl, vous devez d'abord installer l'interface de ligne de commande angulaire. Exécutez la commande suivante pour installer le CLI:

	 npm   install  -g @ angular / cli

Pour utiliser Nrwl, vous avez la possibilité de l'installer globalement en exécutant la commande suivante:

	 npm   install  -g @ nrwl / schematics

Vous pouvez également tirer parti de la puissance de npx pour créer un espace de travail à l'aide de l'espace de travail create-nx-work :

	 npx create-nx-workspace my-workspace

Si vous souhaitez intégrer Nx dans une application Angular existante, exécutez la commande suivante dans un terminal du dossier de votre projet:

	 Ng add @ nrwl / schematics

Pour commencer à créer notre projet, nous allons créer un espace de travail à l’aide de la commande create-nx-workspace . Exécutez la commande suivante pour créer un espace de travail appelé fullstack-angular .

	 create-nx-workspace fullstack-angular

Cette commande générera un espace de travail ne contenant aucune application démarrée. Un espace de travail fournit une configuration pour la liste utilisant tslint le support de l'éditeur pour le linting utilisant tsconfig.json et plus jolie pour le formatage du code

Il fournit également un ] jest fichier de configuration pour un test rapide. Jest est un framework de test de Facebook.

Ensuite, nous verrons comment créer et servir une application frontale fonctionnant sous Angular à l'aide de la CLI et de Nx.

Création de l'application frontale

Nx is a smart outil qui prend en charge un style de développement mono-repo. Cela permet aux projets de l'espace de travail d'interagir les uns avec les autres. Avec Nx, vous pouvez gérer différents types de projets dans l'espace de travail, allant des bibliothèques aux applications.

Nx fournit un outil de visualisation qui vous permet de voir comment les projets de votre espace de travail sont connectés. Vous pouvez accéder à cet outil en exécutant la commande suivante:

	 npm  dep-graph

Ng Generate Application my-store.

Après avoir exécuté cette commande, vous verrez différentes invites. Passons en revue chacun d’entre eux:

	? Dans  quel répertoire  l'application doit-elle être générée?

La première commande vous demande où vous souhaitez que votre application soit générée. Il est préférable de laisser ce champ vide afin que votre application soit générée dans le dossier apps de l'espace de travail.

	? Souhaitez-vous ajouter un routage angulaire?  ( a / N ) 

L'invite suivante concerne le routage. Si vous souhaitez créer des itinéraires dans votre application, répondez avec et ou vous pouvez ignorer cette invite.

PS: Vous pouvez toujours ajouter le routage ultérieurement dans votre application.

	? Quelle feuille de style  format  aimeriez-vous utiliser?  ( Utilisez les touches fléchées ) 
❯ CSS
SCSS  [ http://sass-lang.com ] 
SASS  [ http://sass-lang.com ] 
MOINS  [ http://lesscss.org ] 
Stylet  [ http://stylus-lang.com ] 

Le prochain message vous demande quelle est votre feuille de style. Si vous préférez travailler avec des pré-processeurs, vous pouvez choisir celui avec lequel vous êtes le plus à l'aise.

	? Quel Test Unit Unit souhaitez-vous utiliser  pour  l'application?  ( Utilisez les touches fléchées ) 
Karma  [ https://karma-runner.github.io ] 
❯ Jest  [ https://jestjs.io ] 

Vous devez choisir ici le programme de test unitaire que vous souhaitez utiliser avec votre application. Jest a déjà été configuré pour l’espace de travail, je le recommande donc. Mais vous pouvez toujours choisir Karma si vous êtes plus à l'aise avec cela. C’est formidable d’avoir des options et Nx fournit bien ces options.

	? Quel E2E Test Runner souhaitez-vous utiliser  pour  l'application?  ( Utilisez les touches fléchées ) 
❯ Cyprès  [ https://www.cypress.io ] 
Rapporteur  [ https://www.protractortest.org ] 

Ensuite, vous avez l'invite e2e . Vous pouvez utiliser l’un ou l’autre choix, selon votre application.

Enfin, vous trouverez l’invite des balises que vous pouvez laisser vide. Cette invite vous demande si vous souhaitez ajouter des balises qui seront utilisées pour le peluchage dans votre application:

	? Quels tags souhaitez-vous ajouter à l'application?  ( utilisé  pour  linting ) 

Encore une fois, vous pouvez laisser ce champ vide.

Après les invites, la commande génère une application Angular dans le dossier apps elle génère également un dossier e2e pour l'exécution en cours. test de fin pour l'application. Vous pouvez démarrer l'application en exécutant la commande ci-dessous:

	 ng serve my-store

Ceci devrait démarrer votre application sur http: // localhost: 4200.

Nx fournit une commande permettant d'intégrer la gestion des états dans notre application à l'aide de @ ngrx / store . L'exécution de la commande ci-dessous générera des actions et actionsTypes pour remplir votre magasin et un réducteur pour agir sur les actions envoyées. Pour en savoir plus sur l'utilisation de @ ngrx / store vous pouvez visiter leur site officiel et consulter leur documentation complète.

Exécutez la commande suivante pour ajouter la gestion d'état à my-store . ] application:

	 ng générer des todos ngrx --module  =  apps / my-store / src / app / app.module.ts

La commande ci-dessus indique à la CLI de générer un magasin ngrx nommé todos dans le module d'application my-store . Si vous vérifiez votre dossier apps / my-store / app vous devriez voir un dossier nouvellement généré appelé + state . Il contient des fichiers pour les actions les effets les sélecteurs et le réducteur . Il contient également des fichiers de spécification pour les tester.

Création de l’application dorsale

L’application dorsale utilisera Nest.js . Selon la documentation:

Nest est un cadre permettant de créer des applications serveur Node.js évolutives et évolutives. Il utilise le code JavaScript progressif, est construit avec TypeScript (préserve la compatibilité avec le code JavaScript pur) et combine des éléments de programmation orientée objet, de programmation fonctionnelle et de programmation fonctionnelle réactive.

Nx offre deux cadres pour création d'applications dorsales: Express et Next.js . Nous allons utiliser Nest.js en raison de sa similitude avec Angular et de son intégration transparente aux applications Angular. Cela engendre la familiarité, car Nest.js utilise des techniques de développement similaires. Ils utilisent des modules, des fournisseurs et des canaux exactement comme Angular et des contrôleurs à la place de composants.

Avec Nx, vous pouvez créer une application dorsale qui communique de manière transparente avec l'application frontale à l'aide de la commande suivante:

	 ng generer node- app store-api --frontend-project  =  mon magasin

La commande ci-dessus crée une application Node appelée store-api et crée un proxy pour l'application my-store Angular. Cela facilite la communication entre l'application Angular et le serveur.

En exécutant cette commande, vous serez confronté à des invites vous demandant votre framework de choix, le framework de test unitaire, etc. Le framework de ce projet est Nest.js, assurez-vous donc de sélectionner cette option.

Une fois la commande exécutée avec succès, démarrez le serveur en exécutant la commande ci-dessous:

	 ng serve store-api

Ensuite, vous pouvez visiter http: // localhost: 3333 / api. Votre point de vue devrait être similaire à la capture d'écran ci-dessous:

Demandes

Voyons comment nous pouvons faire des demandes à l’application dorsale. Nx a simplifié la tâche en créant un proxy pour le backend. Dans l’application my-store , il y a un fichier proxy.conf.json et dans le fichier se trouve la configuration pour les demandes de proxy:

	 {
	   "/ api" :   {
	     " cible ":  " http: // localhost: 3333 "
	    " sécurisé ":   false 
	  } 
	} 

Ce qui signifie que si nous voulons communiquer avec le serveur, nous ferons une demande à / api endpoint et il transmettra un proxy à http: // localhost: 3333 .

Ensuite, mettons à jour l'application Angular pour extraire des éléments du backend ( store-api ). Ouvrez le fichier apps / my-store / src / app / app.component.ts et mettez-le à jour pour qu'il envoie une demande au serveur à l'aide du HttpClient :

	
	
	 import [19659074] { Composant  OnInit }   de   '@ angular / core' ; 
	 import   { HttpClient  }   de   '@ angular / common / http' 
	 import   { Observable }   de   'rxjs' ; 
	
	 interface   Produit  {
nom :  String ; 
price :  Nombre ; 
stock :  Numéro
} 

@  Composant  ( {
sélecteur :   'racine superposée-angulaire' 
templateUrl :   './ app.component.html' 
styleUrls :   [ './ app.component.css' ] 
	} ) 
	
	 classe d'exportation     AppComponent  
produits :  Observable  < Produit  [] > ; 
	
	   constructeur  ( privé  http :  HttpClient )  {
	     ceci .  produits  =   ceci .  http . 
	. get  < Produit  [] >  ( '/ api / products' ) ;  }  }  

Ensuite, nous mettrons à jour le modèle de vue pour afficher la liste des produits. Ouvrez le fichier apps / my-store / src / app / app.component.html et copiez l'extrait de code ci-dessous dans le fichier:

	 < section > 
	   < ul > 
	     < li   * ngFor  =  "" Produit de produits | async  " > [19659149] Nom:  < span >  {{product.name}}  </  span >   < br [19659073] /> 
	       Prix:  < span >  {{product.price}}  </  span >   < br  /> 
	       Stock:  < span >  {{product.stock}}  </  span > 
	        < hr > 
	     </  li > 
	   </  ul > 
 </  Section > 

Ensuite, nous importerons le HttpClientModule dans le fichier app.module.ts du projet. Ouvrez le fichier et incluez le HttpClientModule dans le tableau importations .

	
	
	 import   { BrowserModule }   de   à partir de   '@ angular / platform-browser '; 
	 import   { NgModule }   de   à partir de  ' @ angular / core '; 
	
	
	
	 import   {@  HttpClientModule }   de   '@ angular / common / http' ; 


@  NgModule  ( {
déclarations :   [ composant d'application ] 
importations :   [

HttpClientModule 
	  ] 
fournisseurs :   [] 
bootstrap :   [ AppComponent ] 
	 ) 
	 classe d'exportation   de classe   AppModule   {] 
	 Création de la Point de terminaison Products 
 Dans l'application Angular, nous adressons une demande au point de terminaison  api / products . Cet itinéraire n'a pas été créé dans l'application de nœud. Mettons à jour le contrôleur de l'application pour créer un itinéraire  produits  qui renvoie une liste de produits. 
 Ouvrez le fichier  apps / store-api / src / app / app.controller.ts . et le mettre à jour pour qu'il soit similaire au code ci-dessous: 
	
	
	 import   { Contrôleur  Get }   de   '@ nestjs / common'  
	
	 import   { AppService }   de   './ app.service' ; 

@  Contrôleur  () 
	 export   class   AppController   {
	   constructeur  ( private  privé en lecture seule [Serveurervice:  AppService )   {} 

@  Get  ( 'produits' ) 
	   getData  ()   {
	     retour   ceci . . appService .  getData  () ; 
	  } 
	} 
 Puis mettez à jour le fichier de service ( app.service.ts ) pour renvoyer la liste des produits:
	 import   { Injectable }   de   ] '@ nestjs / common' ; 
	
	 interface   Produit  {
nom :  String ; 
price :  Nombre ; 
stock :  Numéro
} 

@  Injectable  () 
	 classe d'exportation     AppService   {
	   privé  :  Produit  [[19659073]]   =   [
	     {
nom :   'Premier produit' 
prix :   22.45 
stock :   10 
	    } 
	     {
nom :   'Deuxième produit' 
prix :   12.45 
stock :   5 
	    } 
	  ] 
	  
	   getData  () :  Produit  []   {[19659125] return   this .  produits ; 
	  } 
	} 
 Lancez le noeud de noeud en lançant la commande suivante ( ng serve store-api ) et l'interface utilise  ng serve my-store . Naviguer vers http: // localhost: 4200 et vous devriez voir quelque chose de similaire à la capture d'écran ci-dessous:
   ici .
 Conclusion
 Dans cet article, nous avons vu comment utiliser Nx pour créer une application complète, qui comportera une application frontale construite avec Angular et une application dorsale utilisant s Nest.js. Nx fournit des extensions à la CLI angulaire qui nous aident à gérer des espaces de travail pouvant comporter plusieurs applications et bibliothèques. Ces espaces de travail offrent une configuration qui prend en charge les peluches en utilisant  tslint  et  plus jolie  pour le formatage du code. Consultez la documentation officielle du projet   pour en savoir plus sur le projet.