1

When I have the below route

 <a mat-list-item [routerLink]="['../../mfe-h/admin/dashboard']"><span>Home</span></a>

Exception

Error: NG04005: Invalid number of '../'
    at createPositionApplyingDoubleDots (router.mjs:1082:19)
    at findStartingPosition (router.mjs:1072:12)
    at createTreeUsingPathIndex (router.mjs:907:34)
    at createUrlTree (router.mjs:917:20)
    at Router.createUrlTree (router.mjs:5245:16)
    at get urlTree [as urlTree] (router.mjs:5829:28)
    at RouterLinkWithHref.updateTargetUrlAndHref (router.mjs:5821:26)
    at RouterLinkWithHref.ngOnChanges (router.mjs:5797:14)
    at RouterLinkWithHref.rememberChangeHistoryAndInvokeOnChangesHook (core.mjs:1523:14)

Routes

const adminRoutes = [
  {
    path: 'mfe-h',
    component: AdminToolbarComponent,
    children: [
      {
        path: 'admin',
        children: [
          {
            path: 'dashboard',
            component: AdminDashboardComponent,
          },
        ],
      },
    ],
  },
];

@NgModule({
  declarations: [],
  imports: [CommonModule, RouterModule.forChild(adminRoutes)],
})
export class AdminRoutingModule {}
San Jaisy
  • 15,327
  • 34
  • 171
  • 290

2 Answers2

0

I did not find an official documentation for this, but after debugging it turns out that the cause of this error is the additional /.. you've added to a routerLink or to your navigate function. Consider the following app-routing structure:

[
    {
        path: 'app'
        children:[{path: 'child'}]
    }
]

Now, when you're on app/child, you can navigate up to path app by just passing ./.. to your ruoterLink/navigate.

But, if you'll pass too many /.., something like ./../../.., you are actually trying to navigate higher than the routing tree enables. In this case, Angular will ignore the additional /.., but will throw the NG04005 Error in order to indicate that something is wrong with the given path.

Avraham Weinstein
  • 582
  • 4
  • 13
0

Many a times these errors appears because in .html file something similar to this [routerLink]="'../../../job-notification'" must be present use something alternate to this to navigate to the desired route. For eg. router.navigate(['/job-notification']) in .ts file.

I was having similar issue I have solved by removing the routerLink line from my html.

vishva
  • 19
  • 6