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]

Helped for another issue >>>>> https://stackoverflow.com/questions/56375703/angular-8-lazy-loading-modules-error-ts1323-dynamic-import-is-only-supporte — Vishesh, Apr 26 '23 at 21:25

score 1 · Accepted Answer · answered May 04 '23 at 09:03

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"

Predator13 · Answer 2 · 2023-06-05T14:08:57.983

1

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

edited Jun 05 '23 at 14:08

answered Jun 05 '23 at 04:59

Predator13

91
4

1

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](/help/how-to-answer). – Community Jun 05 '23 at 11:22
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. – Vishesh Jun 06 '23 at 02:09

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

2 Answers2

Linked