Best practise for declaring submodules using NgModule

Question

I feel as if I have searched high and low for a reasonable answer to a question which must have been explained many times. Nonetheless, I am trying to find any way to declare module dependencies without needing to place it all within the app.module.ts file.

By declaring all dependencies within one file, it forces large applications to get unwieldy very quickly.

Is there a better way do this by declaring specific modules dependencies within a module?

Example of my current app.module.ts file

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

Is it possible to declare some dependencies within these modules for example.

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

I just cant seem to make it work without needing to declare everything within the module.app.ts

Answer 1

If i read your question correctly what you are looking for is lazy loading modules: https://angular.io/docs/ts/latest/guide/ngmodule.html#!#lazy-load

you define all your dependencies within that module and then in router load that module lazily. nothing about it in root module.