Modules

Angular app являются модульными, а Angular 2 имеет свою собственную модульную систему, называемую Angular modules или NgModules.

Каждое приложение Angular имеет, по крайней мере, один класс NgModule, корневой (root) модуль, условно названный AppModule.

Хотя root модуль может быть единственным модулем в небольшом приложении, большинство приложений имеют гораздо больше функциональных модулей, каждый из которых представляет собой единый блок кода, посвященный какой-то части приложения или тесно связанному набору функционала.

Любой Angular module, будь то root module или feature module, является классом с декоратором @NgModule.

Коротко о декораторах

NgModule- это функция декоратора, которая принимает один объект метаданных, свойства которого описывают модуль. Наиболее важными свойствами являются:

• declarations- view classes (классы представления) которые принадлежат этому модулю. Angular имеет 3 вида классов представления: components, directives, and pipes.
• exports- набор классов представлений, которые должны использоваться в шаблонах компонентов из других модулей
• imports- другие модули, классы которых необходимы для шаблонов компонентов из текущего модуля
• providers- классы, создающие сервисы, используемые модулем
• bootstrap - Основное представление приложения, называемое корневым компонентом, на котором размещаются все остальные вьюхи приложений. Только root-модуль должен установить это свойство начальной загрузки.

При запуске приложения первым запускается файл main.ts, который имеет следующее содержимое:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

Вторая строка импортирует функциональность модуля platformBrowserDynamic из пакета @angular/platform-browser-dynamic. platformBrowserDynamic использует bootstrapModule для загрузки нужного модуля.

То есть фактически здесь platformBrowserDynamic запускает импортированный во второй строке модуль AppModule. После этого начинает работать вся логика, которая заложена в модуле AppModule, который представляет главный модуль приложения. Больше ничего файл main.ts не делает.

В самом жеAppModuleнам надо указать, какой именно компонент будет использоваться в качестве основного при загрузке. Для этого используется параметр bootstrapдекоратора NgModule:

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

import { AppComponent } from './app.component';
import { MyNewComponentComponent } from './my-new-component/my-new-component.component';

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

То есть в данном случае значение bootstrap: [ AppComponent ] указывает, что модуль для загрузки в качестве основного компонента будет использовать класс AppComponent.

Если мы опустим компонент вbootstrap: [ ]или вовсе уберем параметрbootstrap, то на веб-страницу не будет загружаться представление из компонента AppComponent.