Papel de las importaciones / exportaciones en Angular 2 + NgModule

Question

Papel de las importaciones / exportaciones en Angular 2 + NgModule

Estoy aprendiendo Angular 2+ y estoy teniendo dificultades para entender el papel de las importaciones/exportaciones en un NgModule. Más específicamente por qué es importante importar un módulo si vas a importarlo de todos modos usando la sintaxis es6 también

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

¿No fue mucho más sencillo detectar que el módulo se importó a través de la sintaxis es6?

Importaciones - otros módulos cuyas clases exportadas son necesarias por componente plantillas declaradas en este módulo.

Pero ya estamos importando los que están en el nivel de componentes. Me estoy perdiendo algo? También estoy buscando algún ejemplo de por qué fueron para esta sintaxis .

28

angular angular-module

Author: DilumN, 2017-01-30

Source

2 answers

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

Cargará el archivo en la memoria.

@NgModule({
    imports:      [ BrowserModule ],

Registrará BrowserModule con Angular.

13

Author: Ynot,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-29 23:23:20

score 41 · Accepted Answer

La confusión proviene del hecho de que tanto Angular como ES6 están usando la misma terminología...

En ES6 / TypeScript:

Un módulo es cualquier archivo de código en su proyecto.
Una importación es una línea que comienza con la palabra clave import.
Una exportación es una línea que comienza con la palabra clave export.

En angular:

Un módulo es una clase decorada con @NgModule. Sirve como un registro (también conocido como contenedor) para todos los componentes, tuberías, directivas y proveedores en su aplicación.
Una importación es lo que pones en la propiedad imports del decorador @NgModule. Permite que un módulo Angular use la funcionalidad que se definió en otro módulo Angular.
Una exportación lo que pones es la propiedad exports del decorador @NgModule. Permite que un módulo Angular exponga algunos de sus componentes / directivas / tuberías a los otros módulos en el aplicación. Sin él, los componentes/directivas/tuberías definidos en un módulo solo podrían usarse en ese módulo.

Los módulos ES6/importaciones/exportaciones son de nivel muy bajo. Son una característica del lenguaje ES6, al igual que palabras clave como const o let... En ES6 / TypeScript, cada archivo tiene SU PROPIO ÁMBITO. Por lo tanto, siempre que necesite usar una clase / función / variable en un archivo y esa clase/función/variable se definió en otro archivo, debe importarla (la contraparte siendo que debe ser exportado en el archivo donde fue definido). Esto no es específico de Angular. TODOS LOS PROYECTOS ESCRITOS EN ES6 pueden usar módulos / importaciones / exportaciones de esta manera.

Por otro lado, los módulos/importaciones/exportaciones de Angular son una característica del marco Angular. Solo tienen sentido en Angular world. Otros frameworks JavaScript pueden tener nociones similares, pero usarán una sintaxis diferente.

Ahora hay cierta superposición entre los dos. Por ejemplo, en para usar un símbolo en @NgModule.imports (Mundo angular), necesita import el símbolo en el archivo TypeScript donde se define el módulo (ES6/mundo TypeScript):

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

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

Pero si lees las definiciones anteriores cuidadosamente, te darás cuenta de que las dos cosas son realmente muy diferentes. Uno es el lenguaje, el otro es el marco.