service from documentation creates async bug at startup

[rtpHarry]

From my testing of the example service in the documentation, it seems that it contains a bug.

The constructor calls init() without async (because it's not supported in a constructor):

  constructor(private storage: Storage) {
    this.init();
  }

However, that means that if your app is relying on the storage very early on, you are going to get back undefined from a get.

For me, I have a tutorial guard set up which checks if the tutorial has been completed to decide if it should show the homepage or redirect to the tutorial slider page. It was always showing the tutorial because the result was undefined.

I've improved the service so that it takes a similar approach to the way that Ionic Storage is actually written; which is checking if the storage is initialised before trying to operate on it.

That way it can await the proper completion of the storage:

import { Injectable } from '@angular/core';

import * as CordovaSQLiteDriver from 'localforage-cordovasqlitedriver';

import { Storage } from '@ionic/storage-angular';

@Injectable({
  providedIn: 'root'
})
export class StorageService {
  private _storage: Storage | null = null;

  constructor(private storage: Storage) {
  }

  async init() {
    if(this._storage != null) {
      return;
    }
    await this.storage.defineDriver(CordovaSQLiteDriver);
    const storage = await this.storage.create();
    this._storage = storage;
  }

  public async set(key: string, value: any): Promise<any> {
    await this.init();
    return await this._storage?.set(key, value);
  }

  public async get(key: string): Promise<any> {
    await this.init();
    return await this._storage?.get(key);
  }
}

[vishnutdeepak]

Thank you so much. This was driving me crazy. Please, someone update this in the documentation!

[brianstanley]

Cool!!

[806software]

Thanks for pointing this out, as it was driving me nuts too with services relying on storage and it just wasn't working out. I thought I was missing something fundamental. It looks familiar, as basically just you have to create your own ready method ...

public async set(key: string, value: any): Promise<any> {
    await this.init();
    return await this._storage?.set(key, value);
 }

is just the same as:

public set(key: string, value: any): Promise<any> {
    this.init().then(() => {
        return this._storage?.set(key, value);
    }
}

For init read ready.

[dcxn]

We had the same issue, thank you @rtpHarry. Hopefully the improvement to the docs can be merged soon.

[aristotekean]

This solution works for me

From my testing of the example service in the documentation, it seems that it contains a bug.

The constructor calls init() without async (because it's not supported in a constructor):

  constructor(private storage: Storage) {
    this.init();
  }

However, that means that if your app is relying on the storage very early on, you are going to get back undefined from a get.

For me, I have a tutorial guard set up which checks if the tutorial has been completed to decide if it should show the homepage or redirect to the tutorial slider page. It was always showing the tutorial because the result was undefined.

I've improved the service so that it takes a similar approach to the way that Ionic Storage is actually written; which is checking if the storage is initialised before trying to operate on it.

That way it can await the proper completion of the storage:

import { Injectable } from '@angular/core';

import * as CordovaSQLiteDriver from 'localforage-cordovasqlitedriver';

import { Storage } from '@ionic/storage-angular';

@Injectable({
  providedIn: 'root'
})
export class StorageService {
  private _storage: Storage | null = null;

  constructor(private storage: Storage) {
  }

  async init() {
    if(this._storage != null) {
      return;
    }
    await this.storage.defineDriver(CordovaSQLiteDriver);
    const storage = await this.storage.create();
    this._storage = storage;
  }

  public async set(key: string, value: any): Promise<any> {
    await this.init();
    return await this._storage?.set(key, value);
  }

  public async get(key: string): Promise<any> {
    await this.init();
    return await this._storage?.get(key);
  }
}

[kararkraj]

@rtpHarry

Your solution is working fine for now.
However, storage.create() might get called multiple times depending on the application.

In my case, I have storage.get() in app.component.ts and auth.guard.ts and both are called on application startup.
Hence, storage.create() is called and executed twice.

For now, I do not see any consequence of this.
But I have a feeling that this is not right.