Проблема новичка: невозможно перейти по дочернему маршруту с соответствующим компонентом

Question

Я занимаюсь разработкой небольшого углового материала. Я использую модуль маршрутизации:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppProduitImmobilierDetailsComponent} from './app-produit-immobilier-details/app-produit-immobilier-details.component';
import { AppListProduitImmobilierComponent } from './app-list-produit-immobilier/app-list-produit-immobilier.component';

const routes: Routes = [{
    path: '',
    redirectTo: '/listproduitimmobilier',
    pathMatch: 'full' }, {
      path: 'listproduitimmobilier',
      component: AppListProduitImmobilierComponent,
      children: [
        {
          path: 'details/:id',
          component: AppProduitImmobilierDetailsComponent
        }
      ]
  }];

@NgModule({
  imports: [RouterModule.forRoot(routes,
      { enableTracing: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Я импортирую его в AppModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {CommonModule} from '@angular/common';
import { AppRoutingModule } from './app-routing.module';
import { MaterialModule } from './material/material.module';
import { FlexLayoutModule } from '@angular/flex-layout';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppProduitImmobilierDetailsComponent } from './app-produit-immobilier-details/app-produit-immobilier-details.component';
import {enableProdMode} from '@angular/core';
import 'hammerjs';
import { AppListProduitImmobilierComponent } from './app-list-produit-immobilier/app-list-produit-immobilier.component';
enableProdMode();
@NgModule({
  declarations: [
    AppComponent,
    AppProduitImmobilierDetailsComponent,
    AppListProduitImmobilierComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule,
    FlexLayoutModule,
    CommonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

в AppListProduitImmobilierComponent, я перехожу к дочернему маршруту, соответствующему компоненту AppProduitImmobilierDetailsComponent

   goToDetailsView(annonce: ProduitImmobilierDTO) {
      this.router.navigate(['/listproduitimmobilier/details/' + annonce.id]);
    }

, но вместо перехода к дочернему маршруту, соответствующему компоненту AppProduitImmobilierDetailsComponent, он остается в родительском представлении, соответствующем AppListProduitImmobilierComponent. Тем не менее, URL-адрес

http://localhost:4200/listproduitimmobilier/details/1

, который является дочерним URL-адресом представления. Не могли бы вы помочь мне?