Наилучшая практика объявления подмодулей с помощью 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

Вы определяете все свои зависимости внутри этого модуля, а затем в маршрутизаторе загружаете этот модуль лениво. ничего об этом в корневом модуле.