Move the components to their own modules.

src/app/app-routing.module.ts

@@ -1,9 +1,9 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { DashboardComponent } from './dashboard.component';
-import { HeroesComponent } from './heroes.component';
-import { HeroDetailComponent } from './hero-detail.component';
+import { DashboardComponent } from './dashboard/dashboard.component';
+import { HeroesComponent } from './heroes/heroes.component';
+import { HeroDetailComponent } from './hero-detail/hero-detail.component';
 
 const routes: Routes = [
   { path: '', redirectTo: '/dashboard', pathMatch: 'full' },

src/app/app.module.ts

@@ -1,35 +1,30 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
+import {BrowserModule} from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
+import {HttpModule} from '@angular/http';
 
-import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
-import { InMemoryDataService } from './in-memory-data.service';
+import {InMemoryWebApiModule} from 'angular-in-memory-web-api';
+import {InMemoryDataService} from './in-memory-data.service';
 
-import { AppComponent } from './app.component';
-import { AppRoutingModule } from './app-routing.module';
-import { HeroService } from './hero.service';
-import { DashboardComponent } from './dashboard.component';
-import { HeroesComponent } from './heroes.component';
-import { HeroDetailComponent } from './hero-detail.component';
-import { HeroSearchComponent } from './hero-search.component';
+import {AppComponent} from './app.component';
+import {AppRoutingModule} from './app-routing.module';
+import {HeroService} from './hero.service';
+import {DashboardModule} from './dashboard/dashboard.module';
+import {HeroesModule} from './heroes/heroes.module';
 
 @NgModule({
   imports: [
     BrowserModule,
-    FormsModule,
     AppRoutingModule,
     HttpModule,
-    InMemoryWebApiModule.forRoot(InMemoryDataService, { delay: 600 })
+    InMemoryWebApiModule.forRoot(InMemoryDataService, {delay: 600}),
+    DashboardModule,
+    HeroesModule
   ],
   declarations: [
-    AppComponent,
-    DashboardComponent,
-    HeroSearchComponent,
-    HeroesComponent,
-    HeroDetailComponent,
+    AppComponent
   ],
   providers: [HeroService],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+}

src/app/dashboard.component.ts → src/app/dashboard/dashboard.component.ts

@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { Hero } from './hero';
-import { HeroService } from './hero.service';
+import { Hero } from '../hero';
+import { HeroService } from '../hero.service';
 
 @Component({
   selector: 'my-dashboard',

src/app/dashboard/dashboard.module.ts

@@ -0,0 +1,20 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+
+import {DashboardComponent} from './dashboard.component';
+import {HeroSearchModule} from '../hero-search/hero-search.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    HeroSearchModule
+  ],
+  declarations: [
+    DashboardComponent
+  ],
+  exports: [
+    DashboardComponent
+  ],
+  providers: []
+})
+export class DashboardModule { }

src/app/hero-detail.component.ts → src/app/hero-detail/hero-detail.component.ts

@@ -1,8 +1,8 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
 
-import { Hero } from './hero';
-import { HeroService } from './hero.service';
+import { Hero } from '../hero';
+import { HeroService } from '../hero.service';
 
 @Component({
   selector: 'my-hero-detail',

src/app/hero-detail/hero-detail.module.ts

@@ -0,0 +1,19 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {HeroDetailComponent} from './hero-detail.component';
+import {FormsModule} from '@angular/forms';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule
+  ],
+  declarations: [
+    HeroDetailComponent
+  ],
+  exports: [
+    HeroDetailComponent
+  ],
+  providers: []
+})
+export class HeroDetailModule { }

src/app/hero-search.component.ts → src/app/hero-search/hero-search.component.ts

@@ -4,7 +4,7 @@ import { Observable } from 'rxjs/Observable';
 import { Subject } from 'rxjs/Subject';
 
 import { HeroSearchService } from './hero-search.service';
-import { Hero } from './hero';
+import { Hero } from '../hero';
 
 import 'rxjs/add/observable/of';
 import 'rxjs/add/operator/catch';
@@ -15,8 +15,7 @@ import 'rxjs/add/operator/switchMap';
 @Component({
   selector: 'my-hero-search',
   templateUrl: './hero-search.component.html',
-  styleUrls: ['./hero-search.component.css'],
-  providers: [HeroSearchService]
+  styleUrls: ['./hero-search.component.css']
 })
 export class HeroSearchComponent implements OnInit {
   heroes: Observable<Hero[]>;

src/app/hero-search/hero-search.module.ts

@@ -0,0 +1,19 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {HeroSearchComponent} from './hero-search.component';
+import {HeroSearchService} from './hero-search.service';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [
+    HeroSearchComponent
+  ],
+  exports: [
+    HeroSearchComponent
+  ],
+  providers: [HeroSearchService]
+})
+export class HeroSearchModule {
+}

src/app/hero-search.service.ts → src/app/hero-search/hero-search.service.ts

@@ -6,7 +6,7 @@ import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/catch';
 import 'rxjs/add/observable/throw';
 
-import { Hero } from './hero';
+import { Hero } from '../hero';
 
 @Injectable()
 export class HeroSearchService {

src/app/heroes.component.ts → src/app/heroes/heroes.component.ts

@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { Hero } from './hero';
-import { HeroService } from './hero.service';
+import { Hero } from '../hero';
+import { HeroService } from '../hero.service';
 
 @Component({
   selector: 'my-heroes',

src/app/heroes/heroes.module.ts

@@ -0,0 +1,20 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {HeroesComponent} from './heroes.component';
+import {HeroDetailModule} from '../hero-detail/hero-detail.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    HeroDetailModule
+  ],
+  declarations: [
+    HeroesComponent
+  ],
+  exports: [
+    HeroesComponent
+  ],
+  providers: []
+})
+export class HeroesModule {
+}