त्रुटि: त्रुटि:: (वादा में) Uncaught किसी भी मार्गों RC4 बाल मार्गों

Question

त्रुटि दिखा

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

आवेदन
कोणीय 2 अनुप्रयोग कोणीय ऐप में बाल मार्गों को लागू करने के एक डेमो आवेदन करता है, तो ठीक काम कर रहा है से मेल नहीं कर सकते हैं मैं फ़ाइल से कोड की इन पंक्तियों में शामिल न करें 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
पर कोड धकेल दिया 63,210 क्लोन करने के लिए - https://github.com/Sandeep3005/Angular101.git
देखने के लिए - https://github.com/Sandeep3005/Angular101

फ़ाइलें संरचना
एप्लिकेशन
      है | --app.component.ts
      | --app.routes.ts
      |
      --main.ts | --MovieCenter
                                | --home.component.ts
                                | --movie.routes। टीएस
                                | --Action
                                            | --action.component।ts
                                | --Animation
                                            | --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.component.ts MovieCenter/एनिमेशन/animation.component.ts

दोनों फ़ाइलों घटक के नाम दिखा टेम्पलेट के साथ एक सरल घटक हैं

टेम्पलेट: Action Component

Answer 1

अपने मार्ग विन्यास पर सेट होने पर

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

नीचे

केवल एक ही मार्ग कोणीय समझता है कि वह नहीं है और कहा कि movie-home है और इसलिए सब कुछ ठीक काम करता है

अब जब आप को यह

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

कोणीय अब केवल दो मार्गों में से जानता है अर्थात् क्या आपके config बदल जाते हैं। movie-home/animation और 'मूवी-होम/एक्शन'। movie-home मार्ग नहीं है क्योंकि आपके पास बच्चों में पथहीन मार्ग नहीं है। बाद config आपकी समस्या का समाधान करना चाहिए

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

जब यह रूटर v3 की विज्ञप्ति

अधिक जानकारी के लिए http://victorsavkin.com/post/146722301646/angular-router-empty-paths-componentless-routes