• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Angular 4 - problem z childRoute

VPS Starter Arubacloud
0 głosów
383 wizyt
pytanie zadane 23 sierpnia 2017 w JavaScript przez Perkos Początkujący (290 p.)
zamknięte 30 października 2017 przez Perkos

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.

komentarz zamknięcia: Problem rozwiązany
komentarz 23 sierpnia 2017 przez ScriptyChris Mędrzec (190,190 p.)

Cannot read property 'component' of null at

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

komentarz 23 sierpnia 2017 przez Perkos Początkujący (290 p.)
Zaktualizowane
komentarz 23 sierpnia 2017 przez ScriptyChris Mędrzec (190,190 p.)

'restaurtant-detail/0'

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

komentarz 23 sierpnia 2017 przez Perkos Początkujący (290 p.)
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.
komentarz 23 sierpnia 2017 przez Perkos Początkujący (290 p.)
edycja 24 sierpnia 2017 przez Perkos
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ść?

Podobne pytania

+1 głos
1 odpowiedź 144 wizyt
pytanie zadane 14 listopada 2022 w JavaScript przez Bartek030 Obywatel (1,460 p.)
+1 głos
1 odpowiedź 264 wizyt
pytanie zadane 5 kwietnia 2022 w JavaScript przez mm Użytkownik (890 p.)
0 głosów
1 odpowiedź 207 wizyt
pytanie zadane 4 listopada 2020 w JavaScript przez Hubertius Bywalec (2,970 p.)

92,455 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...