I have created a custom module with the following routing settings:
const CUSTOM_ROUTES: Routes = [
{ path: 'custom', component: CustomPageComponent, canActivate: [CmsPageGuard] },
{ path: 'custom2', component: CustomPageComponent },
{
path: 'faq-alias', component: PageLayoutComponent, canActivate: [CmsPageGuard],
data: {
pageLabel: 'faq'
}
}
];
@NgModule({
declarations: [CustomPageComponent],
imports: [
CommonModule,
UrlModule,
RouterModule.forChild(CUSTOM_ROUTES),
ConfigModule.withConfig({
routing: {
routes: {
product: {
paths: [
'jerrycamera/:manufacturer/:name/:productCode',
'cameras/:name/:productCode'],
paramsMapping: {
name: 'nameForUrl'
}
}
}
}
} as RoutingConfig),
the /custom url points to my custom component with html template below:
<p>custom-page works!</p>
<a href="/cameras/photosmart-e317-digital-camera/300938">Awesome Product</a>
<p></p>
<a [routerLink]="{ cxRoute: 'product', params: {code: '300938'}} | cxUrl">Awesome Product 2</a>
when I click hyperlink “Awesome Product 2”, I expect to navigate to the product detail page for product 300938:
Unfortunately it does not work. When I click the hyperlink, it will open http://localhost:4200/electronics-spa/en/USD instead.
I observed in Chrome development tool, that every time I open url http://localhost:4200/electronics-spa/en/USD/custom, there is warning message reported in Chrome console:
No configured path matches all its params to given object. Route config:
This just points to my route configuration hard coded in .
I am exactly following the same source code as found in training video:
To get more original articles by Jerry, please follow the public account "Wang Zixi":
