Error: Uncaught (in promise): Error: Cannot match any routes RC4 Child Routes

Question

A demo application to implement Child Routes in Angular App
Angular 2 App showing Error

 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'(…)

Application is working fine if I don't add these lines of code from file movie.routes.ts

{
    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
}

I have pushed code on GITHUB
To Clone -- https://github.com/Sandeep3005/Angular101.git
To View -- https://github.com/Sandeep3005/Angular101

Files Structure is
app
   |--app.component.ts
   |--app.routes.ts
   |--main.ts
   |--MovieCenter
                |--home.component.ts
                |--movie.routes.ts
                |--Action
                      |--action.component.ts
                |--Animation
                      |--animation.component.ts

Files are below
app.component.ts

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

@Component({
    selector: 'my-app',
    template: `
    <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES]
})
export class AppComponent { }

app.routes.ts

import { provideRouter, RouterConfig }  from '@angular/router';
import { MovieRoutes } from './MovieCenter/movie.routes';

export const routes: RouterConfig = [
 ...MovieRoutes,
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes),
];

main.ts

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 => console.error(err));

MovieCenter/home.component.ts

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

@Component({
    template:`
    <div class="col-md-3" style="background:#8FDF98;height:100%">
        <br><br><br>
        <a [routerLink]="['/movie-home']" >Home Component</a><br>
        <a [routerLink]="['/animation']" >Animation Component</a><br>
        <a [routerLink]="['/action']" >Action Component</a>
     </div>   
    <div class="col-md-9">
        Child Component Display Section
        <hr>
        <router-outlet></router-outlet>
     </div>
    `,
    directives:[ROUTER_DIRECTIVES]
})

export class HomeComponent{
}

MovieCenter/movie.routes.ts

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}
        ]
    }
]

There are other files
MovieCenter/Action/action.component.ts MovieCenter/Animation/animation.component.ts

both files are a simple component with the template showing the name of the component

template : Action Component

Answer 1

When your Route configuration is set to below

{
  path:'movie-home',
  component:HomeComponent
}

There is only one route that Angular interprets and that is movie-home and hence everything works fine

Now when you change your config to this

{
  path:'movie-home',
  component:HomeComponent,
  children:[
    {path : 'animation' , component:AnimationComponent},
    {path : 'action' , component:ActionComponent}
  ]
}

Angular now knows of only two routes ie. movie-home/animation and 'movie-home/action'. There is no movie-home route because you don't have pathless route in children. Following config should fix your issue

{
  path:'movie-home',
  children:[
    {path : '' , component:HomeComponent},
    {path : 'animation' , component:AnimationComponent},
    {path : 'action' , component:ActionComponent}
  ]
}

Make sure you are on beta.2 version or above when it releases of router v3

For more details refer to http://victorsavkin.com/post/146722301646/angular-router-empty-paths-componentless-routes