Importer directement les dépendances
Ajoutez les imports à un composant plutôt qu’à un module.
Importer directement les dépendances est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.
Importer directement les dépendances
Un composant autonome déclare ce qu’il utilise dans son propre tableau imports. Cela remplace la séparation entre déclarations et imports des NgModules.
Le tableau imports
Ajoutez les autres composants autonomes, directives et pipes au tableau imports du décorateur @Component.
import { Component } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
selector: 'app-parent',
imports: [ChildComponent],
template: '<app-child></app-child>'
})
export class ParentComponent {}Importer d’autres composants
Pour afficher un composant enfant dans votre modèle, importez sa classe. Son sélecteur devient alors utilisable.
Importer des directives
Les directives autonomes s’importent de la même manière. Une fois importées, vous pouvez les appliquer dans le modèle.
import { Component } from '@angular/core';
import { HighlightDirective } from './highlight.directive';
@Component({
selector: 'app-note',
imports: [HighlightDirective],
template: '<p appHighlight>Note</p>'
})
export class NoteComponent {}Importer des pipes
Les pipes autonomes vont également dans imports. Par exemple, l’importation d’un pipe personnalisé vous permet de l’utiliser dans une interpolation.
Directives Angular courantes
Certains outils intégrés proviennent de packages. Par exemple, RouterLink provient de @angular/router et doit être importé pour être utilisé.
import { RouterLink } from '@angular/router';
@Component({
selector: 'app-nav',
imports: [RouterLink],
template: '<a routerLink="/home">Home</a>'
})
export class NavComponent {}FormsModule et autres éléments
Vous pouvez également importer des NgModules existants dans un composant autonome. L’importation de FormsModule active les fonctionnalités des formulaires pilotés par le modèle, comme ngModel.
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-form',
imports: [FormsModule],
template: '<input [(ngModel)]="name">'
})
export class FormComponent {
name = '';
}Le flux de contrôle intégré ne nécessite aucun import
Les blocs de flux de contrôle intégrés (if, for, switch, defer) font partie du langage des modèles lui-même et ne nécessitent donc aucun import. Cela diffère des anciennes directives structurelles.
Importez uniquement ce que vous utilisez
Limitez les imports : indiquez uniquement les dépendances réellement référencées par le modèle. Vos composants restent ainsi légers et faciles à optimiser par élimination du code inutilisé.
Importer plusieurs éléments
Le tableau imports peut répertorier plusieurs éléments à la fois.
imports: [ChildComponent, HighlightDirective, RouterLink, FormsModule]Les erreurs de compilation vous guident
Si vous utilisez un sélecteur ou un pipe qui n’est pas importé, Angular signale clairement qu’il est inconnu dans ce composant. Ajoutez-le à imports pour corriger le problème.
Vérification rapide : imports
Où placer les dépendances d’un composant autonome ?
Récapitulatif : imports directs
Les composants autonomes répertorient leurs dépendances dans le tableau imports du composant : autres composants, directives, pipes et même des NgModules comme FormsModule. Le flux de contrôle intégré ne nécessite aucun import. Limitez vos imports. Ensuite : démarrer une application autonome.
Questions Fréquemment Posées
La leçon « Importer directement les dépendances » est-elle gratuite ?
Oui — le texte complet de « Importer directement les dépendances » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Importer directement les dépendances » ?
Ajoutez les imports à un composant plutôt qu’à un module. Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Angular Academy ?
Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Importer directement les dépendances » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?
Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Pourquoi utiliser des composants autonomes
- Créer des composants autonomes
- Importer directement les dépendances
- Amorcer une application autonome