Angular Child Route не работает и перенаправляет меня на ту же страницу

Я пытался изменить свой route и пока не обнаружил никаких проблем. Но если вы обнаружите какие-либо недостатки, пожалуйста, дайте мне знать, также я пытаюсь найти любую ошибку типа и перепроверить свои компоненты, пока я не нашел ни одной, но затем снова дайте мне знать. Я пытаюсь ввести свой URL-адрес маршрута, и он работает, но отображает ту же страницу. Он не перенаправит меня на нужную страницу. Я даже удаляю и устанавливаю node module, но к сожалению проблема все та же. Честно говоря, я просто хочу попробовать, смогу ли я использовать child route в Angular 6. Но в любом случае я предоставлю вам модуль маршрута, мой html-компонент и другие мои компоненты.

Сначала мой модуль маршрута:

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

import { ContactComponent } from './contact/contact.component';
import { ComponentDetailComponent } from './contact/component-detail/component-detail.component';
import { ContactDescriptionComponent } from './contact/component-detail/contact-description/contact-description.component';

const routes: Routes = [

  {
    path: 'contact',
    component: ContactComponent,
    children: [
        {
            path: ':id',
            component: ComponentDetailComponent,
            children: [
                {
                    path: 'details/:name',
                    component: ContactDescriptionComponent
                }
            ]
        }
      ]
   },

];

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

Мой app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { ContactComponent } from './contact/contact.component';
import { ComponentDetailComponent } from './contact/component-detail/component-detail.component';
import { ContactDescriptionComponent } from './contact/component-detail/contact-description/contact-description.component';

@NgModule({
   declarations: [
     AppComponent,
     ContactComponent,
     ComponentDetailComponent,
     ContactDescriptionComponent
],
imports: [
     BrowserModule,
     AppRoutingModule
],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

Мой app.component.html:

<app-contact></app-contact>
<router-outlet></router-outlet>

Мой контакт.component.html:

<h1>Contact works!</h1>
<a [routerLink]="['id']">Contact Details</a>

Мой компонент-detail.component.html:

<h3>Component-detail Works!</h3>
<a [routerLink]="['details','name']" >Description</a>

И, наконец, мой контакт-description.component.html:

<h3>Contact-description Works!</h3>

Если у вас есть что-то, что вы хотели бы, чтобы я добавил, просто дайте мне знать.