Angular дочерний маршрут с идентификатором вызывает ошибку

Question

У меня очень простая дочерняя маршрутизация, где основной маршрут загружается медленно, основной маршрут работает правильно, но когда я пытаюсь получить доступ к дочернему маршруту с параметрами, он не работает:

shopping-routeing. module.ts

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import { ShoppingComponent } from './shopping/shopping.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';

const routes = [
    {  path: '', 
        component: ShoppingComponent,
        exact: true,
        children: [
            {
                path: '/:id',
                component: ProductDetailComponent
            }
        ]
    },
]

@NgModule({
    imports:[RouterModule.forChild(routes)],
    exports:[RouterModule]
})

export class ShoppingRoutingModule{}

И я пытаюсь через

<ul>
  <li><a [routerLink]="['']"> Home</a></li>
  <li><a [routerLink]="['/shopping', '10']">Shopping</a></li>
</ul>
<router-outlet></router-outlet>

app-routing.module.ts это

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'shopping', loadChildren: () => import('./shopping/shopping.module').then(m => m.ShoppingModule)}
];

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