I want to detect the device orientation change event.
I need to change the image while orientation change in the device.
I tried some of the examples but it is not working at all.
I also tried the screen-orientation plugin but it also not working.
Plugin which I used
ionic cordova plugin add cordova-plugin-screen-orientation
npm install #ionic-native/screen-orientation
These are in my package.json.
"#ionic-native/app-preferences": "^4.18.0",
"#ionic-native/call-number": "^4.18.0",
"#ionic-native/core": "~4.17.0",
"#ionic-native/file": "^5.0.0",
"ionic-angular": "3.9.2"
Have you tried that with the screen-orientation plugin, that you have:
import { ScreenOrientation } from '#ionic-native/screen-orientation/ngx';
constructor(private screenOrientation: ScreenOrientation) { }
...
this.screenOrientation.onChange().subscribe(
() => {
console.log("Orientation changed to " + this.screenOrientation.type);
}
);
Related
for the update of an ionic app from 5.3.4 to 6.1.13, also the ionic storage package changed from #ionic/storage (version 2) to #ionic/storage-angular (version 3). The whole app works fine, however I am unable to get already saved data with the new storage-module:
Old App (Ionic 5)
package.json:
"#angular/core": "~9.1.6",
"#ionic/angular": "^5.3.4",
"#ionic/storage": "^2.3.1",
app.module:
import { IonicStorageModule } from '#ionic/storage';
#NgModule({
...
imports: [
IonicModule.forRoot(),
IonicStorageModule.forRoot({
name: '__mydb',
driverOrder: ['sqlite', 'websql', 'indexeddb'],
}),
...
New App (Ionic 6, new angular-storage module)
package.json:
"#angular/core": "^14.0.5",
"#ionic/angular": "^6.1.13",
"#ionic/storage-angular": "^3.0.6",
app.module:
import { Drivers } from '#ionic/storage';
import { IonicStorageModule } from '#ionic/storage-angular';
#NgModule({
...
imports: [
IonicStorageModule.forRoot({
name: '__mydb',
driverOrder: [CordovaSQLiteDriver._driver, Drivers.IndexedDB, Drivers.LocalStorage],
}),
...
I even tried to downgrade to the old storage package (same version as in old app), still I am unable to retrieve the already saved data:
New App (Ionic 6, old storage module)
package.json:
"#angular/core": "^14.0.5",
"#ionic/angular": "^6.1.13",
"#ionic/storage": "2.3.1",
app.module:
import { IonicStorageModule } from '#ionic/storage';
#NgModule({
...
imports: [
IonicStorageModule.forRoot({
name: '__mydb',
driverOrder: ['sqlite', 'websql', 'indexeddb'],
}),
...
I would appreciate any insights / tips, the database name did not change and the data is still there, because if I install the old version again all data is retrieved successfully. But If I try to get the data (same key) with the updated ionic app, regardless of old or new storage package, I can't retrieve the data
Saving / retrieving new data with the new storage module works fine as well!
Testes with both IOS and Android
I'm running in the browser an ionic 5 APP using capacitor and I'm trying to use the file transfer functionality. I follow the documentation https://ionicframework.com/docs/native/file-transfer and configure my app using capacitor. Thus running:
npm install cordova-plugin-file-transfer
npm install #ionic-native/file-transfer
ionic cap sync
In my app.module, I registered the providers:
import { FileTransfer } from '#ionic-native/file-transfer/ngx';
import { File } from '#ionic-native/file/ngx';
...
providers: [
StatusBar,
SplashScreen,
...
FileTransfer,
File
],
Note that I also installed the native file package, so in total I have the following 4 new packages:
"#ionic-native/file": "^5.27.0",
"#ionic-native/file-transfer": "^5.27.0",
"cordova-plugin-file": "^6.0.2",
"cordova-plugin-file-transfer": "^1.7.1",
My code in the component is:
import { Input, Component } from '#angular/core';
import { FileTransfer, FileTransferObject } from '#ionic-native/file-transfer/ngx';
import { File } from '#ionic-native/file/ngx';
#Component({
selector: 'app-order-detail-order-card',
templateUrl: './order-detail-order-card.page.html'
})
export class OrderDetailOrderCardPage {
#Input() pdfUrl: string;
#Input() orderCardId: string;
constructor(private transfer: FileTransfer, private file: File) { }
public downloadFile(): void {
const fileTransfer: FileTransferObject = this.transfer.create();
fileTransfer.download(this.pdfUrl, this.file.applicationDirectory + `${orderCardId}.pdf`).then((entry) => {
console.log('download complete: ' + entry.toURL());
}, (error) => {
// handle error
});
}
}
When I run the app in the browser, I get the following warning and I'm not sure whether the file should donwload somewhere?
common.js:284 Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
Even if I don't get the file, I would be expecting to see the "download complete" message. It's not very clear to me as to whether I have to configure something else in my app to be able to run it locally or I have to use this functionality ONLY in either the emulator or the device itself.
What else needs to be configured to get this to work?
common.js:284 Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
this means that you are using the browser emulator which doesn't have any splashscreen, you can totally ignore that warning ( you won't get it using a simulator or a real device).
You should paste the html section of that page too, because probably the download doesn't start because an incomplete url and it doesn't proceed with the "then()"
maybe i'm wrong, but it can be possible.
I'm using #ionic-native/device plugin in my ionic application in order to detect the underlying device running the application.
However, when I try to use it I get the Device object with all properties set to null.
Note:
this is NOT a duplication of This question since the problem occurs even when running cordova run browser or running in android...
I've installed the #ionic-native/device plugin and used it as follows:
App.module.ts:
import { Device } from '#ionic-native/device/ngx';
#NgModule({
// ...
providers: [
Device,
]
//...
})
export class AppModule { }
App.component.ts:
constructor(private device: Device) {
console.log('Device is: ', this.device);
}
package.json:
"dependencies": {
...
"#ionic-native/core": "^5.24.0",
"#ionic-native/device": "^5.26.0"
}
What is missing?
i suggest you to try this since, the method ready of the platform object helps you to wait all the plugins to be ready in order to execute your code.
don't forget this in your constructor params list : "private platform : Platform"
this.platform.ready().then(()=>{
console.log('Device is: ', this.device);
}
EDIT: Never mind. I fixed it by re-adding platforms:
1) ionic platform rm android
2) ionic platform add android
.......
I'm trying to save a pdf with ngcordova plugin $cordovaFile. But I get an error:
Uncaught ReferenceError: $cordovaFile is not defined, http://192.168.149.151:8100/js/invoice.service.js, Line: 16
I installed the plugin, included the script in index.html, getting the same error in browser and on device. am I missing something?
app.js:
var exampleApp = angular.module('starter', ['ionic','pdf','ngCordova'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
});
index.html:
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
service:
angular.module('starter').factory('InvoiceService', ['$q', InvoiceService]);
function InvoiceService($q) {
function createPdf(invoice) {
return $q(function(resolve, reject) {
var dd = createDocumentDefinition(invoice);
var pdf = pdfMake.createPdf(dd);
pdf.getBase64(function (output) {
resolve(base64ToUint8Array(output));
});
pdfMake.createPdf(dd).getBuffer(function (buffer) {
var utf8 = new Uint8Array(buffer); // Convert to UTF-8...
binaryArray = utf8.buffer; // Convert to Binary...
$cordovaFile.writeFile(cordova.file.dataDirectory, "example.pdf", binaryArray, true)
.then(function (success) {
console.log("pdf created");
}, function (error) {
console.log("error");
});
});
});
}
return {
createPdf: createPdf
};
}
plugin list:
ionic plugin list
com.jcjee.plugins.emailcomposer 1.4.6 "Email Composer with Attachments"
cordova-plugin-console 1.0.2 "Console"
cordova-plugin-device 1.1.1 "Device"
cordova-plugin-file 4.1.1 "File"
cordova-plugin-splashscreen 3.2.1 "Splashscreen"
cordova-plugin-statusbar 2.1.2 "StatusBar"
cordova-plugin-whitelist 1.2.1 "Whitelist"
ionic-plugin-keyboard 2.0.1 "Keyboard"
dms-MacBook-Pro:pdf-test dms$ ionic plugin list
com.jcjee.plugins.emailcomposer 1.4.6 "Email Composer with Attachments"
cordova-plugin-console 1.0.2 "Console"
cordova-plugin-device 1.1.1 "Device"
cordova-plugin-file 4.1.1 "File"
cordova-plugin-splashscreen 3.2.1 "Splashscreen"
cordova-plugin-statusbar 2.1.2 "StatusBar"
cordova-plugin-whitelist 1.2.1 "Whitelist"
ionic-plugin-keyboard 2.0.1 "Keyboard"
Never mind. I fixed it by re-adding platforms:
1) ionic platform rm android
2) ionic platform add android
You are using '$cordovaFile' in the factory but you are not injecting that your factory/service module should be like this:
angular.module('starter').factory('InvoiceService', ['$q', InvoiceService, '$cordovaFile', function($q,InvoiceService,$cordovaFile) {}]);
Or
angular.module('starter').factory("InvoiceService", function($q,InvoiceService,$cordovaFile) {});
I have been trying to run this app through simulator.
When I run ionic emulate ios, this app will not make any Ajax Calls
When I run ionic emulate ios -c -l this app works perfectly
This is my provider class which I copied pretty much exactly from the Ionic Conference App
import {Injectable} from 'angular2/core';
import {Http, Headers} from 'angular2/http';
import 'rxjs/add/operator/map';
import {Storage,SqlStorage} from 'ionic-framework/ionic';
/*
Generated class for the RafitoData provider.
See https://angular.io/docs/ts/latest/guide/dependency-injection.html
for more info on providers and Angular 2 DI.
*/
#Injectable()
export class RafitoData {
static get parameters() {
return [[Http]];
}
constructor(http) {
this.http = http;
this.districts = null;
this.storage = new Storage(SqlStorage);
}
addCustomer(customer) {
// don't have the data yet
return new Promise(resolve => {
var headers = new Headers();
headers.append('Content-Type','application/json');
var partialURL = '/rafitows/userInfo/create';
var body = JSON.stringify(customer);
// We're using Angular Http provider to request the data,
// then on the response it'll map the JSON data to a parsed JS object.
// Next we process the data and resolve the promise with the new data.
this.http.post(partialURL,body,{headers:headers})
.map(res => res.json())
.subscribe(data => {
resolve(data.status);
}, err=> {console.log(err)});
});
}
}
I am not sure what am I doing wrong. I have the cordova whitelist plugin.
This is my ionic information:
Cordova CLI: 5.4.0
Ionic Version: 2.0.0-beta.1
Ionic CLI Version: 2.0.0-beta.17
Ionic App Lib Version: 2.0.0-beta.8
ios-deploy version: Not installed
ios-sim version: 5.0.6
OS: Mac OS X El Capitan
Node Version: v5.3.0
Xcode version: Xcode 7.2.1 Build version 7C1002
I have uploaded the whole project on gitHub
https://github.com/alyn000r/testAjax/tree/master/testAjax
Please add the below line to your config.xml
<allow-navigation href="*" />
Also have a look here.
Hope this helps you. Thanks.