Angular 11 - Lazy load routing issue

Question

Trying to create CRUD opration with MEAN stack. Currently using Angular 11 cli, I've created lazy module. the lazy module has add/edit/list components. To list the data, I'm using Angular materials. The problem what here I'm facing is that am not able to navigate to due to below error on my front end.

Note: This may be duplicate, but I've already seen few SO solution, but unfortunatly i'm not able to fix this for more than 3 hrs.

May be some has good eyes to point the problem what i've done here

app-routing.module.ts

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'students', loadChildren: () => import('./demo-app/demo-app.module').then(m => m.DemoCrudAppModule) },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

demo-crud-app-routing.module.ts

const routes: Routes = [
  
  { path: '', component: ListStudentsComponent, pathMatch: 'full' },
  { path: 'add', component: AddNewStudentsComponent },
  { path: 'view/:id', component: ViewStudentsDetailsComponent },
  { path: 'edit/:id', component: EditStudentsComponent }
];

when I'm trying to click mat-table data to navigate to view student details, I'm getting below console error

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'view/607e79ee6d81777c6ee80919'

View-student-details-component.html

<table mat-table [dataSource]="data" class="mat-elevation-z8 list-tbl" matSort matSortActive="firstName"
      matSortDisableClear matSortDirection="asc" *ngIf="data && data.length > 0">
      <!--- Note that these columns can be defined in any order.
                The actual rendered columns are set as a property on the row definition" -->
      <ng-container matColumnDef="_id">
        <th mat-header-cell *matHeaderCellDef>ID</th>
        <td mat-cell *matCellDef="let element">
          <a color="primary">{{ element._id }}

          </a>
        </td>
      </ng-container>
      <!-- Position Column -->
      <ng-container matColumnDef="firstName">
        <th mat-header-cell *matHeaderCellDef>Student Name</th>
        <td mat-cell *matCellDef="let element">{{ element.firstName }}</td>
      </ng-container>

      <!-- Name Column -->
      <ng-container matColumnDef="age">
        <th mat-header-cell *matHeaderCellDef>Age</th>
        <td mat-cell *matCellDef="let element">{{ element.age }}</td>
      </ng-container>

      <!-- Weight Column -->
      <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef>Status</th>
        <td mat-cell *matCellDef="let element">{{ element.status }}</td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayColumns" [routerLink]="['/view/', row._id]"></tr>
    </table>

my local url - http://localhost:4200/students

Thanks in advance

Answer 1

Change your routerLink to

[routerLink]="['view', row._id]"

If current active URL is /students then clicking on tr will navigate to http://localhost:4200/students/view/607e79ee6d81777c6ee80919

If you add / before path like ['/view/', row._id] then URL will navigate to http://localhost:4200/view/607e79ee6d81777c6ee80919 no matter what current active URL is.