I'm working on a ionic based webview project by using cordova inappbrowser plugin, I could run it properly by using "ionic serve" command but when i try to run it on android it stucks at blank screen.
.controller("ExampleController", function ($scope) {
$scope.openCordovaWebView = function()
{
// Open cordova webview if the url is in the whitelist otherwise opens in app browser
window.open('https://google.com','_self','location=no');
};
Have you install
cordova-plugin-inappbrowser ?
In terminal type:
cordova plugin list
in your project's root folder.
Also
cordova plugin
works fine.
try this after you have the plug in installed, in View:
<button class="button" ng-click="openInBrowser('https://www.google.com')">
GOOGLE
</button>
then in the JS
myApp.controller('ExampleController', ['$scope', '$ionicPlatform', '$cordovaInAppBrowser', function($scope, $ionicPlatform, $cordovaInAppBrowser){
$scope.openInBrowser = function(extUrl){
$ionicPlatform.ready(function() {
var options = {
location: 'yes',
clearcache: 'yes',
toolbar: 'yes'
};
$cordovaInAppBrowser.open(extUrl, '_system', options)
.then(function(event) {
// success
})
.catch(function(event) {
// error
});
}); // ./$ionicPlatform.ready
};//--------------------------------------
}]);
Related
I am working on Ionic 4 app and I am using deeplink to open app when clicked on a external link.
I am using plugin:
cordova plugin add ionic-plugin-deeplinks --variable URL_SCHEME=deeplinktest --variable DEEPLINK_SCHEME=https --variable DEEPLINK_HOST=example.com --variable ANDROID_PATH_PREFIX=/
npm install #ionic-native/deeplinks
and code for opening app is:
openAppFromLink() {
this.deeplinks.routeWithNavController(this.navCtrl, {
'/pageName/:id': {}
}).subscribe(match => {
if (localStorage.getItem('loggedInUser')) {
let navigationExtras: NavigationExtras = {
state: {
id: match.$args.id,
isDeeplink: true
}
};
console.log('Successfully matched route' + JSON.stringify(match));
this.router.navigateByUrl(this.router.routerState.snapshot.url + '/pageName', navigationExtras);
} else {
console.log('opening in system browser');
window.open('https://example.com', '_system');
}
}, nomatch => {
console.error('Got a deeplink that didn\'t match' + JSON.stringify(nomatch));
});
}
I want to open a website or a playstore if user don't have app install on his device.
<h1><a href='deeplinktest://example.com/page/?id=3491'>Open App <a></h1>
on click of above link I am able to open app but when I don't have app installed nothing happens on android device. Can this managed with the same link I mentioned?
in this block you have to handle the error:
nomatch => {
console.error('Got a deeplink that didn\'t match' + JSON.stringify(nomatch));
});
there is a plugin named In App Browser that opens links in in-app-browser.
install it and put your code in nomatch block:
nomatch => {
// open the link here using In App Browser
});
I am new to Ionic 2 and everything around. I'm tryng to setup my first mobile app: touching a button I would open native navigation (Google Maps for Android, for instance). I've installed launchnavigator plugin:
ionic plugin add uk.co.workingedge.phonegap.plugin.launchnavigator
and inside cremony.ts page:
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { LaunchNavigator, LaunchNavigatorOptions } from 'ionic-native';
#Component({
selector: 'page-ceremony',
templateUrl: 'ceremony.html'
})
export class Ceremony {
constructor(public navCtrl: NavController) {
}
navigate() {
let options: LaunchNavigatorOptions = {
start: ""
};
LaunchNavigator.navigate("London, UK", options)
.then(
success => alert('Launched navigator'),
error => alert('Error launching navigator: ' + error)
);
}
}
make a build npm run buildand upload it to IonicView with ionic upload.
I've do everything like suggested in this link but with different luck.
But when I click the button (a simple <button ion-button (click)="navigate()">Navigate</button> in the ceremony.html) in the Ionic View an error say: Error launghing navigator: plugin_not_installed.
I inspected the project, the plugins directory contains uk.co.workingedge.phonegap.plugin.launchnavigatorlooks directory. So I look at package.json and config.xml and I've added the value uk.co.workingedge.phonegap.plugin.launchnavigator in the cordovaPlugins
and tag <plugin name="uk.co.workingedge.phonegap.plugin.launchnavigator" spec="~3.2.1" /> in the widget root. npm run build, ionic upload but nothing changed.
Where is my error?
New answer, there is something wrong with your project. Have you modified your index.html file? Is it still including cordova.js? If so what version of Ionic and Cordova are you using?
I made this sample application with your exact code and it works perfectly on both iOS and ANdroid: https://github.com/roblouie/navigator-plugin-test
Did a screen recording on iOS: https://giphy.com/gifs/xTiN0EEQV82aIXWnQI
Just grabbed an image on Android, but it works the same:
Please try the project from github.
Cordova plugins need to be called only once platform is ready.
constructor(public navCtrl: NavController,public platform:Platform) {//inject in constructor
}
In your function navigate()
this.platform.ready().then(()=>{
LaunchNavigator.navigate("London, UK", options)
.then(
success => alert('Launched navigator'),
error => alert('Error launching navigator: ' + error)
);
});
The reason for your error is that you are using Ionic View. Your Ionic app is just html, css, and javascript. However, any plugins you use are written in Java for Android and Objective C for iOS. That plugin source code is then compiled into your app for each platform.
With Ionic View, it only uploads your app, the html, css, and javascript. Nothing is compiled. Ionic View is the app itself, and it loads your code. So no plugins you have are included. Ionic View itself does have some plugins installed on it, and you can see that list here: https://docs.ionic.io/tools/view/#supported-plugins
Unfortunately you will not be able to test any plugin not in that list without building and deploying to a device or emulator.
I have an Ionic 1.3.1 project with an architecture based on the, old but gold, generator-gulp-angular in which I would like to enable Live Reload on the device (Android).
My gulp config paths look like:
exports.paths = {
src: 'src',
dist: 'www',
tmp: '.tmp',
e2e: 'e2e'
};
This means that to run the project in the browser I use gulp serve and to run in the Android device I use gulp build && ionic run android.
I can't use the command ionic run android --livereload as described in the doc here because it synchronizes the www folder where (after a gulp build) I have the minified files and not the source files.
So I would like to mix up in some way the two commands gulp serve and ionic run android --livereload but sincerely I don't know how to achieve this.
I solved updating my gulp watch task that every time there's a change it runs the gulp build while the command ionic run android --livereload is running.
I added a flag --livereload to my gulp watch, so my /gulp/watch.js file looks like:
gulp.task('watch', ['inject'], function () {
var livereload = process.argv.length === 4 && process.argv[3] === '--livereload';
gulp.watch([path.join(conf.paths.src, '/*.html'), 'bower.json'], ['inject-reload']);
gulp.watch([
path.join(conf.paths.src, '/app/**/*.css'),
path.join(conf.paths.src, '/app/**/*.scss'),
path.join(conf.paths.src, '/scss/*.scss')
], function(event) {
if (livereload) {
gulp.start('build');
} else {
if(isOnlyChange(event)) {
gulp.start('styles-reload');
} else {
gulp.start('inject-reload');
}
}
});
gulp.watch(path.join(conf.paths.src, '/app/**/*.js'), function(event) {
if (livereload) {
gulp.start('build');
} else {
if(isOnlyChange(event)) {
gulp.start('scripts-reload');
} else {
gulp.start('inject-reload');
}
}
});
gulp.watch(path.join(conf.paths.src, '/app/**/*.html'), function(event) {
if (livereload) {
gulp.start('build');
} else {
browserSync.reload(event.path);
}
});
});
How to use:
on a terminal tab:
ionic run android --livereload
and, on another terminal tab:
gulp watch --livereload
Enjoy!
installed cordova device plugin by :
sudo cordova plugin add org.apache.cordova.device
then downloaded ngCordova and included ng-cordova.min.js in to js folder and also included in index.html
next what i did is injected ngCordova as follows
angular.module('starter', ['ionic', 'starter.controllers','ngCordova'])
then included in controller as follows
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout, $ionicPlatform,$cordovaDevice)
but still getting the following errors
ReferenceError: device is not defined
at Object.getUUID (http://localhost:8100/js/ng-cordova.min.js:1:14929)
at new <anonymous> (http://localhost:8100/js/controllers.js:27:26)
at invoke (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11591:17)
at Object.instantiate (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11602:23)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:14906:28
at updateView (http://localhost:8100/lib/ionic/js/ionic.bundle.js:42986:30)
at eventHook (http://localhost:8100/lib/ionic/js/ionic.bundle.js:42933:17)
at Scope.$broadcast (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20605:28)
at $state.transition.resolved.then.$state.transition (http://localhost:8100/lib/ionic/js/ionic.bundle.js:34122:22)
at wrappedCallback (http://localhost:8100/lib/ionic/js/ionic.bundle.js:19197:81)
Can you now tell me what went wrong?
If is there another way to read the Device UUID show me the direction to it.
Yes, there is another way. You just don't need the ngCordova for this.
When you add the plugin cordova plugin add org.apache.cordova.device it's loaded to your application and therefore the info you want is at window.device.
If you want to get device uuid at anywhere in the code you just need to call window.device.uuid.
If you want as soon as the app starts, then use:
ionic.Platform.ready(function(){
console.log( window.device.uuid );
});
If you are using '> ionic serve', device will be "not defined." Try in an emulator or physical device.
Use ngCordova and cordova Device plugin:
cordova plugin add org.apache.cordova.device
module.controller('MyCtrl', function($scope, $cordovaDevice) {
var uuid = $cordovaDevice.getUUID();
});
Within v2 it works like this:
import { Device } from 'ionic-native';
console.log('Device UUID is: ' + Device.uuid);
Reference: http://ionicframework.com/docs/v2/native/device/
Install:
#ionic-native/core
#ionic-native/device
enter link description here
ionic cordova plugin add cordova-plugin-device
npm install --save #ionic-native/device
Add this plugin to your app's module
// app.module.ts
import { Device } from '#ionic-native/device';
...
#NgModule({
...
providers: [
...
Device
...
]
...
})
export class AppModule { }
Usage
import { Device } from '#ionic-native/device';
constructor(private device: Device) { }
...
console.log('Device Model is: ' + this.device.model+
'\n Device UUID is: ' + this.device.uuid+
'\n Device serial is: ' + this.device.serial+
'\n Device platform is: ' + this.device.platform+
'\n Device version is: ' + this.device.version+
'\n Device manufacturer is: ' + this.device.manufacturer);
If won't run change "import { Device } from '#ionic-native/device';" for "import { Device } from '#ionic-native/device/ngx';"
And "this.device.uuid" for "Investigate"
Use these commands for run in browser
ionic build
ionic cordova platform add browser
cordova run browser
And works ! in these versions
in Browser
in Real Device
You could just use ionic.Platform.device() in your platform.ready function.
$ionicPlatform.ready(function {
console.log(ionic.Platform.device());// returns an object containing device uuid,version, platform, manufacturer ...
});
hope this helps someone :).
Regards.
http://forum.ionicframework.com/t/ionic-cordova-device-uuid/13652
You may only access cordova plugins within the ionic.Platform.ready() callback function:
angular.module('starter.controllers', [])
.controller('DashCtrl', function ($scope, $state, $cordovaDevice) {
var init = function () {
console.log("initializing device");
try {
$scope.uuid = $cordovaDevice.getUUID();
}
catch (err) {
console.log("Error " + err.message);
alert("error " + err.$$failure.message);
}
};
ionic.Platform.ready(function(){
init();
});
})
This is because Cordova plugins take some more time to load then the web application. The ionic.Platform.ready() callback is triggered as soon Cordova has fully loaded or immediately if it is already loaded.
wow found out what wrong i was doing... through this question. http://forum.ionicframework.com/t/problem-to-use-ngcordova-device-is-not-defined/11979
when we test on other device which has other platform than cordova supports this happens.
this was a useful discovery for me.
Have been struggling with this for hours today, install the cordova device plugin with:
cordova plugin add cordova-plugin-device
make sure you also reference the plugin in your config.xml:
<plugin name="cordova-plugin-device" source="npm" spec="~1.1.1" />
I've been looking up for a solution for up to almost 2 days.
I'm trying to use the ngCordova Camera plugin.
I'm using the ionic-yeoman framework with AngularJS.
What I did was:
bower install --save ngCordova.
Added ngCordova to my app.module.
Installed the cordova camera plugin:
cordova plugin add org.apache.cordova.camera.
My controller:
.controller('profileCtrl', function($scope, myService, $cordovaCamera)
{
$scope.takePicture = function() {
var options = {
quality : 75,
destinationType : Camera.DestinationType.DATA_URL,
sourceType : Camera.PictureSourceType.CAMERA,
allowEdit : true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 100,
targetHeight: 100,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false
};
$cordovaCamera.getPicture(options).then(function(imageData) {
// Success! Image data is here
}, function(err) {
// An error occured. Show a message to the user
});
}
myService.getFoo().then(function(data) {
//this will execute when the
//AJAX call completes.
$scope.items = data;
});
})
And I get this error:ReferenceError: Camera is not defined
If you are serving your app through browser, whatever you use of cordova regarding the usage of device, doesn't work. But, if you are having the problem even after serving your app in emulator or the device itself. Try the following steps.
Firstly, check the cordova plugin lists:
Go to project directory type: cordova plugin lists
see for cordova-plugin-media-capture, cordova-plugin-camera (if these are not in the list, you are simply missing your plugins).
Run the command
cordova plugin add cordova-plugin-media-capture and cordova plugin add cordova-plugin-camera
If the plugins are there and you are still having the issue of camera is not defined
cordova plugin rm cordova-plugin-camera
cordova plugin rm cordova-plugin-media-capture
ionic platform rm android
ionic platform add android
cordova plugin add cordova-plugin-camera
cordova plugin add cordova-plugin-media-capture
Following must be present in your index.html
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
You should make sure you include the ng-cordova.js file (from the ngCordova/dist/folder) before the cordova.js file in your html.
make sure you include ngCordova in the controller declaration as well. becoz i had kept my controllers and app.js files seperately and had not included ngCordova in angular.module('xx.controllers', ['ionic','ngCordova']). once i did it my problem was solved and i coul runn the app in genymotion
Just figured this out by analyzing the Ionic Camera example project. You did all of the setup correctly, but you still need to inject it into the controller, like so:
.controller('MyCtrl', function($scope, Camera) {
Note that there is not a dollar sign before Camera. This really should be documented more explicitly.
Also, add this factory if you don't already have it:
.factory('Camera', ['$q', function($q) {
return {
getPicture: function(options) {
var q = $q.defer();
navigator.camera.getPicture(function(result) {
// Do any magic you need
q.resolve(result);
}, function(err) {
q.reject(err);
}, options);
return q.promise;
}
}
}])
just try ionic run browser instead ionic serve