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.