Modules load other modules – Angular

Angular apps are organized into modules. You will need to have modules load other modules.
Here is the simple setup for a MasterModule to load one or more SubModules.

bootstrap(app) –> MasterModule –> subModuleA, subModuleB, subModuleC

MasterModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { SubModuleA } from '../sub-module-a/sub-a.module';
import { SubModuleB } from '../sub-module-b/sub-b.module';
import { SubModuleC } from '../sub-module-c/sub-c.module';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        SubModuleA,
        SubModuleB,
        SubModuleC
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class MasterAppModule { }

/sub-module-a/sub-a.module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'; 
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { BrowserService } from '../browser.service';

import { SubComponentA } from './sub.a.component';

@NgModule({
    declarations: [ SubComponentA ],
    imports: [ BrowserModule, HttpModule, FormsModule ],    
    exports: [ SubComponentA ]    
})
export class SubModuleA { }

The main thing to notice above is you must list SubComponentA in the exports.
You must also have the template selector available in the parent module somewhere.

*This example is for Angular(2/4/5), not AngularJS*