a.component.ts

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

@Component({
  selector: 'app-a',
  templateUrl: `<p>
  a works!
</p>
<app-b>app-b</app-b>`,
  styleUrls: []
})
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',
  templateUrl: `<h1>
  {{title}}
</h1>

<app-a>app-a</app-a>`,
  styleUrls: []
})
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',
  templateUrl: `<p>
  b works!
</p>
`,
  styleUrls: []
})
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 { }