Ionic 3.3.0 app start working before initialization finished

This is solvable. You can set anonymous to null and thus distinguish between “false” and “not set”.

The only reliable way to do this in a web app is to wait on a future (Promise or Observable). Instead of having anonymous be a naked boolean, you could make it a Promise<boolean>, and say:

this.user.anonymous.then((anon) => {
  if (!anon) {
    headers.append('Authorization', this.oauth2.token);
  }
});

You need to stop thinking imperatively like this. You are not in control of execution flow, and the sooner you make yourself at peace with this, the happier you will be. Web apps are reactive, so you need to think in terms of “when A happens, I want to do B”, instead of “how do I make A happen before B”.

I finally got this problem fixed.

the solution is simple and straight:
“this.platform.ready()…” locating at the beginning of constructor of “app.component.ts” is the starting point of overall system execution.

so if I do not give opportunity of switching task upon entering the following “then” clause; I can guarantee that all settings be executed in that single “then” clause.

the compromise on execution efficiency is affordable, since this code is executed only once during system startup…

below are the code snippets, excerpted for clearance

app.component.ts constructor:

constructor(...) {
    
    this.platform.ready()
      .then(() => this.getKeys())
      .then(() => this.doSettings())
      // Check if the user has already seen the tutorial
      .then(() => this.setRoot());
  }
 private async getKeys(){
    this.keys = await this.storage.keys();
  }
 private doSettings(){
    this.setLocale();
    this.setId();
    this.setAccessToken();
    this.setAnonymous();
    this.setCurrentPAge();
    // decide which menu items should be hidden by login status
    this.enableMenu(this.user._anonymous === false);
    this.listenToLoginEvents();
    this.splash.hide();
    this.statusb.styleDefault();
  }
private async setLocale(){
    let locale: string;
    if(this.hasKey(Cons.locale)){
      locale = await this.storage.get(Cons.locale);
    }else{
      let v: Object = await this.glb.getPreferredLanguage();
      locale = v['value'];
      await this.storage.set(Cons.locale, locale);
    }
    this.user._locale = locale;
  }

  private async setId(){
    let id;
    if(this.hasKey(Cons.deviceId)){
      id = await this.storage.get(Cons.deviceId);
    }else{
      id = this.device.uuid;
      if(Util.isNull(id)){
         id = Util.uuidv4();
      }
      await this.storage.set(Cons.deviceId, id); 
    }
    this.user.id = id;
  }
   ...

Quite neat code, congrats @Jingzhou :slight_smile:

On a side note, I guess it was also possible to use a boolean for true / false / undefined test check. As a boolean value has the smallest payload.