NativeScript-Vue with YoutubePlayer plugin not working in Android - nativescript

I am trying to use the Youtubeplayer plugin in NativeScript-Vue. The plugin has demos for Typescript and Angular, but not Vue, so it may never have been tested with Vue before.
In main.js, I have:
Vue.registerElement('YoutubePlayer', () => require('nativescript-youtubeplayer').YoutubePlayer);
And in App.vue, I have:
<template>
<Page>
<ActionBar title="Welcome to NativeScript-Vue!"/>
<GridLayout columns="*" rows="*">
<YoutubePlayer height="50%" width="90%" id="player" options="" apiKey="...my api key..." src="...my video source..." backgroundColor="gray"></YoutubePlayer>
</GridLayout>
</Page>
</template>
This builds and runs OK for IOS, but for Android, it doesn't build. Instead, I get errors:
System.err: com.tns.NativeScriptException:
System.err: Calling js method onCreateView failed
System.err:
System.err: TypeError: Cannot read property 'android' of undefined
System.err: File: "file:///data/data/org.nativescript.application/files/app/vendor.js, line: 14495, column: 34
System.err:
System.err: StackTrace:
System.err: Frame: function:'YoutubePlayer.createNativeView', file:'file:///data/data/org.nativescript.application/f
iles/app/vendor.js', line: 14495, column: 35
System.err: Frame: function:'ViewBase._setupUI', file:'file:///data/data/org.nativescript.application/files/app/vend
or.js', line: 33350, column: 25
I've posted an issue on GitHub and asked in the NativeScript #plugins forum. The dev says he doesn't have free time to work on this plugin, which I understand, but that leaves it up to others to resolve the plugin's open issues. I'd like to help figure out how to solve this problem, but I don't know where to begin.

Related

Upgrading NativeScript app from 3 to 7, any advice?

