ngtemplateoutlet - Papel de las importaciones/exportaciones en Angular 2+ ngModule

ng-template angular 6

Question

Estoy aprendiendo Angular 2+ y me cuesta entender el papel de las importaciones / exportaciones en un ngModule. Más específicamente, ¿por qué es importante importar un módulo si lo va a importar de todos modos utilizando también la sintaxis de es6?

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ó mediante la sintaxis de es6?

importaciones: otros módulos cuyas clases exportadas son necesarias para las plantillas de componentes declaradas en este módulo.

Pero ya los estamos importando en el nivel de componentes. ¿Me estoy perdiendo de algo? También estoy buscando un ejemplo de por qué optaron por esta sintaxis.

Answer 1

La confusión proviene del hecho de que tanto Angular como ES6 están utilizando 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 de import .
• Una exportación es una línea que comienza con la palabra clave de 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, canalizaciones, 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 de exports del decorador @NgModule . Permite que un módulo angular exponga algunos de sus componentes / directivas / tuberías a los otros módulos en las aplicaciones. Sin él, los componentes / directivas / tuberías definidas en un módulo solo podrían usarse en ese módulo.

Los módulos / importaciones / exportaciones ES6 son de muy bajo nivel . Son una característica del lenguaje ES6 , al igual que las palabras clave como const o let ... En ES6 / TypeScript, cada archivo tiene su propio alcance. Entonces, cuando necesite usar una clase / función / variable en un archivo y esa clase / función / variable se definió en otro archivo, debe importarlo (la contraparte es que debe exportarse en el archivo donde se definió). Esto no es específico de Angular. TODOS LOS PROYECTOS ESCRITOS EN ES6 pueden utilizar módulos / importaciones / exportaciones de esta manera.

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

Ahora hay algo de superposición entre los dos. Por ejemplo, para utilizar un símbolo en @NgModule.imports (mundo angular), debe import el símbolo en el archivo de TypeScript donde se define el módulo (mundo ES6 / 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 bastante diferentes. Uno es el lenguaje, el otro es el marco.

Answer 2

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

cargará el archivo en la memoria.

@NgModule({
    imports:      [ BrowserModule ],

registrará BrowserModule con Angular.