Błąd: Uncaught (obietnicy): błąd: nie można dopasować do dowolnego trasy RC4 trasach dziecko

Question

Aplikacja demo do realizacji Trasy dziecko w Kątowymi App
kątowa 2 App pokazując Błąd

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

aplikacja działa dobrze, jeśli nie mam dodać te linie kodu z pliku 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 
} 

mam pchnął kod na github
sklonować - https://github.com/Sandeep3005/Angular101.git
Do widzenia - https://github.com/Sandeep3005/Angular101

Pliki Struktura jest
aplikacja
      | --app.component.ts
      | --app.routes.ts
    | --main.ts
      | --MovieCenter
                                | --home.component.ts
                                | --movie.routes. ts
                                | --Action
                                          | --action.component.ts
                                | --Animation
                                            | --animation.component.ts

Pliki są poniżej
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} 
     ] 
    } 
] 

Istnieją inne pliki
MovieCenter/Akcja/action.component.ts MovieCenter/animacja/animation.component.ts

oba pliki są proste składnik z szablonem pokazujący nazwę komponentu

szablon: Action Component

Answer 1

Kiedy konfiguracja trasy ustawiony jest poniżej

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

Jest tylko jedna droga, która interpretuje i kątowe to movie-home a więc wszystko działa poprawnie

Teraz po zmianie config to

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

kątowa teraz zna tylko z dwóch tras tj. movie-home/animation oraz "film-home/action". Nie ma trasy, ponieważ nie masz ścieżki bez ścieżki dla dzieci. Po config powinno rozwiązać twój problem

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

Upewnij się, że są na beta.2 wersji lub powyżej gdy uwalnia od routera v3

Więcej szczegółów można znaleźć w http://victorsavkin.com/post/146722301646/angular-router-empty-paths-componentless-routes