Best Practice für die Deklaration von Submodulen mit NgModule

Question

Ich habe das Gefühl, ich habe hoch und niedrig nach einer vernünftigen Antwort auf eine Frage gesucht, die viele Male erklärt worden sein muss. Nichtsdestoweniger versuche ich, eine Möglichkeit zu finden, Modulabhängigkeiten zu deklarieren, ohne sie alle in der app.module.ts-Datei ablegen zu müssen.

Indem alle Abhängigkeiten in einer Datei deklariert werden, werden große Anwendungen sehr schnell unhandlich.

Gibt es einen besseren Weg dies zu tun, indem bestimmte Modulabhängigkeiten innerhalb eines Moduls deklariert werden?

Beispiel meiner aktuellen app.module.ts Datei

import { NgModule } from '@angular/core'; 
    import { UniversalModule } from 'angular2-universal'; 
    import { ReactiveFormsModule, FormsModule } from '@angular/forms'; 
    import { HttpModule } from '@angular/http'; 
    import { AppComponent } from './components/app/app.component' 
    import { NavMenuComponent } from './components/navmenu/navmenu.component'; 
    import { HomeComponent } from './components/home/home.component'; 
    import { FetchDataComponent } from './components/fetchdata/fetchdata.component'; 
    import { CounterComponent } from './components/counter/counter.component'; 
    import { HeroDetailComponent } from './components/hero/hero-detail.component'; 
    import { HeroListComponent } from './components/hero/hero-list.component'; 
    import { HeroService } from './components/hero/hero.service'; 
    import { HeroDashboardComponent } from './components/hero/hero-dashboard.component'; 
    import { HeroMainComponent } from './components/hero/hero-main.component'; 
    import { HeroFormComponent } from './components/form/hero-form.component'; 
    import { HeroFormReactiveComponent } from './components/form-reactive/form-reactive.component'; 
    import { HeroFormReactiveMainComponent } from './components/form-reactive/form-main.component'; 
    import { ReactiveListComponent } from './components/form-reactive/hero-list.component'; 
    import { DataService } from './components/form-reactive/data.service'; 
    import { CoreTrackingMainComponent } from './components/core/coreTrackingMain.component'; 
    import { AppRoutingModule } from './app.routes' 


@NgModule({ 
    bootstrap: [ AppComponent ], 
    declarations: [ 
     AppComponent, 
     NavMenuComponent, 
     CounterComponent, 
     FetchDataComponent, 
     HomeComponent, 
     HeroDetailComponent, 
     HeroListComponent, 
     HeroDashboardComponent, 
     HeroMainComponent, 
     HeroFormComponent, 
     HeroFormReactiveComponent, 
     HeroFormReactiveMainComponent, 
     ReactiveListComponent, 
     CoreTrackingMainComponent], 
    imports: [ 
     UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too. 
     HttpModule, 
     FormsModule, 
     AppRoutingModule, 
     ReactiveFormsModule 
    ], 
    providers: [HeroService, DataService] 
}) 

Ist es möglich, einige Abhängigkeiten innerhalb dieser Module zum Beispiel zu erklären.

import { Component, NgModule } from '@angular/core'; 
import { CoreTrackingCriteriaComponent } from './coreTrackingCriteria.component'; 

@NgModule({ 
    declarations: [CoreTrackingCriteriaComponent], 
    exports: [CoreTrackingCriteriaComponent] 
}) 

@Component({ 
    selector: 'my-app', 
    templateUrl: './coreTrackingMain.component.html' 
}) 
export class CoreTrackingMainComponent { } 

Ich kann einfach nicht scheinen, um es, ohne funktioniert alles innerhalb der module.app.ts zu erklären

Answer 1

Wenn ich lese Ihre Frage richtig, was Sie suchen, faul Laden von Modulen ist: https://angular.io/docs/ts/latest/guide/ngmodule.html#!#lazy-load

Sie definieren alle Ihre Abhängigkeiten innerhalb dieses Moduls und dann im Router laden dieses Modul träge. nichts darüber im Root-Modul.