Angular 14—Présentation des composants autonomes

Angular 14 introduit le composant autonome – un composant ne faisant partie d’aucun ngModule qui peut être utilisé avec d’autres composants autonomes ou basés sur des modules.

À partir d’Angular 14, vous pouvez créer l’ensemble de l’application sans créer de modules Angular personnalisés, ce qui est possible en utilisant composants autonomesqui fournissent des moyens simplifiés de créer une application Angular.

Qu’est-ce qu’un composant autonome ?

Un composant autonome est un type de composant qui ne fait partie d’aucun module angulaire. Avant Angular 14, généralement lorsque vous créiez un composant, vous le passiez dans le tableau de déclarations d’un module. Si vous ne le faisiez pas, Angular s’en plaindrait et ne compilerait pas. Cependant, à partir d’Angular 14, vous pouvez créer un composant qui ne fait partie d’aucun ngModule, et ce composant est appelé composant autonome.

Outre les composants autonomes, dans Angular 14, vous pouvez également créer :

• Directives autonomes
• Tuyaux autonomes

Vous pouvez utiliser un composant autonome avec :

• Composants basés sur des modules
• Autres composants autonomes
• Chargement des itinéraires
• Chargement paresseux

Un tuyau autonome ressemble à ce qui suit :

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'search',
  standalone: true
})
export class SearchPipe implements PipeTransform {

  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }
}

Création d’un composant autonome

Vous pouvez créer un composant autonome, un canal ou une directive en utilisant le --standalone drapeau dans la commande ng generate component :

• ng g p search --standalone
• ng g d credit-card --standalone
• ng g c login --standalone

Après avoir exécuté avec succès la dernière des commandes ci-dessus, vous pouvez trouver un composant de connexion ajouté à l’application comme ci-dessous. Ici, vous remarquez que la propriété autonome du décorateur de composant est vraie.

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

Tout composant, directive ou tube autonome ne nécessite pas de faire partie d’un ngModule. Par erreur, si vous essayez d’ajouter un composant autonome à un module, Angular s’en plaint en lançant une erreur comme indiqué ci-dessous.

Vous pouvez également convertir un composant existant en un composant autonome en définissant son standalone propriété à true. Vous devez garder ces trois points à l’esprit lors de la conversion d’un composant basé sur un module en un composant autonome :

1. Définissez la propriété autonome sur true.
2. Supprimez-le du tableau de déclaration du module dont il faisait partie.
3. Utilisez le tableau des importations pour ajouter des dépendances.

Dépendances dans le composant autonome

Un composant autonome peut dépendre d’autres membres, canaux et directives. Ces dépendances peuvent être divisées en deux parties :

1. Autonome
2. Partie d’un module

Les deux types de dépendances peuvent être ajoutés à un composant autonome à l’aide de imports tableau de la @Component décorateur. Par exemple, ReactiveFormsModule peut être ajouté au LoginComponent en le transmettant au imports tableau comme indiqué dans la liste de code ci-dessous :

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

Pour utiliser un composant basé sur un module dans un composant autonome, transmettez-le dans le tableau des importations du composant autonome.

Utilisation d’un composant autonome

Vous pouvez utiliser un composant autonome, une directive ou un tube de deux manières :

1. À l’intérieur d’un autre composant autonome
2. A l’intérieur d’un module

Pour les deux options, transmettez-les dans le tableau des importations et gardez également à l’esprit que vous ne transmettez pas de composants autonomes dans le déclaration tableau des modules.

Donc, pour l’utiliser dans AppComponent, qui fait partie d’AppModule, vous pouvez le passer au tableau imports comme indiqué ci-dessous :

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    LoginComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Vous pouvez maintenant l’utiliser sur l’AppComponent comme ci-dessous :

<h1>App</h1>

<app-login></app-login>

Vous pouvez utiliser un composant autonome dans un autre composant autonome en le passant au imports propriété de ce composant autonome comme indiqué ci-dessous :

