SecureStorage not installed, but it is in Ionic3 - ionic-framework

I am migrating Storage to SecureStorage. The normal storage worked fine, but I have problems with secure storage on all platforms.
I installed the plugin like here described. But if I run the app in the browser or on Android, I get following errors:
plugin_not_installed
(...)
ERROR Error: "Uncaught (in promise): TypeError: this.storage is undefined
[42]/DataProvider.prototype.getLoginData
I imported SecureStorage as Provider into app.module.ts.
app.component.ts looks like this:
constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, private dataProvider: DataProvider, private restProvider: RestProvider) {
this.initializeApp();
// ...
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.dataProvider.getLoginData().then((loginData) => {
console.log(loginData);
}, (error) => {
console.error(error);
});
}
And DataProvider looks like this:
import {Injectable} from '#angular/core';
import {SecureStorage, SecureStorageObject} from '#ionic-native/secure-storage';
/**
* #see https://ionicframework.com/docs/native/secure-storage/
* #see https://github.com/Crypho/cordova-plugin-secure-storage
*/
#Injectable()
export class DataProvider {
storage: SecureStorageObject;
constructor(private secureStorage: SecureStorage) {
this.secureStorage.create('com.mydomain.myapp').then((storage: SecureStorageObject) => {
DevProvider.logDebugMsg('secureStorage created');
this.storage = storage;
}, (error) => {
console.error('creating secureStorage failed: ', error); // output is: plugin_not_installed
});
}
getLoginData() {
return this.storage.get('loginData');
}
}
What's wrong here?
Thanks.

Related

How to fix 'ionic framework code push plugin'?

