Search code examples
javascriptangulartypescriptangular7angular-routing

Unable to navigate to the new page on icon click


I am trying to navigate to the new page on click of the icon and the component is like below

getTabDetails() {
  switch (this.tabContent) {
    case 'Shipment content':
      {
        this.router.navigateByUrl('/ProjectShipment/000634');
      }
  }
} 

And my Routing component is like below

const appRoutes: Routes = [
  {
  path: 'dB',
  data: { title: 'Dashboard' },
  children: [
      {
          path: 'ProjectShipment/:reportProject',
          component: ProjectShipmentComponent,
          data: { title: 'Project Shipment' },
      }

I get the below error when the icon is clicked

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'ProjectShipment/000634' Error: Cannot match any routes. URL Segment: 'ProjectShipment/000634'

but when I try to access the page directly through URL it works

http://localhost:4200/dB/ProjectShipment/000634

Am I missing something here?


Solution

  • you can try:

    this.router.navigateByUrl(['ProjectShipment',000634], relativeTo:this.route);
    

    where

    private route: ActivatedRoute
    

    in case you are at /dB path