@Component({
  selector: 'app-product',
  standalone: true,
  imports: [CommonModule, LoginComponent],
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

Amorçage du composant autonome

Angular 14 vous permet de démarrer l’ensemble de l’application à l’aide d’un composant autonome. Pour amorcer une application à l’aide d’un composant autonome, suivez les étapes décrites ci-dessous.

Dans le main.tsimportez le composant autonome à démarrer et bootstrapapplication fonctionnent comme indiqué ci-dessous :

import {bootstrapApplication} from '@angular/platform-browser';
import { ProductComponent } from './app/product/product.component';

Après cela, appelez bootstrapapplication et passez-y le composant comme indiqué ci-dessous :

bootstrapApplication(ProductComponent,{
  providers:[]
});

Ensuite, sur le index.html, remplacez app-root avec votre composant.

<body>
  
  <app-product></app-product>
</body>

Maintenant, lorsque vous exécutez l’application, l’application doit démarrer à partir de ProductComponent.

Routage avec composant autonome

Un application d’entreprise doit avoir différents itinéraires afin que l’utilisateur puisse naviguer dans différents composants en modifiant l’URL. Ainsi, pour prendre en charge cette fonctionnalité, un composant autonome peut également être utilisé pour créer des itinéraires et être chargé paresseux.

• Une route peut être créée avec un composant autonome.
• Lors de la création d’une route comme des modules, un composant autonome peut également être chargé paresseux.
• Une route enfant peut également être chargée paresseusement avec tous les composants du routeur de manière autonome.
• Un injecteur distinct peut être transmis à une route de composant autonome.

Disons que vous avez démarré l’application avec AppComponent autonome et ajouté <router-outlet></router-outlet> au modèle de sorte que différentes routes puissent être chargées ici.

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';

const template = `
<h1>{{title}}</h1>
<router-outlet></router-outlet>
`
@Component({
  selector: 'app-root',
  standalone:true,
  imports:[CommonModule,  RouterModule,],
  template : template,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Stand alone component App';
}

Ajout d’itinéraires

Maintenant, pour créer des itinéraires, ajoutez un fichier et nommez-le comme vous le souhaitez. je lui donne le nom app-routing.ts. Dans ce fichier, configurez la route avec la route d’accueil naviguant vers le composant Home comme ci-dessous :

import { Routes } from "@angular/router";
import { HomeComponent } from "./home/home.component";

export const APP_ROUTES: Routes = [
    {
        path: '',
        pathMatch: 'full',
        redirectTo: 'home'
    },
    {
        path: 'home',
        component: HomeComponent
    }
];

Après avoir ajouté des routes, démarrez l’application avec AppComponent autonome. Pour cela, dans le main.tsimportez les fonctions AppComponent, RouterModule, App_Routes et bootstrapapplication comme indiqué ci-dessous :

import { enableProdMode, importProvidersFrom, inject } from '@angular/core';
import {bootstrapApplication} from '@angular/platform-browser';
import { environment } from './environments/environment';
import { AppComponent } from './app/app.component';
import { RouterModule } from '@angular/router';
import { APP_ROUTES } from './app/app-routing';

Après cela, appelez bootstrapapplication et passez-y le composant comme indiqué ci-dessous :

bootstrapApplication(AppComponent,{
  providers: [
    importProvidersFrom(RouterModule.forRoot(APP_ROUTES))]
});

L’opération d’amorçage du composant autonome peut avoir de nombreuses dépendances, qui doivent être explicitement transmises dans le tableau des fournisseurs. Certaines de ces dépendances peuvent faire partie de ngModules, de sorte que ce module peut être nécessaire pour configurer l’injection de dépendances.

Un tel exemple est le RouterModule.forRoot() dépendance pour configurer la route de l’application. Pour mettre cela en place, Angular a fourni un utilitaire importProvidersFrom. Ici, cet utilitaire est utilisé pour injecter la dépendance du routeur d’application :

bootstrapApplication(AppComponent,{
  providers: [
    importProvidersFrom(RouterModule.forRoot(APP_ROUTES))]
});

Exécutez l’application

Lors de l’exécution de l’application, vous devez naviguer sur l’itinéraire d’accueil et obtenir HomeComponent chargé.

Jusqu’à présent, vous avez réussi :

• Amorcé l’application avec un composant autonome
• Configurer et ajouter la route

Chargement paresseux d’un composant autonome

Comme les modules, un composant autonome peut également être chargé paresseux. Vous pouvez charger paresseusement un composant autonome dans la route en utilisant le loadComponent instruction et en passant le nom du fichier composant.

 {
        path: 'product',
        loadComponent: () => import('./product/product.component')
            .then(m => m.ProductComponent)
  }

Vous pouvez ajouter une route de produit avec le composant à chargement différé en modifiant le routage de l’application :

export const APP_ROUTES: Routes = [
    {
        path: '',
        pathMatch: 'full',
        redirectTo: 'home'
    },
    {
        path: 'home',
        component: HomeComponent
    },
    {
        path: 'product',
        loadComponent: () => import('./product/product.component')
            .then(m => m.ProductComponent)
    },
    {
        path: '**',
        component: PagenotfoundComponent
    }
];

Comme vous le voyez, un nouveau produit d’itinéraire est ajouté, et il utilise le loadComponent() fonction avec l’instruction d’importation.

En exécutant l’application, vous constaterez que ProductComponent est chargé paresseusement lors de la navigation sur l’itinéraire du produit.

Chargement paresseux d’itinéraires enfants supplémentaires

Angular 14 charge également paresseusement les routes enfants avec plusieurs composants autonomes.

Configurez la route enfant avec des composants autonomes dans le fichier de routage, comme indiqué ci-dessous.

export const ADMIN_ROUTES: Route[] = [
    {
        path: '',
        pathMatch: 'full',
        redirectTo: 'home'
    },
    {path: 'home', component: AdminhomeComponent},
    {path: 'users', component: AdminduserComponent},
    {path:'dashboard',component:AdmindashboardComponent}
  ];

Vous pouvez utiliser loadChildren méthode avec import pour charger paresseusement une route enfant lorsque tous les composants routés sont autonomes. Ici, la configuration de routage ci-dessus est placée dans le fichier admin.route.

{
        path: 'admin', loadChildren: () => import('./admin/admin.route')
            .then(mod => mod.ADMIN_ROUTES)
    }

En rassemblant tout avec des composants chargés paresseux et des routes enfants, le routage de l’application devrait ressembler au code ci-dessous :

export const APP_ROUTES: Routes = [
    {
        path: '',
        pathMatch: 'full',
        redirectTo: 'home'
    },
    {
        path: 'home',
        component: HomeComponent
    },
    {
        path: 'product',
        loadComponent: () => import('./product/product.component')
            .then(m => m.ProductComponent)
    },
    {
        path: 'admin', loadChildren: () => import('./admin/admin.route')
            .then(mod => mod.ADMIN_ROUTES)
    },
    {
        path: '**',
        component: PagenotfoundComponent
    }
];

Lors de l’exécution de l’application, vous constaterez que les routes enfant Admin sont chargées paresseusement lors de la navigation sur la route admin.

Configuration de l’injection de dépendance

Lors du démarrage d’une application avec un composant autonome, vous pouvez également injecter la dépendance de l’application comme indiqué ci-dessous :

bootstrapApplication(AppComponent,{
  providers: [
    {provide:AppService,useClass:AppService},
    {provide:BACKEND_URL,useValue:"abc.com"},
    importProvidersFrom(RouterModule.forRoot(APP_ROUTES))]
});

Outre ce qui précède, lors du chargement paresseux de composants autonomes dans une route, vous pouvez fournir un service à un sous-ensemble de routes.

Emballer

Donc, comme vous le voyez, l’utilisation d’un composant autonome est très simple et vous devez commencer à travailler avec. Si vous créez un nouveau projet Angular, commencez par Angular 14 et essayez de démarrer l’application avec un composant autonome.

N’hésitez pas à me faire part de vos commentaires sur cet article et le composant autonome.