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

당신은 그 모듈 내에서 모든 의존성을 정의한 다음 라우터에서 그 모듈을 느리게로드합니다. 루트 모듈에서 그것에 대해 아무것도.