CODEWITHSUNDEEP
angulardeprecatedangular-resolver
codinggirl23
codinggirl23

Reputation: 140

i get resolve as strikethrough in my angular 15 generated project. how can i solve this?

I'm really new to angular and this is the first project I'm creating. what I need to do here is create an add-editClient component and use the angular resolve method to get data from the backend which is spring-boot and for the database I use MYSQL with DBeaver. I design my interface with angular material.

I added resolve data in the app-routing module as well. no matter how many times I try to install resolve from @angular/router it still gets deprecated.

please see the attached images below.

addEditClient.ts file app-routing.module.ts

please let me know if there is any way to solve this problem. any suggestions are much appreciated :)

Upvotes: 14

Views: 17621

Answers (1)

joka00
joka00

Reputation: 2547

Resolve was deprecated in v15.2

And will be removed in v17

As mentioned in the deprecation note of Resolve in @angular/router it was deprecated in favor of ResolveFn.

Deprecated: Class-based Route resolvers are deprecated in favor of functional resolvers. 
An injectable class can be used as a functional guard using the 
`inject` function: `resolve: {'user': () => inject(UserResolver).resolve()}`.

Steps to use the functional resolvers

Remove the deprecated Resolve implementation from the addEditClient.ts

Add this function to your router or the service file or any other file with export. This will inject the AddEditClientService and resolve the function you need. As you can see you can also use the route and state params and pass them to your function.

const addEditClietResolver: ResolveFn<any> =
    (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
      return inject(AddEditClientService).getClientById();
    };

And use it in the router path

{
    path: 'clients/add-edit',
    component: AddEditClientComponent,
    resolve: {data: addEditClientResolver},
}

Or with a shorter approach by using the function directly in Route object

{
    path: 'clients/add-edit',
    component: AddEditClientComponent,
    resolve: {data: () => inject(AddEditClientService).getClientById()},
}

You can checkout more about this in the Angular documentation

Upvotes: 21

Related Questions