Kind-Komponente kann nicht laden Kind Route in eckigen

Question

Ich habe eine Bar-Komponente, dann erstelle ich eine Kind-Komponente (Kind-Bar) unter Bar-Komponente. Ich habe auch eine Kinderroute dafür. Aber ich Kind-Komponente kann nicht finden (404), wenn ich Kind-Route verwenden.

app.routes.ts:

import { Routes } from '@angular/router'; 
import { HomeComponent } from './home'; 
import { AboutComponent } from './about'; 
import { BarComponent } from './bar/bar.component'; 
import { NoContentComponent } from './no-content'; 

import { DataResolver } from './app.resolver'; 

export const ROUTES: Routes = [ 
    { path: '',  component: HomeComponent }, 
    { path: 'home', component: HomeComponent }, 
    { path: 'about', component: AboutComponent }, 
    { path: 'bar', component: BarComponent}, 
    { path: 'detail', loadChildren: './+detail#DetailModule'}, 
    { path: 'barrel', loadChildren: './+barrel#BarrelModule'}, 
    { path: '**', component: NoContentComponent }, 
]; 

bar.component.ts:

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

@Component({ 
    selector: 'bar', 
    templateUrl: './bar.component.html', 
    styleUrls: ['./bar.component.css'] 
}) 
export class BarComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    } 

} 

bar.component.html:

<p> 
    bar works! 
</p> 
<span> 
     <a [routerLink]=" ['./child-bar'] "> 
     Child Bar 
     </a> 
    </span> 
<router-outlet></router-outlet> 

Kind-bar.component.ts :

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

@Component({ 
    selector: 'child-bar', 
    templateUrl: './child-bar.component.html', 
    styleUrls: ['./child-bar.component.css'] 
}) 
export class ChildBarComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    console.log('hello `ChildBar` component'); 
    } 

} 

Kind-bar.module.ts:

import { CommonModule } from '@angular/common'; 
import { FormsModule } from '@angular/forms'; 
import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 

import { routes } from './child-bar.routes'; 
import { ChildBarComponent } from './child-bar.component'; 

console.log('`ChildBar` bundle loaded asynchronously'); 

@NgModule({ 
    declarations: [ 
    /** 
    * Components/Directives/ Pipes 
    */ 
    ChildBarComponent, 
    ], 
    imports: [ 
    CommonModule, 
    FormsModule, 
    RouterModule.forChild(routes), 
    ], 
}) 
export class ChildBarModule { 
    public static routes = routes; 
} 

kinder bar.routes.ts:

import { ChildBarComponent } from './child-bar.component'; 

export const routes = [ 
    { path: '', component: ChildBarComponent, pathMatch: 'full' }, 
]; 

Bitte lassen Sie mich wissen, wenn Sie mehr Datei benötigen, ich anbringen kann. Vielen Dank.

Answer 1

Ihre Routing-Datei ist falsch, wenn etwas Kind einer Komponente ist dann Datei Routing wie diese

Bei normalen Routing ohne verzögertes Laden

export const routes: Routes = [ 
    { path: '', redirectTo: 'home', pathMatch: 'full' }, 
    { path: 'home', component: HomeComponent }, 
    { path: 'about', component: AboutComponent }, 
    { path: 'bar', component: BarComponent, 
    children: [ 
     { path: '', redirectTo: 'child-bar', pathMatch: 'full' }, 
     { path: 'child-bar', component: ChildBarComponent } 
    ] 
    } 
]; 

wenn Sie verzögertes Laden wollen sein sollte Sie können diese beiden Wege

1)

versuchen

{ path: 'bar', component: BarComponent, 
     children: [ 
      { path: '', redirectTo: 'child-bar', pathMatch: 'full' }, 
      { path: 'child-bar', loadChildren: 'childbar/childbar.module#ChildBarModule' } 
     ] 
    } 

2) Ihre komplette Bar-Komponente mit Kind Komponente in separater Modul mit dort eigenen Routing-Tabelle

export const routes: Routes = [ 
    { path: '', redirectTo: 'product-list', pathMatch: 'full' }, 
    { path: 'home', component: HomeComponent }, 
    { path: 'about', component: AboutComponent }, 
    { path: 'bar', loadChildren: 'bar/bar.module#LazyModule' } 
    } 
]; 

Kontrolle dieses plnkr zu verstehen bewegen, wie ein träges Laden funktioniert https://plnkr.co/edit/vpCqRHDAj7V6mlN1AknN?p=preview ich das hoffentlich helfen :)