Search code examples
routesrelative-pathlegacyangular15

relativeLinkResolution not working in Angular 15 but it used to work in 11


For my project that I migrated from Angular 11.2.2 to 15.2.8.

Throws this error at compile time

Argument of type '{ useHash: true; relativeLinkResolution: string; }' is not assignable to parameter of type 'ExtraOptions'. 
Object literal may only specify known properties, and 'relativeLinkResolution' does not exist 
in type 'ExtraOptions'. 

44 relativeLinkResolution: 'legacy'

My code

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
    useHash: true,
    relativeLinkResolution: 'legacy' <-- this is shown as error even by VS
})
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Error shown by VS is

Argument of type '{ useHash: true; relativeLinkResolution: string; }' is not assignable to parameter of type 'ExtraOptions'.
  Object literal may only specify known properties, and 'relativeLinkResolution' does not exist in type 'ExtraOptions'.ts(2345)

it was working fine till last version . I have navigated to ExtraOptions and could not find these properties anywhere. Are these property discarded from Angular 15, if yes then what's the alternative for it.

Also its not resolving the loadChildren property of Routes element

{
    path: "",
    component: AdminLayoutComponent,
    children: [
      {
        path: "",
        loadChildren:
          "./layouts/admin-layout/admin-layout.module#AdminLayoutModule"
      }
    ]
  }

the path should resolve like this => [localhost:4200/#/dashboard]


Solution

  • Below Changes to loadChildren property of ExtraOptions helped to fix routing to child component in my Project

    component: AdminLayoutComponent,
        children: [
          {
            path : "",
            loadChildren: () => import('./layouts/admin-layout/admin-layout.module').then(m => m.AdminLayoutModule)
          }
        ]
      },
    

    Other errors can simply be removed from the code to fix them.

    Example:

    export const appRoutingModule = RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' });
    

    This changed to --->

    export const appRoutingModule = RouterModule.forRoot(routes);
    

    There's one important change needed to in tsconfig file that I have mentioned in comments to the question: comment

    "module": "es2015" --- should be --> "ESNext"

    "target": "es5" --- should be --> "ESNext"