Quelle est la différence entre les déclarations, les fournisseurs et l'importation dans NgModule?

J'essaie de comprendre Angular (parfois appelé Angular2 +), puis je suis tombé sur @Module:

1. Importations

2. Déclarations

3. Fournisseurs

Suite au démarrage rapide angulaire

Concepts angulaires

• imports rend les déclarations exportées des autres modules disponibles dans le module actuel
• declarationssont de rendre les directives (y compris les composants et les tuyaux) du module actuel disponibles aux autres directives du module actuel. Les sélecteurs de directives, de composants ou de canaux ne sont comparés au HTML que s'ils sont déclarés ou importés.
• providerssont de faire connaître les services et les valeurs à DI (injection de dépendance). Ils sont ajoutés à la portée racine et ils sont injectés dans d'autres services ou directives qui les ont comme dépendance.

Un cas particulier pour providersles modules chargés paresseux qui ont leur propre injecteur enfant. providersd'un module chargé paresseusement sont fournis uniquement à ce module chargé paresseux par défaut (pas à l'ensemble de l'application comme c'est le cas avec d'autres modules).

Pour plus de détails sur les modules, voir également https://angular.io/docs/ts/latest/guide/ngmodule.html

• exportsrend les composants, les directives et les canaux disponibles dans les modules auxquels ce module est ajouté imports. exportspeut également être utilisé pour réexporter des modules tels que CommonModule et FormsModule, ce qui se fait souvent dans des modules partagés.

• entryComponentsenregistre les composants pour la compilation hors ligne afin qu'ils puissent être utilisés avec ViewContainerRef.createComponent(). Les composants utilisés dans les configurations de routeur sont ajoutés implicitement.

Importations TypeScript (ES2015)

import ... from 'foo/bar'(qui peut se résoudre en unindex.ts ) sont destinés aux importations TypeScript. Vous en avez besoin chaque fois que vous utilisez un identifiant dans un fichier dactylographié qui est déclaré dans un autre fichier dactylographié.

Angular @NgModule() importset TypeScript importsont des concepts entièrement différents .

Voir aussi jDriven - Syntaxe d'importation TypeScript et ES6

La plupart d'entre eux sont en fait une syntaxe de module ECMAScript 2015 (ES6) que TypeScript utilise également.

imports sont utilisés pour importer des modules de prise en charge tels que FormsModule, RouterModule, CommonModule ou tout autre module de fonctionnalité personnalisé.

declarationssont utilisés pour déclarer les composants, directives, tuyaux qui appartiennent au module courant. Tout le monde dans les déclarations se connaît. Par exemple, si nous avons un composant, disons UsernameComponent, qui affiche une liste des noms d'utilisateur et nous avons également un canal, disons toupperPipe, qui transforme une chaîne en une chaîne de lettres majuscules. Maintenant, si nous voulons afficher les noms d'utilisateur en lettres majuscules dans notre UsernameComponent, nous pouvons utiliser le toupperPipe que nous avons créé auparavant, mais la question est de savoir comment UsernameComponent sait que le toupperPipe existe et comment il peut y accéder et l'utiliser. Voici les déclarations, nous pouvons déclarer UsernameComponent et toupperPipe.

Providers sont utilisés pour injecter les services requis par les composants, directives, tuyaux dans le module.

Les composants sont déclarés, les modules sont importés et les services sont fournis. Un exemple avec lequel je travaille:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import {FormsModule} from '@angular/forms';
import { UserComponent } from './components/user/user.component';
import { StateService } from './services/state.service';    

@NgModule({
  declarations: [
    AppComponent,
    UserComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [ StateService ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

@NgModuleConstructions angulaires :

1. import { x } from 'y';: Il s'agit de la syntaxe de dactylographie standard (syntaxe du ES2015/ES6module) pour l'importation de code à partir d'autres fichiers. Ce n'est pas spécifique à Angular . De plus, cela ne fait techniquement pas partie du module, il est juste nécessaire d'obtenir le code nécessaire dans le cadre de ce fichier.
2. imports: [FormsModule]: Vous importez d'autres modules ici. Par exemple, nous importons FormsModuledans l'exemple ci-dessous. Nous pouvons maintenant utiliser les fonctionnalités que le FormsModule a à offrir tout au long de ce module.
3. declarations: [OnlineHeaderComponent, ReCaptcha2Directive]: Vous mettez vos composants, directives et tuyaux ici. Une fois déclarés ici, vous pouvez maintenant les utiliser dans tout le module. Par exemple, nous pouvons maintenant utiliser le OnlineHeaderComponentdans la AppComponentvue (fichier html). Angular sait où le trouver OnlineHeaderComponentcar il est déclaré dans le @NgModule.
4. providers: [RegisterService]: Ici, nos services de ce module spécifique sont définis. Vous pouvez utiliser les services de vos composants en injectant avec l'injection de dépendance.

Exemple de module:

// Angular
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

// Components
import { AppComponent } from './app.component';
import { OfflineHeaderComponent } from './offline/offline-header/offline-header.component';
import { OnlineHeaderComponent } from './online/online-header/online-header.component';

// Services
import { RegisterService } from './services/register.service';

// Directives
import { ReCaptcha2Directive } from './directives/re-captcha2.directive';

@NgModule({
  declarations: [
    OfflineHeaderComponent,,
    OnlineHeaderComponent,
    ReCaptcha2Directive,
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
  ],
  providers: [
    RegisterService,
  ],
  entryComponents: [
    ChangePasswordComponent,
    TestamentComponent,
    FriendsListComponent,
    TravelConfirmComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ajout d'une feuille de triche rapide qui peut aider après la longue pause avec Angular:

DÉCLARATIONS

Exemple:

declarations: [AppComponent]

Que pouvons-nous injecter ici? Composants, tuyaux, directives

IMPORTATIONS

Exemple:

imports: [BrowserModule, AppRoutingModule]

Que pouvons-nous injecter ici? autres modules

FOURNISSEURS

Exemple:

providers: [UserService]

Que pouvons-nous injecter ici? prestations de service

AMORCER

Exemple:

bootstrap: [AppComponent]

Que pouvons-nous injecter ici? le composant principal qui sera généré par ce module (nœud parent supérieur pour une arborescence de composants)

COMPOSANTS D'ENTRÉE

Exemple:

entryComponents: [PopupComponent]

Que pouvons-nous injecter ici? composants générés dynamiquement (par exemple en utilisant ViewContainerRef.createComponent ())

EXPORTATION

Exemple:

export: [TextDirective, PopupComponent, BrowserModule]

Que pouvons-nous injecter ici? composants, directives, modules ou tuyaux auxquels nous aimerions avoir accès dans un autre module (après importation de ce module)

1. déclarations : Cette propriété indique les composants, directives et tuyaux qui appartiennent à ce module.
2. exports : sous-ensemble de déclarations qui doivent être visibles et utilisables dans les modèles de composants d'autres NgModules.
3. importations : autres modules dont les classes exportées sont nécessaires aux modèles de composants déclarés dans ce NgModule.
4. fournisseurs : Créateurs de services que ce NgModule contribue à la collecte globale de services; ils deviennent accessibles dans toutes les parties de l'application. (Vous pouvez également spécifier des fournisseurs au niveau du composant, ce qui est souvent préféré.)
5. bootstrap : la vue principale de l'application, appelée composant racine, qui héberge toutes les autres vues d'application. Seul le NgModule racine doit définir la propriété bootstrap.