title: Angular 2:Invalid configuration of route 'home'. One of the following must be provided: component, redirectTo, children or loadChildren
body: <p>I'm trying to implement routing in Angular 2 and these are my files</p>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>import {Component, NgModule} from '@angular/core'
  import {BrowserModule} from '@angular/platform-browser'
  import {HomeComponent} from "./home.component";
  import {RentedHomeComponent} from "./rented-home";
  import {TenantComponent} from "./tenant.component";
  import {SubTenantComponent} from "./sub-tenant.component";
  import {BreadcrumbService} from "./breadcrumb.service";
  import {routes, routingProviders} from "./app.routes";
  import {RouterModule} from "@angular/router";
  import {BreadcrumbComponent} from "./breadcrumb.component";
  import {APP_BASE_HREF} from "@angular/common";
  
  @Component({
    selector: 'my-app',
    template: `
      &lt;h1 class="title"&gt;This is the landing page and no Breadcrumb here&lt;/h1&gt;
      &lt;a routerLink="/rented-home" class="btn btn-md btn-primary"&gt;View Customer Detail&lt;/a&gt;
     &lt;div class="row"&gt;
        &lt;div class="col-md-12"&gt;
          &lt;router-outlet&gt;&lt;/router-outlet&gt;
        &lt;/div&gt;
      &lt;div class="main-view"&gt;
      &lt;/div&gt;`,
  })
  export class App { }
  
  @NgModule({
    imports: [ BrowserModule, RouterModule, routes ],
    declarations: [ App, HomeComponent, RentedHomeComponent, TenantComponent, SubTenantComponent, BreadcrumbComponent  ],
    providers: [routingProviders, BreadcrumbService,
      { provide: APP_BASE_HREF, useValue: '/' }],
    bootstrap: [ App ]
  })
  export class AppModule {}
  </code></pre>
  
  <p><strong>app.routes.ts</strong></p>
  
  <pre><code>import {Routes, RouterModule} from "@angular/router";
  import {ModuleWithProviders} from "@angular/core";
  import {HomeComponent} from "./home.component";
  import {RentedHomeComponent} from "./rented-home";
  import {TenantComponent} from "./tenant.component";
  import {SubTenantComponent} from "./sub-tenant.component";
  import {App} from "./app";
  
  const appRoutes : Routes = [
    {path:'', redirectTo:'/home', pathMatch:'full'},
    {path:'home', component:App},
    {path:'rented-home', component:RentedHomeComponent, data:{title:'Rented-Home'}},
    {path:'tenant', component:TenantComponent, data:{title:'Tenant'}},
    {path:'sub-tenant', component:SubTenantComponent, data:{title:'Sub-Tenant'}}
  ]
  export const routingProviders : any[] = [];
  export const routes : ModuleWithProviders = RouterModule.forRoot(appRoutes);
  </code></pre>
  
  <p>But I'm getting - Unhandled Promise rejection: Invalid configuration of route 'home'. One of the following must be provided: component, redirectTo, children or loadChildren ; Zone:  ; Task: Promise.then ; Value: </p>
  
  <p>Any help on this?</p>