Angular2 модуль приложения с импортом корневого уровня

Не следует ли импортировать на корневом уровне глобально (с глобальным я имею в виду все подмодули и компоненты)?

У меня есть следующий модуль root/app:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ApplicationRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { appRouterProviders, routing } from './app.routes';
import { DashboardModule } from './dashboard/dashboard.module';
import { DecisionModule } from './decision/decision.module';
import { MdCoreModule }           from '@angular2-material/core';
import { MdButtonModule }         from '@angular2-material/button';
import { MdCardModule }           from '@angular2-material/card';
import { MdListModule }           from '@angular2-material/list';
import { MdSidenavModule }        from '@angular2-material/sidenav';
import { MdToolbarModule }        from '@angular2-material/toolbar';
import { MdIconModule }           from '@angular2-material/icon';

@NgModule({
  declarations: [
    AppComponent                    
  ],
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    HttpModule,
    RouterModule,    
    routing,
    DashboardModule,
    MdCoreModule,
    MdButtonModule,
    MdCardModule,
    MdListModule,
    MdSidenavModule,    
    MdToolbarModule,
    MdIconModule
  ],
  providers: [
    appRouterProviders
  ],
  entryComponents: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {

}

Если я пытаюсь использовать материальные элементы в одном из моих модулей, которые они не отображают, это выглядит следующим образом:

import { NgModule }               from '@angular/core';
import { CommonModule }           from '@angular/common';
import { FormsModule }            from '@angular/forms';
import { dashboardRouting }       from './dashboard.routes';
import { DashboardComponent }     from './dashboard.component';
import { ActionsDialogComponent } from './actions-dialog';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    dashboardRouting,    
  ],
  declarations: [
    DashboardComponent,
    ActionsDialogComponent    
  ],
  providers: [    
  ]
})
export class DashboardModule {}

Однако, если я импортирую материальные модули в подмодуль, который они отображают. Это то, что выглядит подмодуль, когда работают компоненты дизайна материалов:

import { NgModule }               from '@angular/core';
import { CommonModule }           from '@angular/common';
import { FormsModule }            from '@angular/forms';
import { dashboardRouting }       from './dashboard.routes';
import { DashboardComponent }     from './dashboard.component';
import { ActionsDialogComponent } from './actions-dialog';
import { MdCoreModule }           from '@angular2-material/core';
import { MdButtonModule }         from '@angular2-material/button';
import { MdCardModule }           from '@angular2-material/card';
import { MdListModule }           from '@angular2-material/list';
import { MdSidenavModule }        from '@angular2-material/sidenav';
import { MdToolbarModule }        from '@angular2-material/toolbar';
import { MdIconModule }           from '@angular2-material/icon';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    dashboardRouting,
    MdCoreModule,
    MdButtonModule,
    MdCardModule,
    MdListModule,
    MdSidenavModule,    
    MdToolbarModule,
    MdIconModule,
  ],
  declarations: [
    DashboardComponent,
    ActionsDialogComponent    
  ],
  providers: [    
  ]
})
export class DashboardModule {}

Почему модули материалов должны быть импортированы на подуровень снова, если они уже импортированы на корневом уровне?

Ответы

Ответ 1

В концепции Компонентов в Angular2 нет ничего похожего на "корневой уровень", к которому вы обращаетесь.
Компоненты являются модульными частями, очень похожими на классы в Java (или на любом другом языке высокого уровня), где вы также будете импортировать каждый класс, который вы используете.
Они могут быть вложенными или использоваться внутри друг друга, но все же каждый компонент должен импортировать свои собственные зависимости.
Обратите внимание, что импорт в Angular2 - это совсем другой подход, чем включение внешнего модуля/библиотеки в Angular 1 (тогда, по существу, это новая ссылка в index.html для каждой зависимости).
Импорт в Angular 2 существует первым, потому что Typescript -компилятор должен знать, что используется в вашем компоненте (тем самым добавив еще больше возможностей для проверки ошибок)
Скомпилированная и упакованная сборка должна включать каждую зависимость только один раз (при условии, что все настроено правильно).

Ответ 2

Angular документация сбивает с толку, они заявляют в нескольких областях, что модули, которые вы импортируете в корневом модуле (app.module.ts), доступны во всем мире, но то, что не является очевидным, если вы не прочитаете полностью (blah), заключается в том, что когда вы используете подмодуль нарушает это наследование, а подмодуль создает собственный домен приложения для компонентов (а не сервисы, сервисы по-прежнему глобальны, по крайней мере, так, как я его читал). Вот почему, если бы вы были похожи на меня, я заметил некоторые предметы, которые мне пришлось импортировать в мой подмодуль, а другие, которых я не очень смутил. Вот раздел на angular.io, который обсуждает это: NgModule.html

Что-то еще стоит упомянуть: я думал о разработке в Angular2, так как RC5 + означал, что мне нужно было перевернуть все мои функции в модули, это просто не так. Модули нам не нужны для того, чтобы мы могли работать в повседневной работе с Angular2, если вы не хотите использовать ленивую загрузку или специально хотите поделиться кодом с другими, например, пакетом npm.