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

Question

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]

Fuld

Helped for another issue >>>>> #56376203 – Fuld

Answer 1

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"

Fuld

Answer 2

relativeLinkResolution is completely deprecated and not referenced in https://angular.io/api/router/ExtraOptions anymore.

If you upgrade from Angular 10 --> 12 then you will find this in old documentation links:-

https://update.angular.io/?l=3&v=10.2-12.0

https://v11.angular.io/api/router/ExtraOptions#relativeLinkResolution

Hogweed

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Pinxit

I see what you provided : but the update.angular.io for 10 to 12 also simply mentions the default value for relativeLinkResolution, but not how to remove it and work with errrors. Same in V11 documentation. Still thanks for the help! I added the solutions that helped in removing the errors for v15. – Fuld