1

I am getting the json from a REST API, and want to store it for other page to use, but when I build it , it have a error below:

Runtime Error Can't resolve all parameters for LoginPage: ([object Object], [object Object], [object Object], [object Object], [object Object], [object Object], ?).

And below is my code of login.ts:

import { Component } from '@angular/core';
import { NavController, LoadingController, ToastController } from 'ionic-angular';
import { FormBuilder, Validators } from "@angular/forms";
import { AuthService } from '../../providers/auth-service/auth-service';
import { NavParams } from 'ionic-angular';
import { MePage } from '../me/me';
import { IonicStorageModule } from '@ionic/storage';

@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class LoginPage {
  loginData = { email:'', password:'', deviceToken:'testingDT', os:'ios', appVersion:'3.0.0' };
  authorize: string;

  constructor(public navCtrl: NavController, private navParams: NavParams, public authService: AuthService, public loadingCtrl: LoadingController, private toastCtrl: ToastController, public _form:FormBuilder, public storage: Storage) {}

 doLogin() {
    this.authService.login(this.loginData).then(data => {
      console.log("CHECKING: ",data.name);
      this.storage.set('user', JSON.stringify(data));
    }, (err) => {
    });
 }
}

Does anyone known what the problem is? Thanks a lot.

auth-service.ts:

import { Injectable } from '@angular/core';
import { Http, RequestOptions, Headers } from '@angular/http';
import 'rxjs/add/operator/map';

let apiUrl = localStorage.getItem('domain');

@Injectable()
export class AuthService {

  data:any;

  constructor(public http: Http) {}

  login(credentials) {

  if(this.data){
    return Promise.resolve(this.data);
  }

  let opt: RequestOptions;
  let myHeaders: Headers = new Headers;

  myHeaders.set('Accept', 'application/json; charset=utf-8');
  myHeaders.append('Content-type', 'application/json; charset=utf-8');
  opt = new RequestOptions({
    headers: myHeaders
  })

  return new Promise(resolve => {
  this.http.get(apiUrl+'login?email='+credentials.email+'&password='+credentials.password+'&deviceToken='+credentials.deviceToken+'&os='+credentials.os+'&appVersion='+credentials.appVersion, opt)
    .map(res => res.json())
    .subscribe(data => {
      this.data = data;
      resolve(this.data);
    });
   });
}

app.module.ts:

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler, Platform } from 'ionic-angular';
import { FetchApp } from './app.component';
import { LoginPage } from '../pages/login/login';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { TranslateModule } from 'ng2-translate/ng2-translate';
import { TranslateLoader, TranslateStaticLoader } from 'ng2-translate/src/translate.service';
import { Http } from '@angular/http';
import { TranslateService } from 'ng2-translate';
import { Globalization } from 'ionic-native';
import { Storage } from '@ionic/storage';
import { defaultLanguage, availableLanguages, sysOptions } from '../pages/lang/lang.constants';
import { AuthService } from '../providers/auth-service/auth-service';

export function createTranslateLoader(http: Http) {
  return new TranslateStaticLoader(http, './assets/i18n/', '.json');
}

export function provideStorage() {
  return new Storage();
}

@NgModule({
  declarations: [
    FetchApp,
    LoginPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(FetchApp, {
      backButtonText: ''
    }),
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: (createTranslateLoader),
      deps: [Http]
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    FetchApp,
    LoginPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    { provide: Storage, useFactory: provideStorage },
    AuthService,
    Storage
  ]
})
export class AppModule {}
}
5
  • please add your auth-service Commented Jul 20, 2017 at 7:11
  • Hi, Sangram, auth-service.ts added, thanks~=) Commented Jul 20, 2017 at 7:16
  • try parsing data to Json as- let temp=JSON.parse(JSON.stringify(data)); this.storage.set('user', temp); Commented Jul 20, 2017 at 7:24
  • Sangram, now the error become:Uncaught (in promise): TypeError: Illegal constructor TypeError: Illegal constructor at AppModuleInjector.get Commented Jul 20, 2017 at 7:39
  • The storage api is just a wrapper for local storage. You can simply use localStorage to do this Commented Jul 20, 2017 at 22:39

1 Answer 1

2

Change

import { IonicStorageModule } from '@ionic/storage';

to

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

And change app.module.ts to

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler, Platform } from 'ionic-angular';
import { FetchApp } from './app.component';
import { LoginPage } from '../pages/login/login';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { TranslateModule } from 'ng2-translate/ng2-translate';
import { TranslateLoader, TranslateStaticLoader } from 'ng2-translate/src/translate.service';
import { Http } from '@angular/http';
import { TranslateService } from 'ng2-translate';
import { Globalization } from 'ionic-native';

import { IonicStorageModule } from '@ionic/storage';

import { defaultLanguage, availableLanguages, sysOptions } from '../pages/lang/lang.constants';
import { AuthService } from '../providers/auth-service/auth-service';

export function createTranslateLoader(http: Http) {
  return new TranslateStaticLoader(http, './assets/i18n/', '.json');
}


@NgModule({
  declarations: [
    FetchApp,
    LoginPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(FetchApp, {
      backButtonText: ''
    }),
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: (createTranslateLoader),
      deps: [Http]
    }),
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    FetchApp,
    LoginPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    AuthService 
  ]
})
export class AppModule {}
}

Make it "@ionic/storage": "2.0.1" in package.json and do npm install.

Sign up to request clarification or add additional context in comments.

8 Comments

hi Swapnil, still have error:Uncaught (in promise): TypeError: Illegal constructor TypeError: Illegal constructor at AppModuleInjector.get
add app.module.ts.
Swapnil, i have added app.module.ts, thanks, i stucked on this issue for three days, don't know how to storage, thanks again.
try replacing your app.module.ts with this one.
Hi, Swapnil, sorry for late reply, now it said no provider for Storage. Here is the Error: Uncaught (in promise): Error: No provider for Storage! Error: No provider for Storage! at injectionError
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.