NgModuleを使用してサブモジュールを宣言するためのベストプラクティス

Question

何度も説明されていたはずの質問に対する合理的な答えが高いか低いかのように感じました。それにもかかわらず、app.module.tsファイル内にモジュールの依存関係を宣言する必要はありません。

すべての依存関係を1つのファイルに宣言することで、大規模なアプリケーションの処理が非常に迅速になります。

モジュール内の特定のモジュールの依存関係を宣言することで、より良い方法がありますか？私の現在の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] 
}) 

ファイルの

例は、それは例えば、これらのモジュールの中にいくつかの依存関係を宣言することは可能です。私はちょうどそれは私はあなたが探しているものを正確にあなたの質問を読んでいる場合module.app.ts

Answer 1

内のすべてを宣言するために必要とせずに動作させるように見えるカント

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

遅延ロードモジュールです： https://angular.io/docs/ts/latest/guide/ngmodule.html#!#lazy-load

あなたはそのモジュール内のすべての依存関係を定義してから、そのモジュールを遅延ロードします。 ルートモジュールには何もありません。