javascript - Angular provideAppInitializer is initialized after ngOnInit - Stack Overflow

admin管理员组

文章数量:1391975

I have in my ApplicationConfig provider

provideAppInitializer(() => {
  inject(AppConfigService)
})

In component MainPageComponent I have ngOnInit(), which geting data from backend every refresh.

 ngOnInit() {
this.loginService.getHi().subscribe({
  next: result => {
    this.text = result;
    void this._router.navigate(['mainPage'])
  },
  error: err => {
    void this._router.navigate(['login'])
    console.log("Login failed", err);
  },
  complete: () => {
    console.log('Login process completed ' + localStorage.getItem("token"));
  }
})

problem is Global app initialization is after ngOnInit() is called, how to avoid it?

AppConfigService

export class AppConfigService {
  private appConfig!: AppConfig;

  constructor(private readonly http: HttpClient) {
    void this.loadAppConfig();
  }

   loadAppConfig(): Promise<any> {
    return firstValueFrom(this.http.get<AppConfig>('/config/config.json').pipe(tap(data => {
      console.log('my data ' + JSON.stringify(data));
      this.appConfig = data;
    })));
  }

  getBackendBaseUrl(): string {
    return this.appConfig.environment.backendURL;
  }

I have in my ApplicationConfig provider

provideAppInitializer(() => {
  inject(AppConfigService)
})

In component MainPageComponent I have ngOnInit(), which geting data from backend every refresh.

 ngOnInit() {
this.loginService.getHi().subscribe({
  next: result => {
    this.text = result;
    void this._router.navigate(['mainPage'])
  },
  error: err => {
    void this._router.navigate(['login'])
    console.log("Login failed", err);
  },
  complete: () => {
    console.log('Login process completed ' + localStorage.getItem("token"));
  }
})

problem is Global app initialization is after ngOnInit() is called, how to avoid it?

AppConfigService

export class AppConfigService {
  private appConfig!: AppConfig;

  constructor(private readonly http: HttpClient) {
    void this.loadAppConfig();
  }

   loadAppConfig(): Promise<any> {
    return firstValueFrom(this.http.get<AppConfig>('/config/config.json').pipe(tap(data => {
      console.log('my data ' + JSON.stringify(data));
      this.appConfig = data;
    })));
  }

  getBackendBaseUrl(): string {
    return this.appConfig.environment.backendURL;
  }

• javascript
• angular
• typescript
• promise
• app-initializer

Share Improve this question Follow edited Mar 13 at 17:29 Naren Murali 60.4k55 gold badges4444 silver badges7878 bronze badges asked Mar 13 at 17:23 WynnyWynny 5155 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

Since we are triggering the API on the constructor of the service. The app initializer will not wait for the API to complete, you must return the promise, so that once it is resolved the application loads.

---

So we execute and return the method inside the provideAppInitializer, so that once the promise load is completed the application will load.

First we remove the call from the constructor.

export class AppConfigService {
  private appConfig!: AppConfig;

   loadAppConfig(): Promise<any> {
    return firstValueFrom(this.http.get<AppConfig>('/config/config.json').pipe(tap(data => {
      console.log('my data ' + JSON.stringify(data));
      this.appConfig = data;
    })));
  }

  getBackendBaseUrl(): string {
    return this.appConfig.environment.backendURL;
  }

Then we return the promise from execution of loadAppConfig.

provideAppInitializer(() => {
  const appConfigService = inject(AppConfigService);
  return appConfigService.loadAppConfig();
})

本文标签： javascriptAngular provideAppInitializer is initialized after ngOnInitStack Overflow