Angular裏的routerLink不能按照期望工作的一個問題

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 <a>.

I am exactly following the same source code as found in training video: