Angular, dynamic param on lazy loaded route not working - angular8

Question

I have an Angular 8 App that has lazyloading working on all the pages, except for 2 that have dynamic parameters where something is not working correctly
From the app routing module
{
path: 'product',
loadChildren: './marketing/page/product/product-page.module#ProductPageModule'
},
From the ProductPageRoutingModule
const routes: Routes = [
{
path: '',
component: AppMarketingPageProductComponent,
children: [
{ path: ':slug', component: AppMarketingPageProductComponent },
{ path: ':slug', component: AppMarketingPageProductComponent },
{ path: ':slug/:secondary', component: AppMarketingPageProductComponent },
]
}
];
Routes are being put into the imports correctly, and the ProductRoutingModule is imported into ProductPageModule.
#NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [
RouterModule
]
})
export class ProductRoutingModule {}
In the AppMarketingPageProductComponent constructor
constructor( private route: ActivatedRoute ) {}
With these 2 I try to get the params within onNgInit function
this.route.params.subscribe( (params: Params) => {
console.log(params);
});
When I try to load the page I get an empty object. instead of "slug" or "slug" and "secondary" values key-value pairs.

Answer 1

The problem is that what I thought were child routes aren't really child routes so this
const routes: Routes = [
{
path: '',
component: AppMarketingPageProductComponent,
children: [
{ path: ':slug', component: AppMarketingPageProductComponent },
{ path: ':slug', component: AppMarketingPageProductComponent },
{ path: ':slug/:secondary', component: AppMarketingPageProductComponent },
]
}
];
needed to be changed to this
const routes: Routes = [
{ path: ':slug', component: AppMarketingPageProductComponent },
{ path: ':slug', component: AppMarketingPageProductComponent },
{ path: ':slug/:secondary', component: AppMarketingPageProductComponent },
];
now it works.