Angular: Load config file before sending http request within the APP_INITIALIZER

Question

In my SPA, I'm using the APP_INITIALIZER token, which is supposed to perform the following in the given sequence. 1) Load the config file relevant to the environment (DEV, QA, PROD). 2) Use the API URL from the config file to make the HTTP request for the authentication token 3) Use the API URL from the config file and append the token to the HTTP request (this happens within the token interceptor) to load some other config data)

Earlier I had 2 and 3 implemented with the URL hard-coded, and then everything worked fine. When I moved the API Urls to the config and tried loading them from the config file, the token endpoint is executed before the config file request is resolved, therefore the url becomes undefined.

See the code below:

app.module.ts

export function initializeData(appConfig: AppConfig, authService: AuthService, appService: AppService, globalService: GlobalService) {
  return () => {
    try {
      return Promise.all([appConfig.load(), authService.authenticateClient(), appService.getClientConfig()]).then(() => {
        console.log('success')
        return Promise.resolve();
      }, (err) => {
        alert(err.error.error_description);
        return Promise.reject(err);
      });
    } catch (e) {
      alert(e.message);
      console.log(e);
    }

  }
}

@NgModule({
.............
.............
providers: [
    AppConfig,
    AuthService,
    {
      provide: APP_INITIALIZER,
      useFactory: initializeData,
      deps: [AppConfig, AuthService, TranslateService, AppService, GlobalService],
      multi: true
    },
    AppService
]
});

app.config.ts:

@Injectable()
export class AppConfig {
  static settings: IAppConfig;
  constructor(private http: HttpClient) { }
  load() {
    const jsonFile = `assets/config/config.${environment.name}.json`;

    return new Promise((resolve, reject) => {
      this.http.get(jsonFile).pipe(map((res: IAppConfig) => {
        AppConfig.settings = <IAppConfig>res;
        return AppConfig.settings;
      })).subscribe(() => {
        resolve();
        })
    }).catch ((response: any) => {
        console.log(`Could not load file '${jsonFile}': ${JSON.stringify(response)}`);
      });
  }
}

auth.service.ts (token endpoint):

authenticateClient(){
    let body = new HttpParams()
      .set('client_id', AppConfig.settings.apiServer.client_id)
      .set('grant_type', AppConfig.settings.apiServer.grant_type)
      .set('scope', AppConfig.settings.apiServer.scope);

    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/x-www-form-urlencoded'
      })
    };

    let authGatewayUrl: string = AppConfig.settings.apiServer.tokenUrl + window.location.search;

    return  this.http.post<any>(authGatewayUrl, body, httpOptions).toPromise().then(
        data => {
          this.token.next(data); 
          return this.token;
        },
        error => {
          return Promise.reject(error);
        }
      );  
  }

Now, when I add breakpoints in app.config.ts and auth.service.ts, in the latter file, AppConfig.Settings.apiServer.tokenUrl get hit before the app config file is resolved. Hence it becomes undefined.

How can I resolve this? I know I should be using switchmap, but I'm not sure how to approach it.

appConfig.load().then(()=>Promise.all[authService.authenticateClient(), appService.getClientConfig()].then....)? — ABOS
– ABOS, Commented Dec 6, 2018 at 18:07
Thanks. I shouldn't have missed that. Please add a reply so that I can mark it as answer. — devC
– devC, Commented Dec 7, 2018 at 9:35

ABOS · Accepted Answer · 2018-12-07 13:51:32Z

3

Perhaps you can control the sequence in .then callback:

appConfig.load()
  .then(()=>
     Promise.all[
       authService.authenticateClient(),
       appService.getClientConfig()
     ]
     .then....)

answered Dec 7, 2018 at 13:51

ABOS

3,8413 gold badges19 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular: Load config file before sending http request within the APP_INITIALIZER

app.module.ts

app.config.ts:

auth.service.ts (token endpoint):

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

app.module.ts

app.config.ts:

auth.service.ts (token endpoint):

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related