使用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

您定义了该模块中的所有依赖关系，然后在路由器中延迟加载该模块。 没有关于它在根模块。