Uncaught (in promise): TypeError: Object(...) is not a function
TypeError: Object(...) is not a function
at CodePush.sync (vendor.js:84065)
at MyApp.webpackJsonp.406.MyApp.checkCodePush
I get the above error in my code. My code is as follows.
import { CodePush, InstallMode, SyncStatus } from '#ionic-native/code-push/ngx';
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private codePush: CodePush) {
platform.ready().then(() => {
statusBar.styleDefault();
splashScreen.hide();
platform.ready().then(() => {
statusBar.styleDefault();
splashScreen.hide();
this.codePush.sync();
});
});

Data from get to Global Variable

first of all iwant to apologize for my poor englis, im trying to resolve this by my own for few days and i couldn't, i really need to solve this for a school project.
I have a variable named "myAccountData", im trying to put GET HTTP request result on it but its not working here's my code:
Page.ts:
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { NativeStorage } from '#ionic-native/native-storage';
import { EditaccountPage } from '../editaccount/editaccount';
import { AuthServiceProvider } from '../../providers/auth-service/auth-service';
import { Observable } from 'rxjs/Observable';
/**
* Generated class for the MyaccountPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
#IonicPage()
#Component({
selector: 'page-myaccount',
templateUrl: 'myaccount.html',
})
export class MyaccountPage {
public myAccountData;
constructor(public navCtrl: NavController, public navParams: NavParams, private nativeStorage: NativeStorage, public authServiceProvider: AuthServiceProvider) {
}
setmyAccountData(data){
this.myAccountData=this.authServiceProvider.getData("userbyid/40").subscribe( myData => {
this.myAccountData=myData;
});
}
gotoEdit(){
this.navCtrl.push(EditaccountPage);
}
}
authServiceProvider.ts:
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import 'rxjs/add/operator/toPromise';
import { Observable } from 'rxjs/Observable';
let apiUrl = "http://192.168.1.2/api/v1/"
/*
Generated class for the AuthServiceProvider provider.
See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
*/
#Injectable()
export class AuthServiceProvider {
constructor(public http: HttpClient) {
console.log('Hello AuthServiceProvider Provider');
}
public async postData(credentials, type): Promise<any> {
await this.http.post(apiUrl + type, JSON.stringify(credentials)).toPromise();
}
public getData(type): Observable<any> {
return this.http.get(apiUrl + type);
}
}
When i run "http://192.168.1.2/api/v1/userbyid/40" on postman this is what i get: {"id":"40","firstname":"Kebbab","lastname":"Walid","email":"walid#kebbab.fr","username":"walid","password":"a665a45920422f9d417e4867efdc4fb8a04a1f3fff1fa07e998e86f7f7a27ae3","sexe":"","birth":"2018-04-11","telephone":"0","type":"ouvrier","emailverified":"0"}
But on page.html if i use {{myAccountData.firstname}} it doesnt show anything
Error Log:
ERROR Error: Uncaught (in promise): TypeError: _co.myAccountData is undefined
View_MyaccountPage_0/<#ng:///AppModule/MyaccountPage.ngfactory.js:128:13
updateRenderer#http://localhost:8100/build/vendor.js:14342:20
checkAndUpdateView#http://localhost:8100/build/vendor.js:13866:5
callViewAction#http://localhost:8100/build/vendor.js:14211:21
execComponentViewsAction#http://localhost:8100/build/vendor.js:14143:13
checkAndUpdateView#http://localhost:8100/build/vendor.js:13867:5
ViewRef_.prototype.detectChanges#http://localhost:8100/build/vendor.js:11653:9
NavControllerBase.prototype._viewAttachToDOM#http://localhost:8100/build/vendor.js:51117:9
Tab.prototype._viewAttachToDOM#http://localhost:8100/build/vendor.js:77128:9
NavControllerBase.prototype._transition#http://localhost:8100/build/vendor.js:51197:13
NavControllerBase.prototype._nextTrns/<#http://localhost:8100/build/vendor.js:50918:40
F</l</t.prototype.invoke#http://localhost:8100/build/polyfills.js:3:14974
onInvoke#http://localhost:8100/build/vendor.js:4982:24
F</l</t.prototype.invoke#http://localhost:8100/build/polyfills.js:3:14901
F</c</r.prototype.run#http://localhost:8100/build/polyfills.js:3:10124
f/<#http://localhost:8100/build/polyfills.js:3:20240
F</l</t.prototype.invokeTask#http://localhost:8100/build/polyfills.js:3:15649
onInvokeTask#http://localhost:8100/build/vendor.js:4973:24
F</l</t.prototype.invokeTask#http://localhost:8100/build/polyfills.js:3:15562
F</c</r.prototype.runTask#http://localhost:8100/build/polyfills.js:3:10815
o#http://localhost:8100/build/polyfills.js:3:7887
F</h</e.invokeTask#http://localhost:8100/build/polyfills.js:3:16823
p#http://localhost:8100/build/polyfills.js:2:27646
v#http://localhost:8100/build/polyfills.js:2:27893
Stack trace:
c#http://localhost:8100/build/polyfills.js:3:19752
c#http://localhost:8100/build/polyfills.js:3:19461
f/<#http://localhost:8100/build/polyfills.js:3:20233
F</l</t.prototype.invokeTask#http://localhost:8100/build/polyfills.js:3:15649
onInvokeTask#http://localhost:8100/build/vendor.js:4973:24
F</l</t.prototype.invokeTask#http://localhost:8100/build/polyfills.js:3:15562
F</c</r.prototype.runTask#http://localhost:8100/build/polyfills.js:3:10815
o#http://localhost:8100/build/polyfills.js:3:7887
F</h</e.invokeTask#http://localhost:8100/build/polyfills.js:3:16823
p#http://localhost:8100/build/polyfills.js:2:27646
v#http://localhost:8100/build/polyfills.js:2:27893
core.js:1350
In my page.html i usef { { myAccountData?.firstname } } instead of { { myAccountData.firstname } } and it worked

Ionic 3 lazy loading : view displayed before enf of global configuration loading

I'm trying to implement lazy loading in my Ionic 3 application. In my app, I have a configuration provider which get / set configuration from local storage.
This is the code of the provider :
import { Injectable } from '#angular/core';
import { Storage } from '#ionic/storage';
import 'rxjs/add/operator/map';
#Injectable()
export class ConfigProvider {
public name: string = null;
constructor(private storage: Storage) {}
initialize() {
return new Promise((resolve, reject) => {
Promise.all([
this.storage.get('name').then(value => this.name = value),
]).then(value => {
resolve();
});
});
}
setName(name: string): void
{
this.name = name;
this.storage.set('name', this.name);
}
}
I call the initialize method in the constructor of the MyApp Component :
constructor(
public platform: Platform,
public menu: MenuController,
public statusBar: StatusBar,
public splashScreen: SplashScreen,
private modalCtrl: ModalController,
private configProvider: configProvider
) {
configProvider.initialize().then(() => {
this.initializeApp();
});
}
But, if I call my Page Component directly from the url, the name property of my provider is null...
#IonicPage({
name: ‘test’,
segment: ’test’
})
#Component({
selector: 'page-test’,
templateUrl: 'test'
})
export class TestPage {
constructor(
private configProvider: configProvider) {
}
ngAfterViewInit() {
// this.configProvider.name is null !!!!
}
Could someone tell me why ?
Thnax for your help :)

