Роль импорта/экспорта в Angular 2+ ngModule

Я изучаю Angular 2+, и мне сложно понять роль импорта/экспорта в ngModule. Более конкретно, почему важно импортировать модуль, если вы собираетесь импортировать его в любом случае, используя синтаксис es6, а также

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

Не намного проще было обнаружить, что модуль был импортирован через синтаксис es6?

import - другие модули, экспортированные классы которых необходимы компоненту шаблоны, объявленные в этом модуле.

Но мы уже импортируем их на уровне компонентов. Я что-то упускаю? Я также ищу пример для того, почему они пошли для этого синтаксиса.

Ответы

Ответ 1

Путаница исходит из того, что как Angular, так и ES6 используют ту же терминологию...

В ES6/ TypeScript:

  • Модуль - это любой файл кода в вашем проекте.
  • Импорт - это строка, начинающаяся с ключевого слова import.
  • Экспорт - это строка, начинающаяся с ключевого слова export.

В Angular:

  • Модуль - это класс, украшенный @NgModule. Он служит реестром (aka container) для всех компонентов, труб, директив и поставщиков в вашем приложении.
  • Импорт - это то, что вы помещаете в свойство imports декоратора @NgModule. Он позволяет модулю Angular использовать функциональные возможности, которые были определены в другом модуле Angular.
  • Экспорт, который вы положили, - это свойство exports декоратора @NgModule. Он позволяет модулю Angular выставлять некоторые из своих компонентов/директив/труб другим модулям в приложениях. Без этого компоненты/директивы/каналы, определенные в модуле, могут использоваться только в этом модуле.

Модули ES6/импорт/экспорт очень низкоуровневые. Это функция языка ES6, как и ключевые слова, такие как const или let... В ES6/TypeScript каждый файл имеет СВОЙ СОБСТВЕННЫЙ СФЕРА. Поэтому всякий раз, когда вам нужно использовать класс/функцию/переменную в файле, и этот класс/функция/переменная была определена в другом файле, вы должны ее импортировать (это означает, что он должен быть экспортирован в файл, где он был определен). Это не относится к Angular. ВСЕ ПРОЕКТЫ, ПИСЬМЕННЫЕ В ES6, могут использовать модули/импорт/экспорт таким образом.

С другой стороны, Angular modules/import/exports - это функция Angular framework. Они имеют смысл только в мире Angular. Другие рамки JavaScript могут иметь похожие понятия, но они будут использовать другой синтаксис.

Теперь между ними есть несколько совпадений. Например, чтобы использовать символ в @NgModule.imports (Angular world), вам нужно import символ в файле TypeScript, где определен модуль (ES6/TypeScript мир):

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

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

Но если вы внимательно прочитаете приведенные выше определения, вы поймете, что две вещи на самом деле совсем разные. Один из них - это язык, другой - структура.

Ответ 2

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

загрузит файл в память.

@NgModule({
    imports:      [ BrowserModule ],

зарегистрирует модуль BrowserModule с Angular.