I have an app built around 2015 which is in desperate need of an upgrade. I have tried following the upgrade instructions on https://docs.nativescript.org/releases/upgrade-instructions and after struggling to get the compiler working I am now getting a whole stack of error which looks like Angular failing to load the app.
I am reaching out to the broader community to see if anyone has done something similar or if there are additional guidelines for upgrade old NativeScript apps build using Angular back in 2015.
Any advice is welcome :-)
This is the latest log output:
File change detected. Starting incremental webpack compilation...
Hash: 930f5656308d0b87060d
Version: webpack 4.27.1
Time: 7955ms
Built at: 11/12/2020 11:12:59 AM
Asset Size Chunks Chunk Names
app/images/home_background.png 256 KiB [emitted]
app/images/incident_map_placeholder.png 242 KiB [emitted]
app/images/placeholder_image.png 7.62 KiB [emitted]
bundle.js 157 KiB bundle [emitted] bundle
package.json 112 bytes [emitted]
runtime.js 71.4 KiB runtime [emitted] runtime
tns-java-classes.js 0 bytes [emitted]
vendor.js 5.89 MiB vendor [emitted] vendor
Entrypoint bundle = runtime.js vendor.js bundle.js
[./main.ts] 12.9 KiB {bundle} [built]
+ 368 hidden modules
WARNING in Lazy routes discovery is not enabled. Because there is neither an entryModule nor a statically analyzable bootstrap code in the main file.
Webpack compilation complete. Watching for file changes.
Webpack build done!
ERROR in src/main.ts(226,3): error TS2304: Cannot find name 'firebase'.
src/main.ts(287,20): error TS2304: Cannot find name 'iosUuidModule'.
Updating runtime package.json with configuration values...
Project successfully prepared (android)
Building project...
Gradle build...
+ setting applicationId
+ applying user-defined configuration from C:\pathtoproject\nativescript\xxx\App_Resources\Android\app.gradle
+ using android X library androidx.legacy:legacy-support-v4:1.0.0
+ adding nativescript runtime package dependency: nativescript-optimized-with-inspector
+ adding aar plugin dependency: C:\pathtoproject\nativescript\xxx\node_modules\nativescript-loading-indicator\platforms\android\nativescript_loading_indicator.aar
+ adding aar plugin dependency: C:\pathtoproject\nativescript\xxx\node_modules\#nativescript\core\node_modules\tns-core-modules-widgets\platforms\android\widgets-release.aar
Project successfully built.
The build result is located at: C:\pathtoproject\nativescript\xxx\platforms\android\app\build\outputs\apk\debug\app-debug.apk
Installing on device emulator-5554...
Successfully installed on device with identifier 'emulator-5554'.
Restarting application on device emulator-5554...
Successfully synced application au.com.xxx.app on device emulator-5554.
JS: HMR: Hot Module Replacement Enabled. Waiting for signal.
System.err: An uncaught Exception occurred on "main" thread.
System.err: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Error calling module function
System.err: TypeError: application.start is not a function
System.err: File: (file:///data/data/au.com.xxx.app/files/app/bundle.js:658:12)
System.err:
System.err: StackTrace:
System.err: (file:///data/data/au.com.xxx.app/files/app/bundle.js:658:13)
System.err: at ./main.ts(file:///data/data/au.com.xxx.app/files/app/bundle.js:664:30)
System.err: at __webpack_require__(file: src\webpack\bootstrap:750:0)
System.err: at checkDeferredModules(file: src\webpack\bootstrap:43:0)
System.err: at webpackJsonpCallback(file: src\webpack\bootstrap:30:0)
System.err: at (file:///data/data/au.com.xxx.app/files/app/bundle.js:2:57)
System.err: at require(:1:266)
System.err:
System.err:
System.err: TypeError: application.start is not a function
System.err:
System.err: StackTrace:
System.err: java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Error calling module function
System.err: TypeError: application.start is not a function
System.err: File: (file:///data/data/au.com.xxx.app/files/app/bundle.js:658:12)
System.err:
System.err: StackTrace:
System.err: (file:///data/data/au.com.xxx.app/files/app/bundle.js:658:13)
System.err: at ./main.ts(file:///data/data/au.com.xxx.app/files/app/bundle.js:664:30)
System.err: at __webpack_require__(file: src\webpack\bootstrap:750:0)
System.err: at checkDeferredModules(file: src\webpack\bootstrap:43:0)
System.err: at webpackJsonpCallback(file: src\webpack\bootstrap:30:0)
System.err: at (file:///data/data/au.com.xxx.app/files/app/bundle.js:2:57)
System.err: at require(:1:266)
System.err:
System.err:
System.err: TypeError: application.start is not a function
System.err: at android.app.ActivityThread.handleBindApplication(ActivityThread.java:6465)
System.err: at android.app.ActivityThread.access$1300(ActivityThread.java:219)
System.err: at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1859)
System.err: at android.os.Handler.dispatchMessage(Handler.java:107)
System.err: at android.os.Looper.loop(Looper.java:214)
System.err: at android.app.ActivityThread.main(ActivityThread.java:7356)
System.err: at java.lang.reflect.Method.invoke(Native Method)
System.err: at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:492)
System.err: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:930)
System.err: Caused by: com.tns.NativeScriptException: Error calling module function
System.err: TypeError: application.start is not a function
System.err: File: (file:///data/data/au.com.xxx.app/files/app/bundle.js:658:12)
System.err:
System.err: StackTrace:
System.err: (file:///data/data/au.com.xxx.app/files/app/bundle.js:658:13)
System.err: at ./main.ts(file:///data/data/au.com.xxx.app/files/app/bundle.js:664:30)
System.err: at __webpack_require__(file: src\webpack\bootstrap:750:0)
System.err: at checkDeferredModules(file: src\webpack\bootstrap:43:0)
System.err: at webpackJsonpCallback(file: src\webpack\bootstrap:30:0)
System.err: at (file:///data/data/au.com.xxx.app/files/app/bundle.js:2:57)
System.err: at require(:1:266)
System.err:
System.err:
System.err: TypeError: application.start is not a function
System.err: at com.tns.Runtime.runModule(Native Method)
System.err: at com.tns.Runtime.runModule(Runtime.java:674)
System.err: at com.tns.Runtime.run(Runtime.java:666)
System.err: at com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:21)
System.err: at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1182)
System.err: at android.app.ActivityThread.handleBindApplication(ActivityThread.java:6460)
System.err: ... 8 more
The first three system error lines point to the (initial?) clue:
System.err: An uncaught Exception occurred on "main" thread.
System.err: Unable to create application com.tns.NativeScriptApplication:com.tns.NativeScriptException: Error calling module function
System.err: TypeError: application.start is not a function
I'm guessing in your entry point file (main.ts?) the imports are not correct for NS7.

Nativescript 5 Can not build new app on local machine

Im trying to create a new Nativescript app (with angular), and always getting this error when building on local machine.
I've tested in two diferents machines with the same behavior. If I try to build on the cloud I can execute fine without problems.
In other side, I have an older app with 4.1 version and I can build on local and execute in the emulator without problems.
System.err: android.content.res.Resources$NotFoundException: Resource ID #0xfffffff6
System.err: at android.content.res.Resources.getValue(Resources.java:1351)
System.err: at android.content.res.Resources.loadXmlResourceParser(Resources.java:2774)
System.err: at android.content.res.Resources.getAnimation(Resources.java:1189)
System.err: at android.view.animation.AnimationUtils.loadAnimation(AnimationUtils.java:75)
System.err: at android.support.v4.app.FragmentManagerImpl.loadAnimation(FragmentManager.java:1102)
System.err: at android.support.v4.app.FragmentManagerImpl.moveFragmentToExpectedState(FragmentManager.java:1600)
System.err: at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1641)
System.err: at android.support.v4.app.BackStackRecord.executeOps(BackStackRecord.java:794)
System.err: at android.support.v4.app.FragmentManagerImpl.executeOps(FragmentManager.java:2415)
System.err: at android.support.v4.app.FragmentManagerImpl.executeOpsTogether(FragmentManager.java:2200)
System.err: at android.support.v4.app.FragmentManagerImpl.optimizeAndExecuteOps(FragmentManager.java:2153)
System.err: at android.support.v4.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:2063)
System.err: at android.support.v4.app.FragmentManagerImpl$1.run(FragmentManager.java:725)
System.err: at android.os.Handler.handleCallback(Handler.java:739)
System.err: at android.os.Handler.dispatchMessage(Handler.java:95)
System.err: at android.os.Looper.loop(Looper.java:148)
System.err: at android.app.ActivityThread.main(ActivityThread.java:5417)
System.err: at java.lang.reflect.Method.invoke(Native Method)
System.err: at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
System.err: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)
ActivityManager: Process org.nativescript.testns (pid 14123) has died
EDIT:
Finally I could execute the app. I uninstalled the nativescript npm package and installed again.

Can't compile MediaRouteButton into project

I'm doing in Movie project with CastButton, I completed a sample and this worked perfect. But when I'm doing in true project I have a problem.
I imported compile into my grande file, but when I create MediaRouteButton I have I got error, I tried many ways but I can't fix it, so I now I really need a help:
This is: compile file:
compile 'com.android.support:appcompat-v7:25.0.0'
compile 'com.android.support:mediarouter-v7:25.0.0'
compile 'com.googlecode.android-query:android-query:0.25.9'
compile 'com.google.android.gms:play-services-cast-framework:10.2.0'
this is logcat:
Caused by: java.lang.NoClassDefFoundError: Failed resolution of: Landroid/support/v7/app/MediaRouteButton;
at com.jlabs.pluginplayer.view.MediaPlayerView.addMediaButton(MediaPlayerView.java:533)
at com.jlabs.pluginplayer.view.MediaPlayerView.access$4200(MediaPlayerView.java:53)
at com.jlabs.pluginplayer.view.MediaPlayerView$3.run(MediaPlayerView.java:514)
at android.app.Activity.runOnUiThread(Activity.java:5524)
at com.jlabs.pluginplayer.view.MediaPlayerView.preload(MediaPlayerView.java:490)
at com.jlabs.pluginplayer.PlayerActivity.onResume(PlayerActivity.java:330)
at android.app.Instrumentation.callActivityOnResume(Instrumentation.java:1258)
at android.app.Activity.performResume(Activity.java:6327)
at android.app.ActivityThread.performResumeActivity(ActivityThread.java:3092)
at android.app.ActivityThread.handleResumeActivity(ActivityThread.java:3134)
at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2481)
at android.app.ActivityThread.-wrap11(ActivityThread.java)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1344)
at android.os.Handler.dispatchMessage(Handler.java:102)
at android.os.Looper.loop(Looper.java:148)
at android.app.ActivityThread.main(ActivityThread.java:5417)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)
Caused by: java.lang.ClassNotFoundException: Didn't find class "android.support.v7.app.MediaRouteButton" on path: DexPathList[[zip file "/data/app/jp.tsutayamovie-1/base.apk"],nativeLibraryDirectories=[/data/app/jp.tsutayamovie-1/lib/arm, /data/app/jp.tsutayamovie-1/base.apk!/lib/armeabi-v7a, /vendor/lib, /system/lib]]
at dalvik.system.BaseDexClassLoader.findClass(BaseDexClassLoader.java:56)
at java.lang.ClassLoader.loadClass(ClassLoader.java:511)
at java.lang.ClassLoader.loadClass(ClassLoader.java:469)
at com.jlabs.pluginplayer.view.MediaPlayerView.addMediaButton(MediaPlayerView.java:533) 
at com.jlabs.pluginplayer.view.MediaPlayerView.access$4200(MediaPlayerView.java:53) 
at com.jlabs.pluginplayer.view.MediaPlayerView$3.run(MediaPlayerView.java:514) 
at android.app.Activity.runOnUiThread(Activity.java:5524) 
at com.jlabs.pluginplayer.view.MediaPlayerView.preload(MediaPlayerView.java:490) 
at com.jlabs.pluginplayer.PlayerActivity.onResume(PlayerActivity.java:330) 
at android.app.Instrumentation.callActivityOnResume(Instrumentation.java:1258) 
at android.app.Activity.performResume(Activity.java:6327) 
at android.app.ActivityThread.performResumeActivity(ActivityThread.java:3092) 
at android.app.ActivityThread.handleResumeActivity(ActivityThread.java:3134) 
at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2481) 
at android.app.ActivityThread.-wrap11(ActivityThread.java) 
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1344) 
at android.os.Handler.dispatchMessage(Handler.java:102) 
at android.os.Looper.loop(Looper.java:148) 
at android.app.ActivityThread.main(ActivityThread.java:5417) 
at java.lang.reflect.Method.invoke(Native Method) 
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726) 
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616) 
Suppressed: java.lang.ClassNotFoundException: android.support.v7.app.MediaRouteButton
at java.lang.Class.classForName(Native Method)
at java.lang.BootClassLoader.findClass(ClassLoader.java:781)
at java.lang.BootClassLoader.loadClass(ClassLoader.java:841)
at java.lang.ClassLoader.loadClass(ClassLoader.java:504)
... 20 more
Caused by: java.lang.NoClassDefFoundError: Class not found using the boot class loader; no stack trace available
How can I fix it?
Based from this thread, you are getting that error because of the following reasons:
In your gradle build file, maybe your app is targeting and compiling with the beta version of android that is still in development with:
compileSdkVersion 'android-L'
buildToolsVersion '20'
as well as
minSdkVersion 20
targetSdkVersion 20
First thing to note is that this app will not run correctly (at this time) on any device without android-L flashed to it.
Additional reference: java.lang.NoClassDefFoundError: Failed resolution of: Landroid/support/v4/os/BuildCompat
Check your classpath contains that jar (AppCompat), if your classpath doesn't contain the jar then just add that class in your classpath.
Hope this helps!

Error in .../component1.ng.html:21:93 caused by: this._hammer.Pan is not a constructor at ViewWrappedError.BaseError [as constructor]

I'm trying to use mdTooltip but when I do, I get this error:
Error in .../component1.ng.html:21:93 caused by: this._hammer.Pan is not a constructor at ViewWrappedError.BaseError [as constructor]
I added hammer js to my project but it doesn't work.
Turns out we were using the wrong version of hammerjs for the version of angular/material that we were using.

Failed to find module: "crypto", relative to: /app/tns_modules

I tried using NeDB in NativeScript application, but could do it... it throws error saying this:
Blockquote
java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Failed to find module: "crypto", relative to: /app/tns_modules/ at android.app.ActivityThread.handleBindApplication(ActivityThread.java:4710) at android.app.ActivityThread.-wrap1(ActivityThread.java) at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1405) at android.os.Handler.dispatchMessage(Handler.java:102) at android.os.Looper.loop(Looper.java:148) at android.app.ActivityThread.main(ActivityThread.java:5417) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616) Caused by: com.tns.NativeScriptException: Failed to find module: "crypto", relative to: /app/tns_modules/ at com.tns.Module.resolvePathHelper(Module.java:220) at com.tns.Module.resolvePath(Module.java:60) at com.tns.Runtime.runModule(Native Method) at com.tns.Runtime.runModule(Runtime.java:241) at com.tns.Runtime.run(Runtime.java:235) at com.tns.RuntimeHelper.initRuntime(RuntimeHelper.java:129) at com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:13) at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1013) at android.app.ActivityThread.handleBindApplication(ActivityThread.java:4707) ... 8 more
I first did npm install nedb --save and require it by
var nedb = require('nedb');
How can I fix it?
There are a number of npm modules that would not work because most of the node core modules are not available to use in NativeScript as yet you can track the issue here

Resources