The issue with APP_INITIALIZER is that it fails to resolve promises before moving on to other

Question

The issue with APP_INITIALIZER is that it fails to resolve promises before moving on to other

I can't seem to figure out what's missing here. I hope it's just a minor issue.

The problem I'm facing is that the APP_INITIALIZER isn't resolving completely.

In my code, I have two services: AppSettingsService and SomethingService. I've introduced a new injectable token called "API_BASE_URL" that I want to inject into SomethingService. AppSettingsService has a method named setup() which sets the string "test" within a Promise. My intention is for this promise to be resolved before setting API_BASE_URL. However, it appears that the code doesn't want to wait for it!

I've included a sandbox link:

Sandbox

If you open the console and observe, these are the steps it follows:

"Executing promise" (this is as expected) "Getting test string too early" (I would expect this after the promise resolves) "undefined" (this occurs because I'm trying to print appSettings.test but it hasn't been set yet due to the unresolved Promise) "Resolving promise" (this happens shortly thereafter due to the setTimeout())

Any assistance would be greatly appreciated!

angular typescript promise app-initializer

Answer 1

Answer №1

Each of the `useFactory` sections within the providers is missing a return statement. The corrected code can be found below:

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { AppSettingsService } from './app-settings.service';
import { API_BASE_URL } from './something.service';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    AppSettingsService,
    {
      provide: APP_INITIALIZER,
      multi: true,
      deps: [AppSettingsService],
      useFactory: (appSettingsService: AppSettingsService) => {
        return () => {
          return appSettingsService.setup();
        };
      },
    },
    {
      provide: API_BASE_URL,
      deps: [AppSettingsService],
      useFactory: (appSettingsService: AppSettingsService) => {
        console.log('Getting test string too early');
        console.log(appSettingsService.test);
        return appSettingsService.test;
      },
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

View on CodeSandbox

Answer 2

Each of the `useFactory` sections within the providers is missing a return statement. The corrected code can be found below:

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { AppSettingsService } from './app-settings.service';
import { API_BASE_URL } from './something.service';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    AppSettingsService,
    {
      provide: APP_INITIALIZER,
      multi: true,
      deps: [AppSettingsService],
      useFactory: (appSettingsService: AppSettingsService) => {
        return () => {
          return appSettingsService.setup();
        };
      },
    },
    {
      provide: API_BASE_URL,
      deps: [AppSettingsService],
      useFactory: (appSettingsService: AppSettingsService) => {
        console.log('Getting test string too early');
        console.log(appSettingsService.test);
        return appSettingsService.test;
      },
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

View on CodeSandbox

The issue with APP_INITIALIZER is that it fails to resolve promises before moving on to other

Answer №1

Similar questions

Tips on how to restore the default value for a select dropdown in Angular 2

Tips for making a dynamic link button using Angular

What is the proper way to compare enum values using the greater than operator?

Playing around with Segment Analytics testing using Jest in TypeScript

Transitioning a codebase from @angular-builders/custom-webpack to NX for project optimization

Intercepting and manipulating HTTP response headers using Angular's HTTP

Combining ngModel and ngClass in Angular: a comprehensive guide

Steps for associating ngclass with an observant value

Converting SQL COUNT query to angularfire2: A guide on translating Firebase / angularfire2

The upcoming construction of 'pages/404' page will not permit the use of getInitialProps or getServerSideProps, however, these methods are not already implemented in my code

Error TS2346: The parameters provided do not match the signature for the d3Service/d3-ng2-service TypeScript function

Developing and employing Services in Angular 2

Implementing Styled API in TypeScript with props: A Comprehensive Guide

Is there a way to unselect a button in Angular?

Implementing Authorization keys in Angular's Swagger UI using code

Transferring the web application context to an Angular2 service

The parameter of type '{ userInfo: string | null; }' cannot be assigned to type 'never' in this argument

Utilize Jasmine to spy on an inner function and return a mock value from the last function call

Is there a method in AngularJS to compel TypeScript to generate functions instead of variables with IIFE during the compilation process with gulp-uglify?

Encountering an issue with Angular 5.2 application build on VSTS build server: Running into "CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory" error