I have just upgraded from Ionic 2 beta to Ionic 2 rc3. I was using the following code, which doesn't seem to navigate to the new page (MyPage) in the rc3 version.
import { NavController } from 'ionic-angular';
constructor(public nav: NavController...
this.nav = nav;
...
this.nav.insert(0, MyPage);
Any ideas appreciated.
You don't need to do:
this.nav = nav;
It is injected in the constructor and is defined locally already.
Just setRoot()
this.nav.setRoot(MyPage)
You could also do setPages()
this.nav.setPages([MyPage])
https://ionicframework.com/docs/v2/api/navigation/NavController/
Related
I am getting this error
"__zone_symbol_currentTask":{"type":"microTask","state":"notScheduled","source":"Promise.then","zone":"angular","cancelFn":null,"runCount":0}}
while login facebook from my hybrid application. I have used
ng2-cordova-oauth
plugin to achieve facebook login. My code look like.
import { Component } from '#angular/core';
import {IonicPage, NavController, Platform} from 'ionic-angular';
import {OauthCordova} from '../../../node_modules/ng2-cordova-oauth/platform/cordova';
import {Facebook} from '../../../node_modules/ng2-cordova-oauth/core';
#IonicPage()
#Component({
selector: 'page-facebook',
templateUrl: 'facebook.html',
})
export class FacebookPage {
public oauth: OauthCordova;
private provider: Facebook;
public constructor(public navCtrl: NavController, private platform: Platform) {
this.oauth = new OauthCordova();
this.provider = new Facebook({
clientId: "1807864452579635",
appScope: ['id','story','picture','link','type','full_picture','message']
});
}
public login() {
this.platform.ready().then(() => {
this.oauth.logInVia(this.provider).then((success) => {
alert(JSON.stringify(success));
}, (error) => {
console.log(JSON.stringify(error));
});
});
}
}
I ran into this on a project I was working on too. The problem turned out to be that the ng2-cordova-oauth dependencies weren't installed. Specifically we had to run:
cordova plugin add cordova-plugin-inappbrowser
cordova plugin add cordova-plugin-whitelist
cordova prepare
You may also have to whitelist your site using the information found at https://github.com/apache/cordova-plugin-whitelist
Edit: You can't use ng2-cordova-oauth from the browser. You have to use a device or a simulator.
note that it is unlikely for anyone to see the original error in this code since it in part depends on external dependencies
You can use
JSON.stringify(error,Object.getOwnPropertyNames(e));
to get a clear description of the error you getting, because The __zone_symbol_currentTask is a property inserted into the Error object by Angular and JSON.stringify does not output the Error object's own properties (by default)
see also: Is it not possible to stringify an Error using JSON.stringify?
Following other answer, try a lot of time ald.. no error showing, but cannot click the button. When click the error showing like title.
Tried:
1.download plugin npm install -g typings (nothing happen)
2.add declare var cordova:any; , after add this no error show, cordova can use, but after click the button new error showing...(error in title)
service.html
<ion-content>
<button (click)="launch()" style="width:30%" ion-button color="danger" round>测试</button>
</ion-content>
service.ts
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams, Platform} from 'ionic-angular';
import { ServiceDataProvider } from '../../providers/service-data';
declare var cordova:any;
#IonicPage()
#Component({
selector: 'page-service',
templateUrl: 'service.html',
})
export class ServicePage {
users:any;
constructor(public navCtrl: NavController,
public navParams: NavParams,
public serviceData:ServiceDataProvider,
public platform:Platform) {
this.platform = platform;
}
launch(url:any){
this.platform.ready().then(() => {
cordova.InAppBrowser.open(url, "_system", "location=yes");
});
};
}
Make sure you have Cordova in app browser plugin installed, run the below code in terminal in your project root. More often than not, this would be the issue.
cordova plugin add cordova-plugin-inappbrowser
Update:
When running in a browser just make sure you are not using the in app browser.
if(this.platform.is("cordova"))
{
// Run the in app browser code
}
else
{
window.open(encodeURI(url));
}
This is how I solved my error.. and in app browser plugin can run in my project.
html file
<button (click)="launch()" style="width:90%" ion-button color="danger" >button</button>
ts file
launch(){
this.InAppBrowser.create('This is your URL',"_blank","location=no");
}
I am using ionic 2.
I need get previous page name.
here is my code.
#ViewChild(Nav) nav:Nav
constructor() {
this.nav_app.viewDidEnter.subscribe(
view => console.log("Current opened view is : " + view.name);
)
}
still i am getting
Current opened view is : t
How can i get previous page name.
Kindly advice me,
Thanks
You can try
import { Component, ViewChild } from '#angular/core';
import { NavController } from 'ionic-angular';
export class MyApp {
constructor(public navCtrl:NavController){
var val=this.navCtrl.last();
console.log("VAL");
console.log(val);
}
}
In ionic +2 you can simply use:
this.navCtrl.last().name
Here is a simple example to log the name
constructor(public navCtrl:NavController){
console.log("Previous Page is called = " + this.navCtrl.last().name);
}
if you want a history/previous page name in ionic you can use this.
this.navCtrl.getPrevious().name;
or
this.nav.getPrevious().name;
I am using Ionic2 rc4.
Your system information:
Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: macOS Sierra
Node Version: v6.9.4
Xcode version: Xcode 8.2.1 Build version 8C1002
I would like to add a service. I have other Services, that work perfectly. So I configure this new Service (PayPalService) the same.
payPalTest.ts
import { Component, Inject, forwardRef } from '#angular/core';
import { PayPalService } from '../paypal/PayPalService';
#Component({
templateUrl: 'payPalTest.html'
})
export class PayPalTestPage {
public payPalService: PayPalService = null;
constructor( #Inject(forwardRef(() => PayPalService)) payPalService) {
this.payPalService = payPalService;
}
public payOut(): void {
alert('payOut');
//this.payPalService.payOut();
}
}
payPalService.ts
declare var require: any;
var paypal = require('paypal-rest-sdk');
//import {paypal-rest-sdk} from './paypal-rest-sdk';
import { Injectable } from "#angular/core";
#Injectable()
export class PayPalService {
public paypal: any = null;
constructor() {
}
}
app.module.ts
import { PayPalService } from "../pages/paypal/payPalService";
import { PayPalTestPage } from "../pages/paypal/payPalTest";
...
#NgModule({
declarations: [
...
PayPalTestPage
...
entryComponents: [
...
PayPalTestPage
...
...
providers: [..., PayPalService]
However, I get the following error.
Error
Runtime Error Error in ./MyApp class MyApp - caused by: No provider
for PayPalService!
I think the error is related to the way I import the 'paypal-rest-sdk'.
declare var require: any;
var paypal = require('paypal-rest-sdk');
I installed the paypal-rest-sdk as follows:
npm install paypal-rest-sdk
And the new package has been added to the node_modules.
Question
Can anyone please suggest how I can resolve the above error please?
UPDATE
If I remove all reference to the PayPal api by commenting out the following two lines:
payPalService.ts
// declare var require: any;
// var paypal = require('paypal-rest-sdk');
I get the following error:
Error
Runtime Error Module build failed: Error: ENOENT: no such file or
directory, open
'/Users/richardmarais/Development/ionic/theWhoZoo/src/pages/paypal/payPalService.js'
at Error (native)
It was a really silly mistake by me. The import had the incorrect case.
Change:
payPalTest.ts
import { PayPalService } from '../paypal/PayPalService';
to:
import { PayPalService } from '../paypal/payPalService';
I'm already created cordova plugin and already used in Ionic 1, its worked. Then I tried to use it in Ionic 2 but I don't really know how to call that plugin. I follow the step from here to create my own plugin. And this is what i did:
plugin.xml
<name>myPlugin</name>
<js-module src="www/myPlugin.js" name="myPlugin">
<clobbers target="myPlugin" />
</js-module>
myPlugin.js
module.exports = {
myFunction: function (success, failure) {
cordova.exec(success, failure, "myPlugin", "myFunction", []);
}
};
hello-ionic.ts
import { Component } from '#angular/core';
declare var cordova: any;
#Component({
selector: 'page-hello-ionic',
templateUrl: 'hello-ionic.html'
})
export class HelloIonicPage {
constructor() {
}
click() {
if (typeof cordova !== 'undefined') {
cordova.plugins.myPlugin.myFunction();
}
}
}
But unfortunately it return me an error "Undefined myFunction" in hello-ionic.ts.
Here is what I did.
hello-ionic.ts
import { Component } from '#angular/core';
declare var myPlugin: any;
#Component({
selector: 'page-hello-ionic',
templateUrl: 'hello-ionic.html'
})
export class HelloIonicPage {
constructor() {
}
click() {
myPlugin.myFuntion(
(data) => {
console.log(data);
},
(err) => {
console.log(err);
});
}
}
declare var myPlugin: any; , myPlugin name I get from <clobbers target="myPlugin" />.
Note: Need to run the project in device only.
Following tutorial is a good resource to learn how to create custom cordova plugin :
https://taco.visualstudio.com/en-us/docs/createplugintutorial/
I have followed this tutorial to create multiple custom plugins and those are working fine in Ionic2.
One more thing to point out that the tutorial has not mentioned that:
You have to add your custom plugin in your ionic 2 project using following command:
ionic plugin add "folder path of your custom plugin"
Updated:
In your plugin.xml file, you have set "myPlugin" as target in clobbers tag.
So you should call your function as followed
window.myPlugin.myFunction();
Tip: Whenever you use custom plugin created by you(or someone else), inspect the application using Chrome Developer tools. In console tab of developer tools, you can inspect the window and other available objects and can find out correct way to call plugin's methods.