ionic3 streaming-media in android - ionic-framework

i have i problem i want to use plugin streaming-media in ionic3
when i build projet i tested apk have blank page
I followed all the steps inside website : https://ionicframework.com/docs/native/streaming-media/
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { StreamingMedia, StreamingAudioOptions } from '#ionic-native/streaming-media';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController ,private streamingMedia: StreamingMedia) {
}
startAudio() {
let options: StreamingAudioOptions = {
bgImage: 'https://cdn0.iconfinder.com/data/icons/large-glossy-icons/512/Sound.png',
successCallback: () => { console.log('Finished Audio') },
errorCallback: (e) => { console.log('Error: ', e) },
initFullscreen: false // iOS only!
};
this.streamingMedia.playAudio('http://10.10.10.10:8000/;', options);
}
}
<button (click)="startAudio()" ion-button color="secondary" icon-end>
Start Audio
<ion-icon name="musical-notes"></ion-icon>
</button>
please help me
thank you

Related

How to force to load a specific orientation in ionic 3?

I tried to set a orientation with ScreenOrientation, in ionViewDidLoad() in a device and the localhost but i can't force the change.
import { Component } from '#angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { ScreenOrientation } from '#ionic-native/screen-orientation';
#Component({
selector: 'page-Test',
templateUrl: 'Test.html'
})
export class TestPage {
constructor(public navCtrl: NavController,
public navParams: NavParams,
private screenOrientation: ScreenOrientation) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad TestPage');
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE_PRIMARY);
}
}
Try to:
ionViewDidLoad() {
console.log('ionViewDidLoad TestPage');
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);
}
OR
ionViewDidLoad() {
console.log('ionViewDidLoad TestPage');
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE_SECONDARY);
}
You have to add this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE_PRIMARY) line in app.components.ts files initializeApp() method before spash screen is hide.
Example :
app.components.ts
initializeApp() {
this.platform.ready().then(async () => {
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE_PRIMARY).then(async ()=>{
this.statusBar.styleDefault();
this.splashScreen.hide();
this.rootPage="HomePage";
// rest of your code goes here
});
});
}

Ionic 3 : pass provider's variables to ion-input

