कोणीय 2 राउटर: त्रुटि: 'इनबॉक्स कॉम्पोनेंट' लोड करने के लिए प्राथमिक आउटलेट नहीं मिला

Question

मैंने रूटिंग के साथ एक सरल ऐप बनाया है। लिंक "http: // localhost: 4200" और "http: // localhost: 4200/मेल", अच्छी तरह से काम

लेकिन जब मैं एक लिंक "को खोलने का प्रयास http: // localhost: 4200/मेल/इनबॉक्स "मुझे एक त्रुटि मिलती है:" 'इनबॉक्स कॉम्पोनेंट' लोड करने के लिए प्राथमिक आउटलेट नहीं मिल सका "।

त्रुटि का कारण क्या है और मैं इसे कैसे ठीक कर सकता हूं?

app.module.ts:

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { RouterModule } from '@angular/router'; 

import { AppComponent } from './app.component'; 
import { MailListComponent } from './components/mail-list/mail-list.component'; 
import { FoldersComponent } from './components/folders/folders.component'; 
import { InboxComponent } from './components/inbox/inbox.component'; 

const routes = [ 
    { path: '', 
    component: MailListComponent 
    }, 

    { path: 'mail', component: MailListComponent, 
     children: [ 
     {path: 'inbox', component: InboxComponent} 
     ] 
    } 
]; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    MailListComponent, 
    FoldersComponent, 
    InboxComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    RouterModule.forRoot(routes) 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

app.component.ts:

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

@Component({ 
    selector: 'app-root', 
    template: ` 
    <app-folders></app-folders> 
    <router-outlet></router-outlet> 
    `, 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'app works!'; 
} 

folders.component

यहाँ मेरी * .ts फ़ाइलें हैं .ts:

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

@Component({ 
    selector: 'app-folders', 
    template: ` 
    <aside class="folders"> 
     <ul> 
     <li><a routerLink="mail/inbox">Inbox</a></li> 
     </ul> 
    </aside> 
    `, 
    styleUrls: ['./folders.component.css'] 
}) 
export class FoldersComponent { 
    folders: any[]; 

    constructor() { } 

} 

मेल-list.component.ts:

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

@Component({ 
    selector: 'app-mail-list', 
    template: ` 
    <p> 
     Mail list works! 
    </p> 
    `, 
    styleUrls: ['./mail-list.component.css'] 
}) 
export class MailListComponent { 

    constructor() { } 

} 

inbox.component.ts:

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-inbox', 
    template: ` 
    <p> 
     inbox works! 
    </p> 
    `, 
    styleUrls: ['./inbox.component.css'] 
}) 
export class InboxComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    } 

} 

Answer 1

आपका MailListComponent साथ ही एक <router-outlet> की जरूरत है, क्योंकि InboxComponent परिभाषित किया गया है आपके राउटर कॉन्फ़िगरेशन में एक बच्चे के रूप में:

@Component({ 
    selector: 'app-mail-list', 
    template: ` 
    <p> 
     Mail list works! 
    </p> 
    <router-outlet></router-outlet> 
    `, 
    styleUrls: ['./mail-list.component.css'] 
}) 
export class MailListComponent { 

    constructor() { } 

} 

लेकिन आप एक ही दुकान के अंदर InboxComponent प्रस्तुत करना चाहते हैं, आप इसे एक बच्चे

Answer 2

एक और तरीका है के रूप में नहीं जोड़ना चाहिए अगर आप को जोड़ने के लिए एक <router-outlet></router-outlet> जिस तरह से आप में अपने मार्गों को परिभाषित बदलने के लिए है से बचना चाहते हैं निम्नलिखित:

const routes = [ 
    { path: '', 
    children: [ 
     { 
     path: '', 
     component: MailListComponent 
     } 
    ] 
    }, 
    { path: 'mail', 
    children: [ 
     { 
     path: '', 
     component: MailListComponent 
     }, 
     { 
     path: 'inbox', 
     component: InboxComponent 
     } 
    ] 
    } 
]; 

यह उस नए घटक के