title: Error: Uncaught (in promise): Error: Cannot match any routes RC4 Child Routes
body: <p>A demo application to implement Child Routes in Angular App
  <br>
  Angular 2 App showing Error</p>
  
  <pre><code> Error: Uncaught (in promise): Error: Cannot match any routes: 'movie-home'
  zone.js:461 Unhandled Promise rejection: Cannot match any routes: 'movie-home' ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot match any routes: 'movie-home'(…)
  </code></pre>
  
  <p>Application is working fine if I don't add these lines of code from file <strong>movie.routes.ts</strong></p>
  
  <pre><code>{
      path:'movie-home',
      component:HomeComponent,
      //Remove this block of code- Start
      children:[
          {path : 'animation' , component:AnimationComponent},
          {path : 'action' , component:ActionComponent}
      ]**
      //Remove this block of code.- End
  }
  </code></pre>
  
  <p>I have pushed code on GITHUB<br>
  To Clone -- <a href="https://github.com/Sandeep3005/Angular101.git">https://github.com/Sandeep3005/Angular101.git</a><br>
  To View  -- <a href="https://github.com/Sandeep3005/Angular101">https://github.com/Sandeep3005/Angular101</a><br><br>
  Files Structure is <br>
  app<br>
  &nbsp;&nbsp;&nbsp;|--app.component.ts<br>
  &nbsp;&nbsp;&nbsp;|--app.routes.ts<br>
  &nbsp;&nbsp;&nbsp;|--main.ts<br>
  &nbsp;&nbsp;&nbsp;|--MovieCenter<br>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|--home.component.ts<br>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|--movie.routes.ts<br>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|--Action<br>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|--action.component.ts<br>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|--Animation<br>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|--animation.component.ts<br></p>
  
  <p>Files are below<br>
  <strong>app.component.ts</strong><br></p>
  
  <pre><code>import {Component} from '@angular/core';
  import { ROUTER_DIRECTIVES }  from '@angular/router';
  
  @Component({
      selector: 'my-app',
      template: `
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
      `,
      directives: [ROUTER_DIRECTIVES]
  })
  export class AppComponent { }
  </code></pre>
  
  <p><strong>app.routes.ts</strong><br></p>
  
  <pre><code>import { provideRouter, RouterConfig }  from '@angular/router';
  import { MovieRoutes } from './MovieCenter/movie.routes';
  
  export const routes: RouterConfig = [
   ...MovieRoutes,
  ];
  
  export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes),
  ];
  </code></pre>
  
  <p><strong>main.ts</strong><br></p>
  
  <pre><code>import {bootstrap}    from '@angular/platform-browser-dynamic';
  import {AppComponent} from './app.component';
  import { APP_ROUTER_PROVIDERS } from './app.routes';
  
  bootstrap(AppComponent,[
      APP_ROUTER_PROVIDERS
  ])
  .catch(err =&gt; console.error(err));
  </code></pre>
  
  <p><strong>MovieCenter/home.component.ts</strong><br></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { ROUTER_DIRECTIVES }  from '@angular/router';
  
  @Component({
      template:`
      &lt;div class="col-md-3" style="background:#8FDF98;height:100%"&gt;
          &lt;br&gt;&lt;br&gt;&lt;br&gt;
          &lt;a [routerLink]="['/movie-home']" &gt;Home Component&lt;/a&gt;&lt;br&gt;
          &lt;a [routerLink]="['/animation']" &gt;Animation Component&lt;/a&gt;&lt;br&gt;
          &lt;a [routerLink]="['/action']" &gt;Action Component&lt;/a&gt;
       &lt;/div&gt;   
      &lt;div class="col-md-9"&gt;
          Child Component Display Section
          &lt;hr&gt;
          &lt;router-outlet&gt;&lt;/router-outlet&gt;
       &lt;/div&gt;
      `,
      directives:[ROUTER_DIRECTIVES]
  })
  
  export class HomeComponent{
  }
  </code></pre>
  
  <p><strong>MovieCenter/movie.routes.ts</strong><br></p>
  
  <pre><code>import { RouterConfig } from '@angular/router';
  import { HomeComponent } from './home.component';
  import { AnimationComponent } from './Animation/animation.component';
  import { ActionComponent } from './Action/action.component';
  
  export const MovieRoutes: RouterConfig = [
      {
          path : '',
          redirectTo:'/movie-home',
          pathMatch : 'full'
      },
      {
          path:'movie-home',
          component:HomeComponent,
          children:[
              {path : 'animation' , component:AnimationComponent},
              {path : 'action' , component:ActionComponent}
          ]
      }
  ]
  </code></pre>
  
  <p><br>
  There are other files <br>
  MovieCenter/Action/action.component.ts
  MovieCenter/Animation/animation.component.ts</p>
  
  <p>both files are a simple component with the template showing the name of the component</p>
  
  <p>template : <code>Action Component</code></p>