<router-outlet name> nie działa

Cześć, mam stworzone dwa komponenty. Chcę je wyświetlić jeden pod drugim, jednak wyświetla mi się tylko jeden - rodzic.
Przedstawię po kolei moje pliki z kodem:

plik app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CarouselModule, SlideComponent } from 'ngx-bootstrap/carousel';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { PageHeaderComponent } from './layout/page-header/page-header.component';
import { FeatureBoxComponent } from './layout/feature-box/feature-box.component';
import { FooterComponent } from './layout/footer/footer.component';
import { CarouselSliderComponent } from './layout/carousel-slider/carousel-slider.component';
import { AppRouterModule } from './app-routing.module';


@NgModule({
  declarations: [
    AppComponent,
    PageHeaderComponent,
    CarouselSliderComponent,
    FeatureBoxComponent,
    FooterComponent
  ],
  imports: [
    CarouselModule.forRoot(),
    BrowserModule,
    AppRouterModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

plik app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, RouterOutlet, Route } from '@angular/router';
import {CarouselSliderComponent } from '../app/layout/carousel-slider/carousel-slider.component'
import { FeatureBoxComponent } from './layout/feature-box/feature-box.component';
import { FooterComponent } from './layout/footer/footer.component';

const APP_ROUTERS : Route[] = [
    { 
        path: '', component: CarouselSliderComponent,
        children: [
            { path: '', component: FeatureBoxComponent, outlet: 'featureBoxChild' },
            { path: '', component: FooterComponent, outlet: 'footerChild' }
        ] 
    }
];

@NgModule({
    imports:[
        RouterModule.forRoot(APP_ROUTERS)
    ],

    exports: [
        RouterModule
    ]
})

export class AppRouterModule {}

plik app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

plik app.component.html

<div>
    <router-outlet></router-outlet>
    <router-outlet name="featureBoxChild"></router-outlet>
</div>

Kod działa tak, że

  <router-outlet></router-outlet>

wywołuje poprawnie component

CarouselSliderComponent

jednak

<router-outlet name="featureBoxChild"></router-outlet>

Nie wywołuje kolejnego komponentu dziecka m którym jest FeatureBoxComponent. Czy ktoś potrafi powiedzieć dlaczego tak się dzieje, albo chociaż naprowadzić mnie gdzie szukać błędu?
Proszę o pomoc i pozdrawiam ;)

A czy te podrzędne ścieżki nie są podrzędne względem nie AppComponent, a CarouselSliderComponent?
Jeśli tak, powinny być w szablonie CarouselSliderComponent.

dostajesz jakiś stacktrace? co leci w konsoli i co leci jak odpalisz npm czy z czego tam korzystasz?
swoją drogą, nie bądź sado-maso, zrobisz to samo ze zwykłym https://cli.angular.io/

<router-outlet></router-outlet>

wywołuje poprawnie component CarouselSliderComponent
jednak

<router-outlet name="featureBoxChild"></router-outlet>

I nie wywoła, bo router-outlet jest jedyny i niepowtarzalny. Jak wywołasz jeden bez name i następny z nazwą, to idziesz na czołówkę. Rób +barrel, czyli chowaj swoje komponenty, serwisy, moduły jak tylko się da. <router-outlet></router-outlet> ma tylko "wyświetlać" jeden komponent.

shagrin napisał(a):

A czy te podrzędne ścieżki nie są podrzędne względem nie AppComponent, a CarouselSliderComponent?
Jeśli tak, powinny być w szablonie CarouselSliderComponent.

Jeżeli masz na myśli ścieżki w importach, są ok ;)

trojanus napisał(a):

dostajesz jakiś stacktrace? co leci w konsoli i co leci jak odpalisz npm czy z czego tam korzystasz?
swoją drogą, nie bądź sado-maso, zrobisz to samo ze zwykłym https://cli.angular.io/

<router-outlet></router-outlet>

wywołuje poprawnie component CarouselSliderComponent
jednak

<router-outlet name="featureBoxChild"></router-outlet>

I nie wywoła, bo router-outlet jest jedyny i niepowtarzalny. Jak wywołasz jeden bez name i następny z nazwą, to idziesz na czołówkę. Rób +barrel, czyli chowaj swoje komponenty, serwisy, moduły jak tylko się da. <router-outlet></router-outlet> ma tylko "wyświetlać" jeden komponent.

Przepraszam, ale nie rozumiem. Mógłbyś napisać bardziej szczegółowo co masz na myśli?

@trojanus ma na mysli to, na co Cie próbowałam naprowadzić: przenieś ten drugi ruoter do innego komponentu

shagrin napisał(a):

@trojanus ma na mysli to, na co Cie próbowałam naprowadzić: przenieś ten drugi ruoter do innego komponentu

Dziękuję bardzo, teraz działa! Wniosek więc z tego taki, że te "dzieci" zawsze wywołujemy z poziomu rodzica. Bardzo dziękuję jeszcze raz!