Supprimer le composant dans Angular
Nous allons présenter comment nous pouvons supprimer un composant dans Angular.
Supprimer le composant dans Angular
Lorsque nous construisons une application Web qui contient plusieurs composants, nous pouvons rencontrer une situation dans laquelle nous devrons peut-être supprimer un composant pour une raison quelconque.
Il est assez facile de créer un composant dans Angular à l’aide de Angular CLI, mais il n’y a pas d’option pour supprimer un composant à l’aide de Angular CLI, nous devons donc le supprimer manuellement.
La suppression d’un composant n’est pas facile, car cela peut planter notre application Web si toutes les instances de notre composant ne sont pas supprimées correctement.
Ce didacticiel passe en revue un exemple dans lequel nous allons créer un composant à l’aide d’Angular CLI, puis le supprimer étape par étape afin qu’il vous soit plus facile de comprendre et de suivre toutes les étapes.
Créons une nouvelle application en utilisant la commande suivante.
# angular
ng new my-app
Après avoir créé notre nouvelle application dans Angular, nous irons dans notre répertoire d’application à l’aide de cette commande.
# angular
cd my-app
Maintenant, exécutons notre application pour vérifier si toutes les dépendances sont correctement installées.
# angular
ng serve --open
Nous allons créer un nouveau composant en utilisant la commande suivante.
# angular
ng g c newcomponent
Vous pouvez voir qu’un nouveau dossier newcomponent est créé dans le dossier App qui contient 3 fichiers newcomponent.component.ts, newcomponent.component.html et newcomponent.component.css. Voyons maintenant comment nous pouvons supprimer ce composant.
Suivez ces étapes pour supprimer facilement un composant sans aucune erreur dans notre application Web.
-
Supprimez le dossier du composant
nouveau composant, y compris tous les fichiers qu’il contient. -
Si votre composant n’a pas de dossier séparé, vous devrez peut-être supprimer les fichiers portant le même nom que votre composant. Dans mon exemple, nous allons supprimer 3 fichiers
newcomponent.component.ts,newcomponent.component.html, etnewcomponent.component.css. -
Ouvrez
app.module.tset supprimez où votre composant est importé, comme indiqué ci-dessous.# angular import { NewComponent } from './newcomponent.component'; -
Supprimez maintenant la déclaration du composant dans
@NgModulecomme indiqué ci-dessous.# angular @NgModule({ imports: [ BrowserModule, FormsModule ], declarations: [ AppComponent, HelloComponent, NewComponent ], bootstrap: [ AppComponent ] })
Après avoir suivi ces étapes, nous pouvons démarrer notre application Web à l’aide de la commande suivante.
# angular
ng build
ng serve
Il chargera notre application Web sans aucune erreur. Nous pouvons supprimer un composant manuellement et correctement en suivant ces étapes simples et faciles.
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn