Develop Reference

Convert ReactJS-Project to Android-App with ionic capacitor throws Error on WSL

I am currently working on a relative simple Web-App and I decided to use ReactJS as a Framework.
I created a simple demo Project with create-react-app to get started.
I am working on a Windows 10 system with the Linux Subsystem.
Now I got tasked to make the Website as an Android and later iOs App accessible.
The webpage should still be accessible via a browser, so I was thinking I stick with React and build the weppage responsive so on each device the same same Functionality is given.
I looked at ways to convert a React Project to a "Native"/Hybrid App and stumbled upon Cordova and Ionic.
I tried following the steps in this article Convert your existing react js app to android or ios app using the ionic capacitor
I got Android Studio installed on WSL by using a XServer for GUI-Applications.
Now when I try to add Android to my Project by using
ionic capacitor add android --verbose I get the following error:
ionic:lib Terminal info: { ci: false, shell: '/bin/bash',
tty: true, windows: false } +0ms
ionic:lib CLI global options: { _: [ 'capacitor', 'add', 'android' ], help: null, h: null, verbose: true, quiet: null, interactive: true, color: true, confirm: null, json: null, project: null, '--': [] } +5ms
ionic:lib:project Project type from config: #ionic/react (react) +0ms
ionic:lib:project Project details: { context: 'app', type: 'react', errors: [], configPath: '/mnt/d/ews/ReactWS/pacFrontend/ionic.config.json' } +1ms
ionic Context: { binPath: '/home/KilledByCheese/.nvm/versions/node/v14.15.0/lib/node_modules/#ionic/cli/bin/ionic', libPath: '/home/KilledByCheese/.nvm/versions/node/v14.15.0/lib/node_modules/#ionic/cli', execPath: '/mnt/d/ews/ReactWS/pacFrontend', version: '6.12.1' } +0ms
> capacitor add android
ionic:lib:telemetry Sending telemetry for command: 'ionic capacitor add' [ 'android', '--verbose', '--interactive', '--color' ] +0ms
Error
at new SubprocessError
(/home/KilledByCheese/.nvm/versions/node/v14.15.0/lib/node_modules/#ionic/cli/node_modules/#ionic/utils-subprocess/dist/index.js:41:23)
at ChildProcess.<anonymous>
(/home/KilledByCheese/.nvm/versions/node/v14.15.0/lib/node_modules/#ionic/cli/node_modules/#ionic/utils-subprocess/dist/index.js:114:27)
at ChildProcess.emit (events.js:315:20)
at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
at onErrorNT (internal/child_process.js:465:16)
at processTicksAndRejections (internal/process/task_queues.js:80:21)
ionic Error
ionic at new SubprocessError (/home/KilledByCheese/.nvm/versions/node/v14.15.0/lib/node_modules/#ionic/cli/node_modules/#ionic/utils-subprocess/dist/index.js:41:23)
ionic at ChildProcess.<anonymous> (/home/KilledByCheese/.nvm/versions/node/v14.15.0/lib/node_modules/#ionic/cli/node_modules/#ionic/utils-subprocess/dist/index.js:114:27)
ionic at ChildProcess.emit (events.js:315:20)
ionic at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
ionic at onErrorNT (internal/child_process.js:465:16)
ionic at processTicksAndRejections (internal/process/task_queues.js:80:21) +126ms
Now I couldn't find a solution via Google - Is this a Problem/Bug with ionic/Capacitor or with WSL.
Every Help is Apreciated

So I managed to fix my Problem, or at least get my React Webapp working as an Android-App.
I uninstalld ionic, capacitor and everything else and deleted my node_modules to make a fresh npm install
I proceded to
npm install #capacitor/core #capacitor/cli
and initated capacitor with
npx cap init
npx cap add android
Now I build the webpage by using
npm run build
To create the Android App i use
npx cap copy
npx cap copy android
Then I can open the generated android folder in Android Studio and test the App with an Emulator

Ionic 5 Phonegap-NFC plugin not installed error when it's installed

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

Nativescript getting debugging to work in VS Code

Thank you, thank you, thank you for sharing your Nativescript expertise. I'm pretty stuck
I'm really trying. I'm searching and trying for last couple days to get a simple Nativescript demo app to run in VS Code debugger and break.
I have my dev environment fully setup. I can build and run Nativescript demo apps in VS Code as long as I don't try to use the debugger.
Here is my tns doctor output. You can see I have it all setup correctly.
I'm only doing Android for now. Ignore the tns-ios update.
I have my launch.json setup like this...
{
"name": "Launch on Android",
"type": "nativescript",
"request": "launch",
"platform": "android",
"appRoot": "${workspaceRoot}",
"sourceMaps": true,
"watch": true,
"tnsArgs": [
"--debug",
"--bundle"
]
},
I've added this line to my webpack.config.js...
devtool: "eval-source-map",
And so far, above is all I can find on how to get Nativescript app debugging working in VS Code. What am I missing? Here is what I get in VS Code debug output when I try to do Launch on Android. Link is to Pastebin...
Nativescript VSCode 'Launch on Android' debug output
EDIT 2/3 console output after running commands in first comment...
[NativeScriptCli] execute: tns --analyticsClient VSCode --version
[NativeScriptCli] execute: tns --analyticsClient VSCode --version
[NSDebugAdapter] Using tns CLI v5.1.1 on path 'tns'
[NSDebugAdapter] Running tns command...
[NativeScriptCli] execute: tns --analyticsClient VSCode debug android --watch --bundle
[NSDebugAdapter] Watching the tns CLI output to receive a connection token
Searching for devices...
Executing before-watchPatterns hook from C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\hooks\before-watchPatterns\nativescript-dev-webpack.js
Executing before-watch hook from C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\hooks\before-watch\nativescript-dev-webpack.js
Running webpack for Android...
Bundling application for entryPath .\app...
C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\webpack-cli\bin\cli.js:453
throw err;
^
Error: EPERM: operation not permitted, scandir 'C:/Users/markd/Documents/code-projects/nativescript/blank-vue-app/platforms/android/app/src/main/assets/app/App_Resources/Android/drawable-mdpi/background.png'
at Object.readdirSync (fs.js:786:3)
at GlobSync._readdir (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:288:41)
at GlobSync._readdirInGlobStar (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:267:20)
at GlobSync._readdir (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:276:17)
at GlobSync._processReaddir (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:137:22)
at GlobSync._process (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:132:10)
at GlobSync._processGlobStar (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:380:10)
at GlobSync._process (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:130:10)
at GlobSync._processGlobStar (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:383:10)
at GlobSync._process (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:130:10)
at GlobSync._processGlobStar (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:383:10)
at GlobSync._process (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:130:10)
at GlobSync._processGlobStar (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:383:10)
at GlobSync._process (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:130:10)
at new GlobSync (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:48:10)
at Function.globSync [as sync] (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\glob\sync.js:26:10)
at Function.rimrafSync [as sync] (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\rimraf\rimraf.js:280:22)
at C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\clean-webpack-plugin\index.js:166:16
at Array.forEach ()
at CleanWebpackPlugin.clean (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\clean-webpack-plugin\index.js:92:15)
at CleanWebpackPlugin.apply (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\clean-webpack-plugin\index.js:212:20)
at webpack (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\webpack\lib\webpack.js:47:13)
at processOptions (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\webpack-cli\bin\cli.js:441:16)
at yargs.parse (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\webpack-cli\bin\cli.js:536:3)
at Object.parse (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\yargs\yargs.js:567:18)
at C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\webpack-cli\bin\cli.js:219:8
at Object. (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\webpack-cli\bin\cli.js:538:3)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
at Object. (C:\Users\markd\Documents\code-projects\nativescript\blank-vue-app\node_modules\webpack\bin\webpack.js:155:2)
at Module._compile (internal/modules/cjs/loader.js:689:30)
[31;1mExecuting webpack failed with exit code 1.[0m
[31;1mCannot read property 'kill' of undefined[0m
tns debug
Description
Initiates a debugging session for your project on a connected device or native emulator. When necessary, the command will prepare, build, deploy and launch the app before starting the debug session. While debugging, the output from the application is printed in the console and any changes made to your code are synchronized on all connected devices or running emulators.
Commands
┌─────────┬─────────────────────┐
│ Usage │ Synopsis │
│ General │ $ tns debug android │
└─────────┴─────────────────────┘

If you aren't getting Chrome debugger to work, you won't get any better results with VS Code, since it uses the same protocol.
I assume you have nativescript-dev-webpack included in your 'devDependencies' block of your package.json?
If not, npm install --save-dev nativescript-dev-webpack
then, tns debug android should prompt you with the URL for the chrome debugger connection, and from there you should be able to set a breakpoint somewhere in your code that your application can hit after a button click or some similar direct user event. If you try to set a breakpoint early in the startup of the app, it may not hit it unless you use the --debug-brk flag (see https://docs.nativescript.org/tooling/debugging/debugging#debugger-options). Best to start with something you can trigger after the app if fully up and running. this will be especially true when using VS Code.
Once you get this level of success with Chrome, install the Nativescript extensions for VS Code (https://docs.nativescript.org/tooling/visual-studio-code-extension).
Note that, when in VS Code, clicking the 'settings gear' icon allows you to edit launch.json which controls the target configuration for the debug options. If you have a root other than ${workspaceRoot}, for example, you may need to edit it here so that finds your project in the right place.
When I use this, I use the 'attach android' option, rather than the launch, but that's mostly just my preference. I believe it works either way. I launch from the command line with tns debug android and then in VS Code select 'attach android' and then wait (a short but seemingly long time) for the 'back and forth' progress indicator at the top to stop and the console output to say 'ready to attach debugger' Then I can select a breakpoint and trigger the app, and it will catch it. It can be frustrating to insure the debugger attachment is in place, especially after an edit that triggers a restart, because of the delay. But I use it for my android debugging quite a bit. For whatever reason, it disconnects repeatedly for me when I try to do the same for iOS, but for that, Chrome works nicely.
What I'd really like is a tight and clean debugger solution for WebStorm, which is my IDE of choice, and there used to be one (that no longer works). Such is life.

You need nativescript-dev-webpack#0.19.1 and need to update your webpack.config file
npm i nativescript-dev-webpack#latest --save-dev
./node_modules/.bin/update-ns-webpack --configs

Ionic2 Native - Camera - Get real path from a given URI on Android

I'm following this tutorial:
http://devfanaticblog.com/working-with-camera-in-ionic-2-and-ionic-native/
I'm runing the application on an Android phone.
$ ionic run android
It works properly with only one exception:
Camera.DestinationType.FILE_URI
is returning somthing like:
content://com.android.providers.media.documents/document/image%3A1792
which is not working. I need the real path, for example:
/storage/sdcard/Downloads/ionic.png
These are some of the commands I ran to make the code work.
$ ionic plugin add cordova-plugin-camera
$ npm install --save #ionic-native/camera
Here is the source code of the plugin: github.com/apache/cordova-plugin-camera
There I can see there is already a function which does exactly what I need.
public static String getRealPath(Uri uri, CordovaInterface cordova) {...}
https://github.com/apache/cordova-plugin-camera/blob/master/src/android/FileHelper.java#L44
My question is:
How do I make use of that function on the file: home.ts in order to make the URI conversion?

Try using:
Camera.DestinationType.NATIVE_URI
This should return the native path for the image.

appcelerator titanium_prep.macos Android module build failure on Mac OSX

I am attempting to build a CommonJS module in Appcelerator Studio.
Following this recipe:
File > New > New Mobile Module Project
Set the project name to be testmodule
Leave the location as default
Set the Module Id to au.com.test.testmodule
Set the Titanium SDK Version to 5.3.1.GA
Set the Deployment Targets to Android
Click Next and then Finish
This will create a new module called testmodule.
Under this folder there is a one called assets, create a new file in there called au.com.test.testmodule.js. This will mark the module as a CommonJS module.
In this file just create an empty function and export it
function test() {
Ti.API.debug('test');
}
module.exports = test;
From the command line type:
ant
This will attempt to build the module.
In output you will see the ant target js.compile and this will have an error message
[exec] [DEBUG] "/Users/chris/Library/Application Support/Titanium/mobilesdk/osx/5.3.1.GA/android/titanium_prep.macos" au.com.example.testmodule /testmodule/android/build/generated/js au.com.example.testmodule.js
[exec] [ERROR] Not enough arguments.
[exec] [ERROR] Unabled to prepare JavaScript for packaging. Error code 1.
[exec] Result: 1
Running ant like the following:
ant -debug -logfile build.log
The problem seems to be an executable called titanium_prep.macos.
If you run the command
"/Users/chris/Library/Application Support/Titanium/mobilesdk/osx/5.3.1.GA/android/titanium_prep.macos" au.com.example.testmodule /testmodule/android/build/generated/js au.com.mobilogica.testmodule.js
It will give the error Not enough arguments. If you add one more parameter of anything, it will run without giving that message.
Of course being that the parameter is bogus, it will not generate the correct code.
It seems like titanium_prep.macos requires 4 parameters, but right now only three are being passed in.
au.com.example.testmodule
/testmodule/android/build/generated/js
au.com.example.testmodule.js
System:
Mac OSX 10.10.5
XCode 6.1
Appcelerator CLI 5.4.0
Appcelerator SDK 5.3.1
If you generate the example same module with 3.5.1.GA it works.
I have tried this in the 4.4 series of SDKs as well and have the same problem.