Encountered undefined provider error while attempting to execute file-transfer in Ionic

I am trying to execute file transfer from a Flask server to an Ionic3 application. Basically, what I want to do is send a .vcf file from the server to the application to them be read and displayed in the application. The application does not need to store the file in any form of persistent memory.
When I try to do this, I get a ton of error. The one I am encountering right now is:
Encountered undefined provider! Usually this means you have circular dependencies (might be caused by using 'barrel' index.ts files.
I tried making a whole separate provider file for file-transfer but that just gave me other errors. Currently, my .ts file that is throwing the error is as follows:
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Transfer, TransferObject } from '#ionic-native/file-transfer';
import { File } from '#ionic-native/file';
#IonicPage()
#Component({
selector: 'page-quiz',
templateUrl: 'quiz.html',
providers: [Transfer, TransferObject, File]
})
export class QuizPage {
storageDirectory: string = '';
constructor(public navCtrl: NavController, public navParams: NavParams,
private transfer: FileTransfer, private file: File) {
this.vCardDownload("b734cdc8-8ec1-4fde-b918-b6062b5099df");
}
ionViewDidLoad() {
console.log('ionViewDidLoad QuizPage');
}
vCardDownload(uuid) {
const fileTransfer: TransferObject = this.transfer.create();
const vCardLocation = 'http://xxxxxxx.xxx.edu:5000/get_question_vCard?uuid=' + uuid;
fileTransfer.download(vCardLocation, this.file.applicationDirectory + uuid).then((entry) => {
console.log("file was downloaded", entry.toURL());
alertSuccess.present();
}, (error) => {
console.log("ERROR file was not downloaded");
});
}
}
Where am I going wrong here and how can I achieve file transfer? I think I am on the right track to getting it working -- I am pretty new to typescript and mobile development so I apologize in advance for any mistakes. Essentially I want to "capture the file within the application."
It turns out I had two errors. First, my import statements were wrong. Second, I didn't add certain imports to the providers listing in my app.module.ts file.
Here are my providers in app.module.ts:
import { File } from '#ionic-native/file';
import { FileTransfer } from '#ionic-native/file-transfer';
... declarations, imports, etc. ...
providers: [
StatusBar,
SplashScreen,
File,
FileTransfer,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
Here is the sample code I used to download the .vcf file.
import { FileTransfer, FileTransferObject } from '#ionic-native/file-transfer';
import { File } from '#ionic-native/file';
...
constructor(public navCtrl: NavController, public navParams: NavParams,
private transfer: FileTransfer, private file: File) {
this.vCardDownload("XXXXXX-XXXXX-XXXX-XXXX");
}
...
vCardDownload(uuid) {
console.log("Trying to download vCard!");
const fileTransfer: FileTransferObject = this.transfer.create();
const vCardLocation = 'http://XXXXXX.XXX.edu:5000/get_question_vCard?uuid=' + uuid;
fileTransfer.download(vCardLocation, this.file.dataDirectory + 'file.vcf').then((entry) => {
console.log('download complete: ' + entry.toURL());
}, (error) => {
console.error(error);
});
}
Note that so far this only works for me on a mobile device.

Splash screen make http request and pass the response to another page

What I am trying to do is when the splash screen is loading, a http request is made to the server to pull some information and pass the response to another page.
Below is the code I am working with.
import { Component } from '#angular/core';
import { Platform, LoadingController } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { CacheService } from "ionic-cache/ionic-cache";
import { Apis } from './apis';
import { StayPage} from '../pages/stay/stay';
#Component({
templateUrl: 'app.html',
providers: [Apis]
})
export class MyApp {
rootPage = StayPage;
constructor(platform: Platform, cache: CacheService, public loadingCtrl: LoadingController, public Apis: Apis ) {
cache.setDefaultTTL(60 * 60);
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.Apis.types().subscribe( response => {
response.results;
StatusBar.styleDefault();
Splashscreen.hide();
}, err => {
this.Apis.error( err );
});
});
}
}
When I run the above code, the splash screen is stuck on loading and doesn't move to another page.
You need to make HTTP request in constructor or ngOnInit of StayPage.
export class StayPage implements OnInit {
...
constructor(public navCtrl: NavController,
public navParams: NavParams
public http: Http) { }
ngOnInit(){
this.http.get(apiUrl)
.subscribe(
responseSuccess => ...
responseError => ...
}
}
}