multiple routes are not working in angular 10 lazy loaded module

Question

I have a main application and on the click of a menu, I am loading a new lazy-loaded submodule(productModule). I want to have multiple routes there on the productModule but it is not working. Can anyone help? I have tried cannot find module in angular Lazy Loading and lazy load module inside main component in Angular 10 and many more.

Here is the code

app.component.ts


@Component({
  selector: 'pm-root',
  template: `<div>
                <nav-bar></nav-bar>
                <router-outlet></router-outlet>
                
             </div>`
  
})

and

app-routing.module


const routes: Routes = [
...
...
  {path:'user',loadChildren:()=>import('./profile/UserModule/user.module').then(m=>m.UserModule)},
  {path:'product',loadChildren : () => import('./pluralsightproject/product/product.module').then(mod => mod.ProductModule)}  // <== this is the module
  
  
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

then in my product module by default I am loading a page where the products will be listed in a table and if I click on a product then the detail of that product should be shown (a page where the product is shown)

product.module.ts


const productRoutes: Routes = [
  { path: 'productsList', component: ProductListComponent}, 
   { path: 'productdetail/:id', component: ProductDetailComponent }  //<= this path is not working
];


@NgModule({
  declarations: [
    ProductListComponent,
    ConvertToSpacePipe,
    StarComponent,
    ProductDetailComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(productRoutes),
    FormsModule,
    //HttpClientModule,
  ],
  providers: []
})

now the code which will activate the route.

product-list.component

<div class="table-responsive">
    <table class="table table-hover table-dark">
       . . .
 <tbody>
            <tr *ngFor="let product of filteredProducts"  >
                <td><img *ngIf="imageShown" [src]="product.imageUrl" alt={{product.productName}}></td>
                <td>{{product.productName}}</td>
                <td>{{product.productCode | convertToSpace:'-' | uppercase}}</td>
                <td>{{product.releaseDate}}</td>
                <td>{{product.price | currency : 'INR':'symbol'}}</td>
                //****HERE I HAVE PLACED A BUTTON WHICH SHOULD ACTIVATE THE ROUTE*****
                <td><button [routerLink]="['/productdetail',product.productId]" routerLinkActive="router-link-active">click</button></td>
            </tr>
        </tbody>
    </table>
</div>

when i click on the button to get the detail of the product get below error


core.js:4197 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'productdetail/1'
Error: Cannot match any routes. URL Segment: 'productdetail/1'
    at ApplyRedirects.noMatchError (router.js:2270)

what is that I am missing?

My Env Detail

Angular CLI: 10.0.4
Node: 12.18.3
OS: win32 x64

Angular: 10.0.6
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.4
@angular-devkit/build-angular     0.1000.4
@angular-devkit/build-optimizer   0.1000.4
@angular-devkit/build-webpack     0.1000.4
@angular-devkit/core              10.0.4
@angular-devkit/schematics        10.0.4
@angular/cli                      10.0.4
@ngtools/webpack                  10.0.4
@schematics/angular               10.0.4
@schematics/update                0.1000.4
rxjs                              6.5.5
typescript                        3.9.7
webpack                           4.43.0

Your url segment should be product/productdetail/1 not just productdetail/1 — Sam, Nov 02 '20 at 04:39
@Sam yes sir, I understand that but how can I do that? if I put `product/productdetail` in the `routerLink` of the button in HTML file then the URL becomes `product/productList/product/productdetail/1` — GKhedekar, Nov 02 '20 at 05:29
Use ` [routerLink]="['/product', 'productdetail',product.productId]"` — Owen Kelvin, Nov 02 '20 at 05:59

score 1 · Accepted Answer · answered Nov 02 '20 at 06:07

Consider below,

You are lazy loading the ProductModule when the user visits /product. Therefore the user has to visit /products for the child routes to be activated

All child routes for the /product routes must have /product/path/to/route. For your case this will be /product/productdetail/1

To solve this you will have to change your router link to reflect this

<button [routerLink]="['/product', 'productdetail',product.productId]" routerLinkActive="router-link-active">click</button>

multiple routes are not working in angular 10 lazy loaded module

1 Answers1