Rôle des imports / exports dans Angular 2+ ngModule

Question

Je suis en train d'apprendre Angular 2+ et j'ai du mal à comprendre le rôle des imports/exports dans un ngModule. Plus précisément, pourquoi est-il important d'importer un module si vous allez l'importer de toute façon en utilisant la syntaxe es6 également.

import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ]
})

N'était-il pas plus simple de détecter que le module était importé via la syntaxe es6 ?

imports - autres modules dont les classes exportées sont nécessaires au composant déclarés dans ce module.

Mais nous les importons déjà au niveau des composants. Est-ce que quelque chose m'échappe ? Je suis également à la recherche d'un exemple expliquant pourquoi ils ont opté pour cette syntaxe.

Answer 1

La confusion vient du fait qu'Angular et ES6 utilisent la même terminologie...

En ES6/TypeScript :

• A module est n'importe quel fichier de code dans votre projet.
• Un l'importation est une ligne commençant par le import mot-clé.
• Un l'exportation est une ligne commençant par le export mot-clé.

Dans Angular :

• A module est une classe décorée de @NgModule . Il sert de registre (ou de conteneur) pour tous les composants, tuyaux, directives et fournisseurs de votre application.
• Un l'importation est ce que vous mettez dans le imports de la propriété @NgModule décorateur. Il permet à un module Angular d'utiliser une fonctionnalité définie dans un autre module Angular.
• Un l'exportation ce que vous mettez est le exports de la propriété @NgModule décorateur. Il permet à un module Angular d'exposer certains de ses composants/directives/pipes aux autres modules de l'application. Sans lui, les composants/directives/pipes définis dans un module ne pourraient être utilisés que dans ce module.

Les modules/imports/exports ES6 sont très bas niveau . Il s'agit d'un du langage ES6 tout comme des mots-clés tels que const o let ... Dans ES6/TypeScript, chaque fichier a SON PROPRE CHAMP D'APPLICATION. Ainsi, chaque fois que vous avez besoin d'utiliser une classe/fonction/variable dans un fichier et que cette classe/fonction/variable a été définie dans un autre fichier, vous devez l'importer (la contrepartie étant qu'elle doit être exportée dans le fichier où elle a été définie). Ceci n'est pas spécifique à Angular. TOUS LES PROJETS ÉCRITS EN ES6 peuvent utiliser les modules/imports/exports de cette manière.

D'autre part, les modules/imports/exports d'Angular sont une du framework Angular . Ils n'ont de sens que dans le monde Angular. D'autres frameworks JavaScript peuvent avoir des notions similaires mais ils utiliseront une syntaxe différente.

Aujourd'hui, il y a un certain chevauchement entre les deux. Par exemple, pour utiliser un symbole en @NgModule.imports (monde Angular), vous devez import le symbole dans le fichier TypeScript où le module est défini (monde ES6/TypeScript) :

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

@NgModule({
  // Angular Imports
  imports: [ BrowserModule ]
})

Mais si vous lisez attentivement les définitions ci-dessus, vous vous rendrez compte que ces deux choses sont en fait très différentes. L'un est le langage, l'autre est le cadre.

Answer 2

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

chargera le fichier en mémoire.

@NgModule({
    imports:      [ BrowserModule ],

enregistrera BrowserModule avec Angular.