I have this simple provider:
import { Injectable } from "#angular/core";
#Injectable()
export class DevicesService {
public check_string : any;
constructor(){
this.check_string = "Provider enabled";
}
getStatusString() { return this.check_string; }
}
and I am trying to pass that check_string variable to a ion-input in my home.ts:
<strong><ion-input round id="stringstatus" type="text" [(ngModel)]="stringstatus"></ion-input></strong>
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { DevicesService } from '../../providers/devicefactory/devicefactory';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public stateString : string;
constructor(public navCtrl: NavController, private deviceProvider : DevicesService) {
this.stateString = this.deviceProvider.check_string;
//this.stateString = this.deviceProvider.getStatusString();
}
}
I tried both two ways, direct pass variable and getting return function but once I run app it shows blank page.. what I could have missed?
Thanks a lot to all
Cheers!
Try using deviceProvider.getStatusString(). Without using this in constructor;
constructor(public navCtrl: NavController, private deviceProvider : DevicesService) {
this.stateString = deviceProvider.getStatusString();
}
You can directly set it in your ngModel :
[(ngModel)]="deviceProvider.check_string"
or
[(ngModel)]="deviceProvider.getStatusString()"
Hello Rameez and saperlipopette,
I tried as both of you obtaining this:
devicefactory.ts
import { Injectable } from "#angular/core";
//import { BluetoothLE } from '#ionic-native/bluetooth-le';
#Injectable()
export class DevicesService {
public ble_status : boolean;
public check_string : any;
// public BLE : BluetoothLE
constructor(){
this.ble_status = false;
//this.BLE.initialize();
//this.BLE.isEnabled().then(result => { this.ble_status = result.isEnabled; });
this.check_string = "Provider enabled";
}
getStatus() { return this.ble_status; }
getStatusString() { return this.check_string; }
enableBLE() {
//if (this.ble_status) this.BLE.enable(); else this.BLE.disable();
if (this.ble_status) this.check_string = "Provider enabled"; else this.check_string = "Provider disabled";
}
}
app.module.ts
import { NgModule, ErrorHandler } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { HoergerateApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
import { SettingsPage } from '../pages/settings/settings';
import { DevicesService } from '../providers/devicefactory/devicefactory';
#NgModule({
declarations: [
HoergerateApp,
AboutPage,
SettingsPage,
ContactPage,
HomePage,
TabsPage
],
imports: [
BrowserModule,
IonicModule.forRoot(HoergerateApp)
],
bootstrap: [IonicApp],
entryComponents: [
HoergerateApp,
AboutPage,
SettingsPage,
ContactPage,
HomePage,
TabsPage
],
providers: [
StatusBar,
SplashScreen,
DevicesService,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {
}
home.html
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2>Welcome to Ionic!</h2>
<p>
This starter project comes with simple tabs-based layout for apps
that are going to primarily use a Tabbed UI.
</p>
<p>
Take a look at the <code>src/pages/</code> directory to add or change tabs,
update any existing page or create new pages.
</p>
<p>
Check bluetooth status:<br>
<strong><ion-input round id="ble_state" type="text" [(ngModel)]="ble_state"></ion-input></strong>
</p>
</ion-content>
home.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { DevicesService } from '../../providers/devicefactory/devicefactory';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public ble_state : string;
constructor(public navCtrl: NavController, public deviceProvider : DevicesService) {
//this.ble_state = ( this.deviceService.ble_status ? "Bluetooth is enabled" : "BLuetooth is disabled" );
//this.ble_state = deviceProvider.check_string;
this.ble_state = deviceProvider.getStatusString();
}
}
Before I put also directly in [(ngModel)] but it goes for blank page..... I think it's related something about passing variables maybe because if I comment that:
this.ble_state = deviceProvider.getStatusString();
the app appears working...
Maybe it's related about ionic and cordova installation platforms or dependencies even if it didn't reported any errors during compilation?
Thanks

Unexpected directive 'Slides' imported by the module 'AppModule'. Please add a #NgModule annotation

I'm trying to build a very simple app (ionic 3.19): using phone camera to take pictures clicking a button, saving them in an array and then displaying like a carousel through Slides component. But getting an error as the title. The code:
app.module.ts, where import Slide from ionic-angular
import { BrowserModule } from '#angular/platform-browser';
import { ErrorHandler, NgModule } from '#angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '#ionic-native/splash-screen';
import { StatusBar } from '#ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { Slides } from 'ionic-angular';
import { Camera } from '#ionic-native/camera';
#NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
Slides,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
Camera,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
home.ts, containing the function for taking the pictures
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { Camera, CameraOptions } from '#ionic-native/camera';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public image: string = null;
public base64Image: string[];
public extraOptions : {};
constructor(private camera: Camera) {
this.base64Image = new Array();
this.extraOptions = {
pager: true,
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 2000
}
}
takePicture() {
let options: CameraOptions = {
destinationType: this.camera.DestinationType.DATA_URL,
targetWidth: 1000,
targetHeight: 1000,
quality: 100
}
this.camera.getPicture( options )
.then(imageData => {
this.image = 'data:image/jpeg;base64,${imageData}';
this.base64Image.push(imageData);
let iData = this.base64Image.map(o => o).join(', ');
console.log("iData is " + iData);
})
.catch(error =>{
console.error( error );
});
}
}
home.html:
<ion-header>
<ion-navbar>
<ion-title>
Manage your photos!
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button block (click)="takePicture()">Photo</button>
<!--<img [src]="image" *ngIf="image" />-->
<div *ngIf="base64Image.length == 0"> <br/><br/> Click on the camera icon to take pictures!</div>
<ion-slides pager autoplay="true" pager="true" [options]="extraOptions" *ngIf="base64Image.length > 0">
<ion-slide *ngFor="let image of base64Image">
<img [src]="image" />
</ion-slide>
</ion-slides>
</ion-content>
Any ideas? Thank you very much!
No need to import Slides in app.module.ts, import them directly in the component:
import { Slides } from 'ionic-angular';
and dont't forget to add Slides as ViewChild in component:
#ViewChild(Slides) slides: Slide
Read more on official docs.

ionic3 - Can't resolve all parameters for UserDataProvider: ([object Object], [object Object], ?)

