Using Storage/SQLStorage in a provider

Ionic Framework ionic-v3
1

My app relies on making calls to an OAuth2 server, so I have an @Injectable client that imports Http. Seems to work just fine and I’m able to make my authentication calls, but now I’m trying to add Storage (to save the oauth token data). I’m getting “No Provider for Storage!”.

I found an article ( http://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html ) that seems maybe relevant, but I can’t seem to get things working… I feel like I’m just overlooking some mundane detail. Here’s a bit of what I think is relevant code

wac.ts (api client)

import {Injectable} from 'angular2/core';
import {Http, Headers, RequestOptions} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import {Storage, SqlStorage} from 'ionic-framework/ionic';

@Injectable()
export class WAC {
    http: Http;
    storage: Storage;
    
    constructor(http:Http, storage:Storage) {
        this.http = http;
        this.storage = new Storage(SqlStorage);
    }
}

Thanks!

2

I think you might want to try adding Storage to the providers stanza of the @App decoration on your app class.

1 Like
3

Progress, maybe, I think! Now I get the following:

Cannot resolve all parameters for ‘Storage’(?, ?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that ‘Storage’ is decorated with Injectable.

I’ll keep poking around. Thanks for the super quick response, sorry I wasn’t as quick to reply… baby woke up :frowning:

4

Arg. Sill struggling with this… wanted to provide more of my code in case anyone else would be kind enough to point out my misstep(s).

app.ts

import {App, IonicApp, Platform, Storage, SqlStorage} from 'ionic-framework/ionic';
import {WAC} from './providers/wac.ts';
import {LoginPage} from './pages/login/login';
import {HomeTabsPage} from './pages/hometabs/hometabs';

@App({
    providers: [WAC,Storage],
    template: '<ion-nav id="root-nav" [root]="rootPage"></ion-nav>',
    config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class WODTogetherApp {
    rootPage: any = LoginPage;
    storage: Storage;
    app: IonicApp;

    constructor(platform: Platform, app:IonicApp) {
        platform.ready().then(() => {
            this.app = app;

            this.storage = new Storage(SqlStorage);

            // @todo ngAfterViewInit() {} ?
            // see http://ionicframework.com/docs/v2/components/#navigating_from_root
            // see https://github.com/driftyco/ionic/issues/5543
            let nav = this.app.getComponent('root-nav');
            this.storage.get('oauth').then((oauth) => {
                if (oauth) {
                    nav.setRoot(HomeTabsPage);
                }
            });
        });
    }
}

wac.ts (API Client)

import {Injectable} from 'angular2/core';
import {Http, Headers, RequestOptions} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import {Storage, SqlStorage} from 'ionic-framework/ionic';

@Injectable()
export class WAC {
    http: Http;
    storage: Storage;
    
    constructor(http:Http, storage:Storage) {
        this.http = http;
        this.storage = new Storage(SqlStorage);
    }
    
    getToken() {
        console.log("GET TOKEN");
        return this.storage.get('oauth').then((oauth) => {
            console.log("WTF");
            console.log(JSON.parse(oauth));
        });
    }
    
}

wods.ts – Page trying to use WAC (API Client)

import {Page, NavController, NavParams} from 'ionic-framework/ionic';
import {WAC} from '../../providers/wac.ts';

@Page({
    templateUrl: 'build/pages/wods/wods.html',
})
export class WODsPage {
    nav: NavController;
    WAC: WAC;
    
    constructor(nav: NavController, WAC:WAC) {
        this.nav = nav;
        this.WAC = WAC;
        
        this.WAC.getToken();
    }
}

Thanks in advance!!

5

There’s no need to inject Storage, you should be able to just do this:

import {Injectable} from 'angular2/core';
import {Http, Headers, RequestOptions} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import {Storage, SqlStorage} from 'ionic-framework/ionic';

@Injectable()
export class WAC {
    http: Http;
    
    constructor(http:Http) {
        this.http = http;
        this.storage = new Storage(SqlStorage, {name:'dbname'});
    }
}
1 Like
6

Thanks for the reply Josh, I’ve relied heavily on your blog while stumbling my way through learning multiple of these things at the same time.

I tried your suggestion here but unfortunately I continue to get the error: Cannot resolve all parameters for ‘Storage’(?, ?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that ‘Storage’ is decorated with Injectable. :frowning:

7

Nevermind, I think I got it! After your suggestion Josh, I then just had to remove “Storage” from the providers array in the @App which I added in my experimenting trying to figure this out… thank you sir.