Moduł aplikacji Angular2 z importem poziomu katalogu głównego

Question

Czy import na poziomie root nie powinien być dostępny globalnie (z globalnego punktu widzenia mam na myśli wszystkie submoduły i komponenty)?

Mam następujący moduł 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 { 

} 

Jeśli próbuję użyć elementów materialnych w jednym z moich modułów podrzędnych nie wyświetlają, to właśnie moduł sub wygląda następująco:

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 {} 

Jeśli jednak zaimportuję moduły materiałowe w module częściowym, zostaną wyświetlone. To właśnie modułem wygląda, gdy materiał elementy konstrukcyjne pracują:

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 {} 

Dlaczego musi moduły materiałowe być importowane na podpoziomu ponownie, jeśli są one już importowanego na poziomie głównym?

Answer 1

W koncepcji składników w Angular2 nie ma nic lepszego niż "poziom główny", do którego się odnosisz.
Komponenty są elementami modułowymi bardzo podobnymi do klas w projekcie Java (lub innym języku wysokiego poziomu) - gdzie można również importować każdą klasę, której używasz.
Można je zagnieżdżać lub używać w sobie nawzajem, ale wciąż każdy komponent musi importować własne zależności.
Należy zauważyć, że importowanie w Angular2 jest bardzo odmienne podejście niż włączenie zewnętrznego modułu/biblioteki w Angular 1 (wtedy zasadniczo jest nowym odnośnikiem w index.html dla każdej zależności).
Te importowane w Angular 2 są na początku, ponieważ kompilator Typescript musi wiedzieć, co jest używane w komponencie (co dodaje trochę mocy do sprawdzania błędów).
Kompilowana i pakowana kompilacja powinna zawierać każdą zależność tylko raz (pod warunkiem, że wszystko jest poprawnie skonfigurowane).

Answer 2

Dokumentacja Angulara jest myląca, w kilku miejscach wskazuje, że moduły importowane do modułu głównego (app.module.ts) są dostępne globalnie, ale to, co nie jest szybko widoczne, chyba że dokładnie przeczytałeś (blah), jest to, że kiedy używasz submodułu to przerywa dziedziczenie i moduł częściowy tworzy własną domenę aplikacji dla komponentów (nie usług, usługi są nadal globalne, przynajmniej tak, jak je czytam). Dlatego też, jeśli byłeś podobny do mnie, zauważyłem pewne rzeczy, które musiałem zaimportować do mojego podmodułu, a inne nie, które mnie naprawdę zdezorientowały. Oto sekcja na temat angular.io, która omawia to: NgModule.html

Coś jeszcze wartego uwagi: Myślałem, że rozwijam w Angular2, ponieważ RC5 + oznaczało, że muszę zawinąć wszystkie moje funkcje w moduły, po prostu tak nie jest. Moduły nie są nam potrzebne do budowania naszej codziennej pracy z Angular2, chyba że chcesz używać leniwego ładowania lub chcesz udostępniać kod innym, na przykład pakietowi npm.