This is Ionic3 project and I was doing login page.
This page I want to show login button first in slide menu, after I login into apps, hidden login button and showing logout button. But when I was doing it this error coming out:
Can't resolve all parameters for UserDataProvider: ([object Object],
[object Object], ?).
This is my ionic info:
Ionic Framework: 3.6.0
Ionic Native: 2.4.1
Ionic App Scripts: 2.1.3
Angular Core: 4.0.0
Angular Compiler CLI: 4.0.0
Node: 6.11.3
OS Platform: macOS Sierra
Navigator Platform: MacIntel
User Agent: Mozilla/5.0 (Macintosh; Intel
app.component.ts
import { Component, ViewChild } from '#angular/core';
import { Events, MenuController, Nav, Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { QQSDK, QQShareOptions } from '#ionic-native/qqsdk';
import { Facebook, FacebookLoginResponse } from '#ionic-native/facebook';
import { TabsPage } from '../pages/tabs/tabs';
declare var Wechat:any;
export interface PageInterface {
title: string;
name: string;
component: any;
icon: string;
logsOut?: boolean;
index?: number;
tabName?: string;
tabComponent?: any;
}
#Component({
templateUrl: 'app.html'
})
export class MyApp {
#ViewChild(Nav) nav: Nav;
appPages: PageInterface[] = [
{ title: 'News', name: 'TabsPage', component: TabsPage, index: 0, icon: 'ios-globe-outline' }
];
loggedInPages: PageInterface[] = [
{ title: 'News', name: 'TabsPage', component: TabsPage, index: 0, icon: 'ios-globe-outline' },
{ title: 'Logout', name: 'TabsPage', component: TabsPage, icon: 'log-out', logsOut: true }
];
userData = null;
rootPage = TabsPage;
pages: Array<{title: string, component: any}>;
constructor(public platform: Platform, public events: Events, public menu: MenuController,
private qq: QQSDK,private fb: Facebook) {
this.initializeApp();
this.userData.hasLoggedIn().then((hasLoggedIn) => {
this.enableMenu(hasLoggedIn === true);
});
this.enableMenu(true);
this.listenToLoginEvents();
}
openPage(page: PageInterface) {
let params = {};
if (page.index) {
params = { tabIndex: page.index };
}
if (this.nav.getActiveChildNavs().length && page.index != undefined) {
this.nav.getActiveChildNavs()[0].select(page.index);
} else {
// Set the root of the nav with params if it's a tab index
this.nav.setRoot(page.name, params).catch((err: any) => {
console.log(`Didn't set nav root: ${err}`);
});
}
if (page.logsOut === true) {
// Give the menu time to close before changing to logged out
this.userData.logout();
}
}
listenToLoginEvents() {
this.events.subscribe('user:login', () => {
this.enableMenu(true);
});
this.events.subscribe('user:signup', () => {
this.enableMenu(true);
});
this.events.subscribe('user:logout', () => {
this.enableMenu(false);
});
}
enableMenu(loggedIn: boolean) {
this.menu.enable(loggedIn, 'loggedInMenu');
this.menu.enable(!loggedIn, 'loggedOutMenu');
}
isActive(page: PageInterface) {
let childNav = this.nav.getActiveChildNavs()[0];
// Tabs are a special case because they have their own navigation
if (childNav) {
if (childNav.getSelected() && childNav.getSelected().root === page.tabComponent) {
return 'primary';
}
return;
}
if (this.nav.getActive() && this.nav.getActive().name === page.name) {
return 'primary';
}
return;
}
initializeApp() {
this.platform.ready().then(() => {
StatusBar.styleDefault();
Splashscreen.hide();
});
}
QQLogin(){
const loginOptions: QQShareOptions = {
client: this.qq.ClientType.QQ,
};
this.qq.ssoLogin(loginOptions)
.then((result) => {
console.log('shareNews success');
alert('token is ' + result.access_token);
alert('userid is ' + result.userid);
})
.catch(error => {
console.log(error);
});
this.qq.logout().then(() => {
console.log('logout success');
}).catch(error => {
console.log(error);
});
}
wechatLogin(){
let scope = "snsapi_userinfo",
state = "_" + (+new Date());
Wechat.auth(scope, state, function (response) {
// you may use response.code to get the access token.
alert(JSON.stringify(response));
}, function (reason) {
alert("Failed: " + reason);
});
}
weiboLogin(){}
FBLogin(){
this.fb.login(['email', 'public_profile']).then((response: FacebookLoginResponse) => {
this.fb.api('me?fields=id,name,email,first_name,picture.width(360).height(360).as(picture_large)', []).then(profile => {
this.userData = {email: profile['email'], first_name: profile['first_name'], picture: profile['picture_large']['data']['url'], username: profile['name']}
});
});
}
}
EDIT:
app.html
<ion-menu id="loggedOutMenu" [content]="content">
<ion-header>
<ion-toolbar color="danger">
<ion-title>菜单</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-list-header>请登录</ion-list-header>
<button style="width:40%" ion-button round outline (click)= "QQLogin()">
<ion-icon name="minan-qq"></ion-icon>
</button>
<button color="wechat" style="width:40%" ion-button round outline (click)= "wechatLogin()">
<ion-icon name="minan-wechat"></ion-icon>
</button>
<button color="danger" style="width:40%" ion-button round outline (click)= "weiboLogin()">
<ion-icon name="minan-weibo"></ion-icon>
</button>
<button color="facebook" style="width:40%" ion-button round outline (click)= "FBLogin()">
<ion-icon name="minan-facebook"></ion-icon>
</button>
</ion-list>
<ion-list>
<ion-list-header>导航栏1</ion-list-header>
<button menuClose ion-item *ngFor="let p of appPages" (click)="openPage(p)">
<ion-icon item-start [name]="p.icon" [color]="isActive(p)"></ion-icon>
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-menu id="loggedInMenu" [content]="content">
<ion-header>
<ion-toolbar color="danger">
<ion-title>菜单</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card *ngIf="userData">
<ion-card-header>账号</ion-card-header>
<ion-thumbnail>
<img [src]="userData.picture" />
</ion-thumbnail>
<ion-card-title>{{ userData.username }}</ion-card-title>
<!-- <ion-card-content>
<p>Email: {{ userData.email }}</p>
<p>First Name: {{ userData.first_name }}</p>
</ion-card-content> -->
</ion-card>
<ion-list>
<ion-list-header>导航栏2</ion-list-header>
<button menuClose ion-item *ngFor="let p of loggedInPages" (click)="openPage(p)">
<ion-icon item-start [name]="p.icon" [color]="isActive(p)"></ion-icon>
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
UPDATE:
app.module.ts
import { NgModule, ErrorHandler } from '#angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { QQSDK } from '#ionic-native/qqsdk';
import { Facebook } from '#ionic-native/facebook';
import { SocialSharing } from '#ionic-native/social-sharing';
import { PhotoViewer } from '#ionic-native/photo-viewer';
import { BrowserModule } from '#angular/platform-browser';
import { HttpModule } from '#angular/http';
import { OneSignal } from '#ionic-native/onesignal';
import { IonicStorageModule } from '#ionic/storage';
import { MyApp } from './app.component';
import { SosPage } from '../pages/sos/sos';
import { ServicesPage } from '../pages/services/services';
import { NewsPage } from '../pages/news/news';
import { NewsDetailPage } from '../pages/news-detail/news-detail';
import { ServicesDetailPage } from '../pages/services-detail/services-detail';
import { TabsPage } from '../pages/tabs/tabs';
import { InsurencePage } from '../pages/insurence/insurence';
import { InsurenceDetailPage } from '../pages/insurence-detail/insurence-detail';
import { EducationPage } from '../pages/education/education';
import { EducationDetailPage } from '../pages/education-detail/education-detail';
import { TravelPage } from '../pages/travel/travel';
import { TravelDetailPage } from '../pages/travel-detail/travel-detail';
import { InvestmentPage } from '../pages/investment/investment';
import { InvestmentDetailPage } from '../pages/investment-detail/investment-detail';
import { LifePage } from '../pages/life/life';
import { LifeDetailPage } from '../pages/life-detail/life-detail';
import { NewsDataProvider } from '../providers/news-data/news-data';
import { ServicesDataProvider } from '../providers/services-data/services-data';
import { UserDataProvider } from '../providers/user-data/user-data';
#NgModule({
declarations: [
MyApp,
SosPage,
ServicesPage,
NewsPage,
TabsPage,
NewsPage,
NewsDetailPage,
ServicesDetailPage,
InsurencePage,EducationPage,TravelPage,InvestmentPage,LifePage,
InsurenceDetailPage,TravelDetailPage,InvestmentDetailPage,EducationDetailPage,LifeDetailPage
],
imports: [
BrowserModule,
HttpModule,
IonicStorageModule.forRoot(),
IonicModule.forRoot(MyApp,{
})
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
SosPage,
ServicesPage,
NewsPage,
TabsPage,
NewsPage,
NewsDetailPage,
ServicesDetailPage,
InsurencePage,EducationPage,TravelPage,InvestmentPage,LifePage,
InsurenceDetailPage,TravelDetailPage,InvestmentDetailPage,EducationDetailPage,LifeDetailPage
],
providers: [{provide: ErrorHandler, useClass: IonicErrorHandler},
NewsDataProvider,
ServicesDataProvider,
SocialSharing,
PhotoViewer,
QQSDK,Facebook,
OneSignal,
UserDataProvider]
})
export class AppModule {}
user-data.ts
import { Injectable } from '#angular/core';
import { Http } from '#angular/http';
import { Events } from 'ionic-angular';
import 'rxjs/add/operator/map';
#Injectable()
export class UserDataProvider {
HAS_LOGGED_IN = 'hasLoggedIn';
constructor(public http: Http, public events: Events, public storage: Storage) {
console.log('Hello UserDataProvider Provider');
}
login(username: string): void {
this.storage.set(this.HAS_LOGGED_IN, true);
this.setUsername(username);
this.events.publish('user:login');
};
signup(username: string): void {
this.storage.set(this.HAS_LOGGED_IN, true);
this.setUsername(username);
this.events.publish('user:signup');
};
logout(): void {
this.storage.remove(this.HAS_LOGGED_IN);
this.storage.remove('username');
this.events.publish('user:logout');
};
setUsername(username: string): void {
this.storage.set('username', username);
};
getUsername(): Promise<string> {
return this.storage.get('username').then((value) => {
return value;
});
};
hasLoggedIn(): Promise<boolean> {
return this.storage.get(this.HAS_LOGGED_IN).then((value) => {
return value === true;
});
};
}
please update your code file as below
user-data.ts
import { Injectable } from '#angular/core';
import { Http } from '#angular/http';
import { Events } from 'ionic-angular';
import { Storage } from '#ionic/storage';
import 'rxjs/add/operator/map';
#Injectable()
export class UserDataProvider {
HAS_LOGGED_IN = 'hasLoggedIn';
constructor(public http: Http, public events: Events, public storage: Storage) {
console.log('Hello UserDataProvider Provider');
}
login(user: any): void {
this.storage.set(this.HAS_LOGGED_IN, true);
this.setUser(user);
this.events.publish('user:login');
};
signup(user: any): void {
this.storage.set(this.HAS_LOGGED_IN, true);
this.setUser(user);
this.events.publish('user:signup');
};
logout(): void {
this.storage.remove(this.HAS_LOGGED_IN);
this.storage.remove('username');
this.events.publish('user:logout');
};
setUser(user: any): void {
this.storage.set('user', user);
};
getUser(): Promise<any> {
return this.storage.get('user').then((value) => {
return value;
});
};
hasLoggedIn(): Promise<boolean> {
return this.storage.get(this.HAS_LOGGED_IN).then((value) => {
return value === true;
});
};
}
app.component.ts
import { Component, ViewChild } from '#angular/core';
import { Events, MenuController, Nav, Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { QQSDK, QQShareOptions } from '#ionic-native/qqsdk';
import { Facebook, FacebookLoginResponse } from '#ionic-native/facebook';
import { UserDataProvider } from '../src/to/user-data'
import { TabsPage } from '../pages/tabs/tabs';
declare var Wechat:any;
export interface PageInterface {
title: string;
name: string;
component: any;
icon: string;
logsOut?: boolean;
index?: number;
tabName?: string;
tabComponent?: any;
}
#Component({
templateUrl: 'app.html'
})
export class MyApp {
#ViewChild(Nav) nav: Nav;
appPages: PageInterface[] = [
{ title: 'News', name: 'TabsPage', component: TabsPage, index: 0, icon: 'ios-globe-outline' }
];
loggedInPages: PageInterface[] = [
{ title: 'News', name: 'TabsPage', component: TabsPage, index: 0, icon: 'ios-globe-outline' },
{ title: 'Logout', name: 'TabsPage', component: TabsPage, icon: 'log-out', logsOut: true }
];
//userData = null;
rootPage = TabsPage;
pages: Array<{title: string, component: any}>;
constructor(public platform: Platform, public events: Events, public menu: MenuController,
private qq: QQSDK,private fb: Facebook, private userData: UserDataProvider) {
this.initializeApp();
this.userData.hasLoggedIn().then((hasLoggedIn) => {
this.enableMenu(hasLoggedIn === true);
});
this.enableMenu(true);
this.listenToLoginEvents();
}
openPage(page: PageInterface) {
let params = {};
if (page.index) {
params = { tabIndex: page.index };
}
if (this.nav.getActiveChildNavs().length && page.index != undefined) {
this.nav.getActiveChildNavs()[0].select(page.index);
} else {
// Set the root of the nav with params if it's a tab index
this.nav.setRoot(page.name, params).catch((err: any) => {
console.log(`Didn't set nav root: ${err}`);
});
}
if (page.logsOut === true) {
// Give the menu time to close before changing to logged out
this.userData.logout();
}
}
listenToLoginEvents() {
this.events.subscribe('user:login', () => {
this.enableMenu(true);
});
this.events.subscribe('user:signup', () => {
this.enableMenu(true);
});
this.events.subscribe('user:logout', () => {
this.enableMenu(false);
});
}
enableMenu(loggedIn: boolean) {
this.menu.enable(loggedIn, 'loggedInMenu');
this.menu.enable(!loggedIn, 'loggedOutMenu');
}
isActive(page: PageInterface) {
let childNav = this.nav.getActiveChildNavs()[0];
// Tabs are a special case because they have their own navigation
if (childNav) {
if (childNav.getSelected() && childNav.getSelected().root === page.tabComponent) {
return 'primary';
}
return;
}
if (this.nav.getActive() && this.nav.getActive().name === page.name) {
return 'primary';
}
return;
}
initializeApp() {
this.platform.ready().then(() => {
StatusBar.styleDefault();
Splashscreen.hide();
});
}
QQLogin(){
const loginOptions: QQShareOptions = {
client: this.qq.ClientType.QQ,
};
this.qq.ssoLogin(loginOptions)
.then((result) => {
console.log('shareNews success');
alert('token is ' + result.access_token);
alert('userid is ' + result.userid);
})
.catch(error => {
console.log(error);
});
this.qq.logout().then(() => {
console.log('logout success');
}).catch(error => {
console.log(error);
});
}
wechatLogin(){
let scope = "snsapi_userinfo",
state = "_" + (+new Date());
Wechat.auth(scope, state, function (response) {
// you may use response.code to get the access token.
alert(JSON.stringify(response));
}, function (reason) {
alert("Failed: " + reason);
});
}
weiboLogin(){}
FBLogin(){
this.fb.login(['email', 'public_profile']).then((response: FacebookLoginResponse) => {
this.fb.api('me?fields=id,name,email,first_name,picture.width(360).height(360).as(picture_large)', []).then(profile => {
this.userData.login({email: profile['email'], first_name: profile['first_name'], picture: profile['picture_large']['data']['url'], username: profile['name']});
});
});
}
}

ionic 2 facebook error logging

I'm integrating with facebook for application users to sign in with facebook.
I'm testing the documentation code for ionic 2 but it's not working right every time it drops the error condition. Is there anything else to be done?
import { Component } from '#angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { RecuperarSenhaPage } from '../recuperar-senha/recuperar-senha';
import { CadastroUsuarioPage } from '../cadastro-usuario/cadastro-usuario';
import { Facebook, FacebookLoginResponse } from '#ionic-native/facebook';
import { BrowserModule } from '#angular/platform-browser';
#Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
constructor(public navCtrl: NavController,
public navParams: NavParams,
private _fb: Facebook) {
}
loginFacebook() {
this._fb.login(['email'])
.then((res: FacebookLoginResponse) => console.log('Logged into Facebook!', res))
.catch(e => console.log('Error logging into Facebook', JSON.stringify(e)));
}
}