错误:未捕获(在承诺中):错误:无法匹配任何路径RC4子路由

Question

在Angular App
Angular 2应用程序中实现Child Routes的演示应用程序, 显示错误

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

如果我不从文件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
}

我已将代码推送到GITHUB
克隆 - https://github.com/Sandeep3005/Angular101.git
查看 - https://github.com/Sandeep3005/Angular101

文件结构是
app
   | --app.component.ts
   | --app.routes.ts
   | --main.ts
   | --MovieCenter
                | --home.component.ts
                | --movie.routes.ts
                | --Action
                      | --action.component.ts
                | - 动画
                      | --animation.component.ts

文件位于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}
        ]
    }
]

还有其他文件
MovieCenter/Action/action.component.ts MovieCenter/Animation/animation.component.ts

这两个文件都是一个简单的组件,模板显示组件的名称

模板: Action Component

Answer 1

当您的路线配置设置为以下时

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

Angular只解释了一条路线,movie-home因此一切正常

现在,当您将配置更改为此时

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

Angular现在只知道两条路线,即.movie-home/animation和'电影之家/行动'.没有movie-home路线,因为您没有儿童无路径路线.以下配置应解决您的问题

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

当发布路由器v3时,请确保您处于beta.2版或更高版本

有关详细信息,请参阅http://victorsavkin.com/post/146722301646/angular-router-empty-paths-componentless-routes