Angular 4 - problem z childRoute

Question

Witam,

Mój problem polega na tym, że gdy używam 'children'  w path to nie ładują się komponenty (treść) dzieci (sciezka w pasku działa poprawnie, dodaje nazwe ładowanego komponentu). Gdy sieżka ustawiona jest jako główna, komponent ładuje się bez problemu.  Błąd który wystepuje: 

vendor.bundle.js:64655 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'restaurtant-detail/0'
Error: Cannot match any routes. URL Segment: 'restaurtant-detail/0'
    at ApplyRedirects.webpackJsonp.../../../router/@angular/router.es5.js.ApplyRedirects.noMatchError (vendor.bundle.js:115782)
    at CatchSubscriber.selector (vendor.bundle.js:115757)
    at CatchSubscriber.webpackJsonp.../../../../rxjs/operator/catch.js.CatchSubscriber.error (vendor.bundle.js:13123)
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._error (vendor.bundle.js:11158)
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.error (vendor.bundle.js:11132)
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._error (vendor.bundle.js:11158)
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.error (vendor.bundle.js:11132)
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._error (vendor.bundle.js:11158)
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.error (vendor.bundle.js:11132)
    at LastSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._error (vendor.bundle.js:11158)
    at ApplyRedirects.webpackJsonp.../../../router/@angular/router.es5.js.ApplyRedirects.noMatchError (vendor.bundle.js:115782)
    at CatchSubscriber.selector (vendor.bundle.js:115757)
    at CatchSubscriber.webpackJsonp.../../../../rxjs/operator/catch.js.CatchSubscriber.error (vendor.bundle.js:13123)
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._error (vendor.bundle.js:11158)
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.error (vendor.bundle.js:11132)
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._error (vendor.bundle.js:11158)
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.error (vendor.bundle.js:11132)
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._error (vendor.bundle.js:11158)
    at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.error (vendor.bundle.js:11132)
    at LastSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._error (vendor.bundle.js:11158)
    at resolvePromise (polyfills.bundle.js:3198)
    at resolvePromise (polyfills.bundle.js:3169)
    at polyfills.bundle.js:3246
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:2839)
    at Object.onInvokeTask (vendor.bundle.js:67516)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:2838)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (polyfills.bundle.js:2606)
    at drainMicroTaskQueue (polyfills.bundle.js:3010)
    at <anonymous>

Kod: 

app.routing.module.ts

import { NgModule, ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { SignupComponent } from './auth/signup/signup.component';
import { RestaurantComponent } from './restaurant/restaurant.component';
import { RestaurantDetailComponent } from './restaurant/restaurant-detail/restaurant-detail.component';
import { RestaurantInformationComponent } from './restaurant/restaurant-detail/restaurant-information/restaurant-information.component';





const appRoutes: Routes = [
   { path: '', component: HeaderComponent },
   { path: 'signup', component: SignupComponent, data: { breadcrumb: 'Sign Up'}},
   { path: 'restaurant', component: RestaurantComponent,  data: { breadcrumb: 'Restaurant'}, children: [
    { path: 'restaurtant-detail/:id', component: RestaurantDetailComponent, data: { breadcrumb: 'Restaurant-detail' }},
   ]},

];

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes)
    ],
    exports: [
        RouterModule
    ]
})


export class AppRoutingModule {}
// export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

 

component.html 

<div class="row">
  <div class="col-xs-12">
    <!-- <a (click)="onSelected()" role="button" class="list-group-item clearfix"> -->
    <a [routerLink]="['restaurtant-detail', index]"style="cursor: pointer" class="list-group-item clearfix">
      <div class="pull-left">
        <h4 class="list-group-item-heading">{{ restaurant.name }}</h4>
        <p class="list-grup-item-text">{{ restaurant.description }}</p>
      </div>
      <span class="pull-right">
        <img src="{{ restaurant.imagePath }}" alt="" class="img-responsive" style="max-height: 50px;">
      </span>
    </a>
  </div>
</div>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BreadcrumbComponent } from './shared/breadcrumb/breadcrumb.component';
import { HeaderComponent } from './header/header.component';
import { SearchComponent } from './body/search/search.component';
import { BodyComponent } from './body/body.component';
import { ToptenComponent } from './body/topten/topten.component';
import { NavbarComponent } from './navbar/navbar.component';
import { FooterComponent } from './footer/footer.component';
import { ContactComponent } from './footer/contact/contact.component';
import { SignupComponent } from './auth/signup/signup.component';
import { SigninComponent } from './auth/signin/signin.component';
import { InformationComponent } from './body/information/information.component';
import { RestaurantComponent } from './restaurant/restaurant.component';
import { RestaurantItemComponent } from './restaurant/restaurant-list/restaurant-item/restaurant-item.component';
import { RestaurantListComponent } from './restaurant/restaurant-list/restaurant-list.component';
import { RestaurantDetailComponent } from './restaurant/restaurant-detail/restaurant-detail.component';
import { RestaurantInformationComponent } from './restaurant/restaurant-detail/restaurant-information/restaurant-information.component';
import {Ng2PageScrollModule} from 'ng2-page-scroll';
import { IonRangeSliderModule } from 'ng2-ion-range-slider';
import { DropdownDirective } from './shared/dropdown.directive';
import { ProgressBarDirective } from './shared/progress-bar.directive';
import { MdSliderModule,
  MdIconModule,
  MdSelectModule,
  MdDatepickerModule,
  MdNativeDateModule,
  MdInputModule,
  MdButtonModule} from '@angular/material';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import 'hammerjs';
import { MapsComponent } from './restaurant/restaurant-detail/restaurant-information/maps/maps.component';
import { AgmCoreModule } from '@agm/core';


@NgModule({
  declarations: [
    AppComponent,
    BreadcrumbComponent,
    HeaderComponent,
    SignupComponent,
    SigninComponent,
    SearchComponent,
    BodyComponent,
    ToptenComponent,
    NavbarComponent,
    ContactComponent,
    InformationComponent,
    RestaurantComponent,
    DropdownDirective,
    ProgressBarDirective,
    RestaurantItemComponent,
    RestaurantListComponent,
    RestaurantDetailComponent,
    RestaurantInformationComponent,
    FooterComponent,
    MapsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    Ng2PageScrollModule,
    MdSliderModule,
    MdIconModule,
    MdSelectModule,
    MdDatepickerModule,
    MdNativeDateModule,
    MdInputModule,
    MdButtonModule,
    BrowserAnimationsModule,
    AgmCoreModule.forRoot({
      apiKey: ''
    })
  ],
  entryComponents: [
    SigninComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Będę wdzięczny za wszelką pomoc.

Comments

Cannot read property 'component' of null at

Jaka jest dalsza część błędu? Jest tam wskazanie na miejsce, gdzie występuje problem.

---

Zaktualizowane

---

'restaurtant-detail/0'

Masz tam jakąś literówkę restaurtant i restaurant - sprawdź, może w tym tkwi problem.

---

Literówka była, ale w routerLink i path więc nie maiła to wpływu. Po zmianie nadla ten sam błąd.

Problem tkwi gdzieś w children. Bo jeśli ustawie restaurant-detail jako osobną scieżkę to działa bez prblemu. Zależy mi na tym bo mam breadcrumb na stronie.

---

Częściowo znalazłem rozwiązanie, musiałem dodać <router-outlet></router-outlet> w component.html. W tym momencie komponent dziecka ładuje się w komponencie rodzica. Jak zrobić żeby ładował się tak jak by był główną sieżką (bez rodzica), czy jest w ogóle taka możliwość?