Sandeep Chikhale Sandeep Chikhale - 1 month ago 13
TypeScript Question

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

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

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