使用NgModule聲明子模塊的最佳做法

Question

我覺得好像我已經搜索了高和低的問題的合理答案，這個問題必須多次解釋。儘管如此，我試圖找到任何方式來聲明模塊依賴關係，而無需將其全部放在app.module.ts文件中。

通過在一個文件中聲明所有的依賴關係，它會迫使大型應用程序很快變得笨拙。

有沒有更好的辦法做到這一點，通過在模塊中聲明特定模塊的依賴關係？

我目前app.module.ts的示例文件

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] 
}) 

是否有可能將這些模塊例如內聲明一些依賴。

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

我只是不能似乎使它無需在module.app.ts內聲明的一切工作

Answer 1

如果我讀了你的問題，你正在尋找正確什麼是延遲加載模塊： https://angular.io/docs/ts/latest/guide/ngmodule.html#!#lazy-load

您定義了該模塊中的所有依賴關係，然後在路由器中延遲加載該模塊。 沒有關於它在根模塊。