8

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 :)

codinggirl23
  • 81
  • 1
  • 3
  • 1
    Welcome to Stack Overflow! It's always better to post the code as a text and format it using [markdown](https://stackoverflow.com/editing-help) because image is not very convenient to use and the image link could become unavailable in time. In some cases it's also nice to combine it with tools like [Stackblitz](https://stackblitz.com/). For more info check: [How to create a Minimal, Reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) – joka00 May 04 '23 at 00:15

1 Answers1

15

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

joka00
  • 2,357
  • 1
  • 10
  • 27
  • Within the `const addEditClietResolver`, how can we get `userId` from storage and make the resolve wait for it and then pass the `userId` to `getClientById()` as an argument? The documentation does not seem to cover examples of this sort. So if you can throw some light on this, that would be super helpful. – Devner Jun 17 '23 at 06:29
  • @Devner From what type of storage? – joka00 Jun 17 '23 at 12:37
  • Ionic Storage. It is available here: https://github.com/ionic-team/ionic-storage – Devner Jun 18 '23 at 15:40