How to import localforage with ionic2/angular2

Ionic Framework ionic-v3
1

Hey, how can i import and use localforage with ionic 2?

import {Injectable} from "angular2/core";
const localForage:LocalForage = require("localforage");

@Injectable()
export class DbService {

  constructor() {
    this.run();
  }

  run(){
    console.log("db service run");
    localForage.setItem('key', 'value').then(function () {
      return localforage.getItem('key');
    }).then(function (value) {
      // we got our value
      console.log("setItem then");
    }).catch(function (err) {
      // we got an error
      console.log("setItem catch");
    });
  }
}

gives an ReferenceError.

2

You have some inconsistent capitalization between ā€œlocalForageā€ and ā€œlocalforageā€. Might that be the problem?

3

i solved it that way:

import * as localforage from "localforage";
4

Can you show exactly how?
Only using the import? Or the constant/require too?

Thanks.

5

Most recently Iā€™ve been using this idiom:

export class Sink {
  private _lf:LocalForage;
  constructor() {
    this._lf = require<any>('localforage').default;
  }
}
6

Freak took me way too long to figure out how to import correctly LocalForage. For a long time, my code was compiling but I was facing ā€œundefined errorsā€ while running it.

So here my solution to import and use LocalForage in a Ionic2 project:

  1. Install localforage

    sudo npm install localforage --save

  2. Add typings support

    typings install dt~localforage --save --global

  3. And finally how to use it in an injectable provider/service.

Note localforage, at least in my case, could not be imported like I mostly do with ā€œimport * as localforage from ā€˜localforageā€™;ā€ because this will lead to the error ā€œundefinedā€ at runtime. To solve the problem it should be included thru require() defined first as Function.

import {Injectable} from '@angular/core';
 
declare var require:Function;

const localforage:LocalForage = require('localforage');

// My data model module containing my object class UserAccess
import {User} from  '../../model/user/user';

@Injectable()
export class UserAccessStorageService {

    constructor() {
        localforage.config({
            name: 'MyApp'
        });
    }

    saveUser(user_data:User.UserAccess):Promise<User.UserAccess> {
        return localforage.setItem('myapp_user', user_data);
    }    

    retrieveUser():Promise<User.UserAccess> {
        return localforage.getItem('myapp_user');
    }

    clear():Promise<void> {
        return localforage.clear();
    }
}

Hope this will help.

7

Hey,

I included localForage into an Ionic 2 project like this if anyone is still interested:

Hopefully it helps someone.

Best,