a.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-a',
  template: `<p>a works!</p>
  <app-b>app-b</app-b>`
})
export class AComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

a.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AComponent } from './a.component';

import { BModule } from './b/b.module';

@NgModule({
  imports: [
    CommonModule,
    BModule
  ],
  exports: [AComponent],
  declarations: [AComponent]
})
export class AModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<h1>{{title}}</h1>
  <app-a>app-a</app-a>`
})
export class AppComponent {
  title = 'app works!';
}

app.module.ts

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

import { AModule } from './a/a.module';

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

b.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-b',
  template: `<p>b works!</p>`
})
export class BComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

b.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BComponent } from './b.component';

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [BComponent],
  declarations: [BComponent]
})
export class BModule { }