I have a Vue2 App, when i try to use vue-cordova-cli on mine app for deploy on android's device, it doesn't works and only look a with blank screen, i look for all sites of internet for look the solution with not luck.
I display you the configuration that i have:
System Operative: Windows 10
CLI: Powershell (Administrative Privilege)
Android: 7.1.1
Commands npm
vue add cordova
npm run cordova-prepare
npm run cordova-serve-android
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
vue.config.js
module.exports = {
publicPath: '',
pluginOptions: {
cordovaPath: 'src-cordova'
}
}
More info: All my test are doing using my device connect to my pc using a usb link and i have a lot of deploy previously to that using that way.
Related
When using the NFC library the Ionic docs recommend
(https://github.com/chariotsolutions/phonegap-nfc)
(https://ionicframework.com/docs/native/nfc) I get a ''plugin not installed'' error when trying to reach the code in my component calling the ndef or nfc providers on my Android One Plus through the 'ionic serve --devapp' CLI command. It also says the devapp does not support this plugin, but I am unclear about how I am supposed to go about using this package testing wise in that case.
After specifying version 4 as per suggestion of this post for Ionic 3 I got a different error. This is with rxjs-compat installed and none of the nfc/ndef code actually used aside the imports in the module and component, and the injection into the constructor.
This is using "import {Ndef, NFC} from '#ionic-native/nfc';" instead of /nfc/ngx like above.
Uncaught TypeError: Object(...) is not a function
at index.js:405
at Module../node_modules/#ionic-native/nfc/index.js (index.js:599)
at __webpack_require__ (bootstrap:84)
at Module../src/app/app.module.ts (app.component.ts:12)
at __webpack_require__ (bootstrap:84)
at Module../src/main.ts (main.ts:1)
at __webpack_require__ (bootstrap:84)
at Object.0 (main.ts:12)
at __webpack_require__ (bootstrap:84)
at checkDeferredModules (bootstrap:45)
When I try to build the app instead of serving it with the devapp I come across this (perhaps unrelated) error, even though I am running the app in Android Studio on Windows 10 and have both my Java, Android and Gradle paths defined in my environment variables.
ANDROID_HOME=C:\Users\Sam\AppData\Local\Android\sdk
JAVA_HOME=C:\Program Files\Java\jdk1.8.0_181
Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio
I have added the imports and the provider in the app module.
import {Ndef, NFC} from '#ionic-native/nfc';
#NgModule({
...
providers: [
NFC,
Ndef,
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
This is how I inject the providers into my class.
import { Component } from '#angular/core';
import {ToastController} from '#ionic/angular';
import {Ndef, NFC} from '#ionic-native/nfc';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(private nfc: NFC, private ndef: Ndef, private toast: ToastController) {
}
Maybe I am completely on the wrong path about this, but following the documentation or any of the suggestion threads available on similar topics have not lead anywhere. Am I approaching this wrong?
EDIT: After running everything in a new project and making sure I go through each and every step without making any errors, I again end up with the INSTALL PLUGIN ERROR, like such.
[ng] [console.warn]: "Install the NFC plugin: 'ionic cordova plugin add phonegap-nfc'"
[ng] [console.warn]: "Native: tried calling NFC.removeNdefListener, but the NFC plugin is not installed."
[ng] [console.warn]: "Install the NFC plugin: 'ionic cordova plugin add phonegap-nfc'"
[ng] [console.log]: "Angular is running in the development mode. Call enableProdMode() to enable the production mode."
[ng] [console.log]: "calling _sync"
[ng] [console.error]: "ERROR" "plugin_not_installed"
[ng] [console.info]: "[WDS] Live Reloading enabled."
[ng] [console.log]: "calling _reload"
[ng] [console.log]: "done _reloading"
[ng] [console.log]: "Ionic Native: deviceready event fired after 836 ms"
This error appears in my console only when I open up the Android version of the app in DevApp after serving it with serve --devapp. It does not appear when I run it in the browser, it then just gives me the ''Cordova'' not available error, which I imagine is standard for plugins that don't work on certain devices. This is done following the exact step by step process, including the code in the ionic docs. https://ionicframework.com/docs/native/nfc
EDIT2: It might have to do with an XML processing error. When running through the same steps as before I came across an error I dismissed earlier when installing the plugin due to it resolving itself after installing both the iOS and Android platforms on Cordova. The error below happens after running the 'ionic cordova plugin add phonegap-nfc' command. The plugin however DOES install, and is listed under 'cordova plugin list' afterwards, but the installation might not be done completely correctly. The plug-in is not listed under the plugins in config.xml for example.
Failed to install 'phonegap-nfc': Error: Unable to graft xml at selector "/manifest/uses-sdk" from "C:\Users\cliem\Desktop\dev\nfctest\nfctest2\platforms\android\app\src\main\AndroidManifest.xml" during config install
at ConfigFile_graft_child [as graft_child] (C:\Users\cliem\Desktop\dev\nfctest\nfctest2\node_modules\cordova-common\src\ConfigChanges\ConfigFile.js:122:19)
Long story short, don't use a Java version over 8. Nfc plugin does not work with ionic serve --devapp and needs to be tested with ionic cordova run android instead. Console needs to be read out from chrome://inspect.
If you have the latest version of cordova which is 9.0.0, try
$ sudo npm uninstall -g cordova to uninstall it and install in back again with a previous version
$ sudo npm uninstall -g cordova#8.x
This worked for me
I would like to know if there is a way to play Android device ringtone/alarm using Ionic Capacitor (not Cordova)?
If it is possible, please provide me with a simple solution (include required npm packages and code).
If not, please tell me how to do it with a simple typescript - I do not want to do it with a Cordova.
Also, I do not want to use Capacitor Local Notifications. I want ringtone sound only.
Thank you for any help :))
Did you check that link ? https://ionicframework.com/docs/native/native-ringtones
You can install it using Capacitor.
npm install cordova-plugin-native-ringtones
npm install #ionic-native/native-ringtones
ionic cap sync
Save some .caf file in your assets repository and do the following :
import { NativeRingtones } from '#ionic-native/native-ringtones/ngx';
constructor(private ringtones: NativeRingtones) { }
...
this.ringtones.getRingtone().then((ringtones) => { console.log(ringtones); });
this.ringtones.playRingtone('assets/ringtones/sound_1.caf');
this.ringtones.stopRingtone('assets/ringtones/sound_1.caf');
I am using Ionic 3 and my device is 4.4.2 android.
Setup:
ionic cordova plugin add cordova-sms-plugin
npm install --save #ionic-native/sms#4
I have add to app.module
import { SMS } from '#ionic-native/sms';
providers: [..., SMS]
home.ts
...
import { SMS } from '#ionic-native/sms';
...
constructor(..., private sms: SMS){}
sendSMS(){
this.sms.send('0030699999999', 'sos')
}
home.html
<button ion-button block (click)="sendSMS()" margin-top color="dark">SMS</button>
I install the apk to my phone with below command:
ionic cordova run android
When I am pressing the button, my app breaks and exit, without sending a message.
I tried to remove platform android and added again, but nothing.
Allow from app settings on your phone
I had to put a send_sms permission in manifest file (android).
Check in my phone v 4.4.2.
I didn't check it in iPhone.
I've written a small application to test the working of cordova app on XDK.
The source code is same as this question
However, I am attaching the code here :
(function()
{
"use strict";
/*
hook up event handlers
*/
function register_event_handlers()
{
/* button Login */
$(document).on("click", ".uib_w_9", function(evt)
{
//intel.xdk.notification.showBusyIndicator();
/*$.post("http://url/test.php", {test:'1'},
function(res){
alert(res);
}
);*/
$.ajax({
beforeSend: function(){
intel.xdk.notification.showBusyIndicator();
},
type: "GET",
url: 'http://url/test.php',
data:{test:'1'},
success: function(res){
alert(res);
intel.xdk.notification.hideBusyIndicator();
},
error:function(res){
alert(res);
intel.xdk.notification.hideBusyIndicator();
},
dataType: 'text'
});
});
}
document.addEventListener("app.Ready", register_event_handlers, false);
})();
This is the JS file of the application.
The screenshot of the app in XDK emulator :
Now When I do a build of the app using XDK cloud, I get a .apk file.
On uploading the file to GenyMotion Emulator, screen below :
The click doesn't do anything, nor does the showBusyIndicator() show, nor the alert appear.
What am I missing and what is going wrong ?
I've plans to use this ide for a proper project and hence the testing, some help will be appreciated.
UPDATE
I did a Cordova Hybrid App build initially and that caused the problem.
When I did a legacy android build, then the problem was solved.
So what do I need to do to get it to work with the Cordova Build ?
Build Page :
There is a known issue with AJAX when Intel XDK builds apk with Cordova CLI version 4.1.2. on Android version > 4.4
There is a workaround, go to Project Settings -> Build Settings -> Android, change Cordova CLI version from 4.1.2 to 3.5 and AJAX should work.
In my other computer I have ripple emulating a phonegap android app, but now I´m trying to emulate in my classroom pc and doesn´t work the hello world neither my project.
I have phonegap,npm,ant,java dk,android sdk and ripple-emulator installed.
When I go to:
mypath/platforms/android/assets/www
and type:
ripple emulate
this error happend:
INFO: Server instance running on: localhost:4040 INFO: CORS XHR
proxy service on: localhost:4040/ripple/xhr_proxy INFO: JSONP
XHR proxy service on: localhost:4040/ripple/json_xhr_proxy
Cordova 3.0 project dected...
**fs.js:654 return binding.readdir(pathModule._makeLong(pah)): Error: ENOENT, no such file or director "c:\mypath...
Try running ripple emulate from the root of the project, not in the platform www folder.
one solution which is currently working on all platforms are based on some small source code tweaks. The major problem is regarding the www/platform folder. Especially older phonegap versions doesnt introduce the same Folder structure so you needto adjust the following file to make it properly:
Additional information:
Make sure ripple was installed globally as well as Phonegap and/or Cordova
npm install -g ripple-emulator
npm install -g phonegap
npm install -g cordova
This solution works for Linux, Mac and Windows. You only need to pay attention on the path. Filenames about the source code adjustments remain same. This explanation is based on windows but can be easily used for any other operating system.
1.) Find the ripple Folder on your hard Disk (on Windows you need to show your hidden files and than you should be able to find it at the following path:
Windows:
C:\Users\YOUR_USERNAME\AppData\Roaming\npm\node_modules\ripple-emulator
Pay attention to replace YOUR_USERNAME with your current username in the shown path. If you have customized your path where npm modules get installed please go to that folder and search for the following directory in it /ripple-emulator
2.) Next lets find the file which makes trouble to start ripple correctly. Within the /ripple-emulate directory navigate through the following subdirectories server\emulate. Full path e.g.
Windows:
C:\Users\YOUR_USERNAME\AppData\Roaming\npm\node_modules\ripple-emulator\lib\server\emulate
3.) Open cordovaProject.js and replace all strings which contain "platforms" with an empty one "" as shown Bellow, you can also copy the code shown bellow...
var platforms = fs.readdirSync(path.join(paths.orig, ""));
if (platforms.indexOf('android') >= 0) {
opts.cordova = 'android';
paths.android = path.join(paths.orig, "", "android", "assets", "www");
}
if (platforms.indexOf('ios') >= 0) {
opts.cordova = 'ios';
paths.ios = path.join(paths.orig, "", "ios", "www");
}
if (platforms.indexOf('firefoxos') >= 0) {
opts.cordova = 'firefoxos';
paths.firefox = path.join(paths.orig, "", "firefoxos", "www");
}
if (platforms.indexOf('blackberry10') >= 0) {
opts.cordova = 'blackberry10';
paths.blackberry = path.join(paths.orig, "", "blackberry10", "www");
4.) Now save it.
5.) Make sure you have uninstalled the ripple emulator plugin in chrome (to check open chrome browser, go to Settings and choose extensions). In case you don't know how to uninstall extensions in chrome you can find some additional instruction here https://support.google.com/chrome/answer/113907?hl=en In addition make sure you are using chrome as your Default browser.
6.) Now open your command line and navigate to your phonegap specific www folder and run the command
ripple emulate
optional you also can run it with the following command:
ripple emulate --path/TO_YOUR_PROJECT_FOLDER/www
Thank you & br
Schreda