3

I'm new to Angular 2/4, so please forgive my ignorance. I have a service that I want to inject into various components, but this service uses meta data that needs to be retrieved from the server first. I'd like to know if there's a way to ensure the data for the service is resolved before the service gets injected into the components.

I read a little about route guards which sounds similar to what I'm looking for, but I don't think that applies to my problem since the service itself doesn't have a route.

adam0101
  • 29,096
  • 21
  • 96
  • 174
  • Does the component using the service have a route? You could look into the idea of using a [route resolver](https://angular.io/guide/router#resolve-pre-fetching-component-data). It sounds like you may have to change some things to get that to work if you aren't using routing at the moment. – R. Richards Nov 26 '17 at 23:09
  • 1
    You can hook into angulars initialization process and right on loading perform a certain function of your service (this could be a function where you resolve your data) through an APP_INITIALIZER token. You could take a look into that. – Benedikt Schmidt Nov 26 '17 at 23:21
  • post your code please! – Mehdi Nov 27 '17 at 03:29
  • https://stackoverflow.com/questions/41619443/how-to-call-an-rest-api-while-bootstrapping-angular-2-app – AT82 Nov 27 '17 at 11:25
  • @BenediktSchmidt, thanks for the info. I was hoping to not hold up the initialization of the app itself, but if I can't find a better way, that seems like it would work. – adam0101 Nov 27 '17 at 15:14
  • I see that Angular 5 has a new `ServerTransferStateModule` designed to get data from the server to the client on the initial page render - which is similar to what I was doing with ASP.NET MVC before switching to Angular CLI. I'll see if I can work with that and report back. – adam0101 Nov 27 '17 at 15:15
  • I heard of that, but as far as I know it is only used to improve the process of server side rendering. With angular universal the whole application is usually initialized twice, once on server side to provide a view and again on client side to make it usable in the frontend. My understanding of this service is that it helps to improve the client side rendering by loading information that was already used in the server side rendering process. Not sure if you can other stuff with it too. – Benedikt Schmidt Nov 27 '17 at 15:28

1 Answers1

-1

Resolve in Angular 2/4 is used to get data before we activate a route and component.

UserResolve service gets data from the server.

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot} from '@angular/router';
import { UserService } from '../services/user.service';

@Injectable()
export class UserResolve implements Resolve<any> {

  constructor(private service: UserService) {}

  resolve(route: ActivatedRouteSnapshot) {
    return this.service.getUser().then(user => user);
  }

}

Note: Import the "UserResolve" in your module and use it in providers (shown below).

.......
import { UserService } from '../services/user.service';
import { UserResolve } from './user.resolve';

@NgModule({
  imports: [ ... ],
  declarations: [HomeComponent, AboutComponent, AboutUserComponent],
  providers: [UserService, UserResolve]
})
export class UserModule {  }

Use it in router module to call service (resolves data) before the component loads.

 const aboutRoutes: Routes = [
      {
        path: '',
        component: HomeComponent,
        children: [
          {
            path: '',
            component: AboutComponent,
            resolve: {
              user: UserResolve
            }
          },
          {
            path: 'user',
            component: AboutUserComponent
          }
        ]
     }
]

Thank You...

Aseem Khan
  • 124
  • 1
  • 7
  • 3
    My question was about resolving data for a service, not a component. The service itself may get injected into a component that doesn't have a route. – adam0101 Nov 27 '17 at 15:14