readme instructions not complete for latest NS7 compatibility

[natebgurutech]

Hi there, thanks for your work on updating this to NS7, I'm having issues getting it to work though from following the readme. I apologize if this is from me being a little new to Nativescript. I'm a long time web developer but this project I'm working on is my first NS project.

I am trying to get the latest version working in Android first before trying iOS, I followed all of the instructions for getting it to work in my app and there were a few errors, so I tried it with a new blank Angular app from the cli ns create (angular -> hello world app).

Lets make sure I followed the readme right. The webpack config file change is where I think the issue might be, but I'm not sure.

Installed the latest version with the new npm key ns plugin add @codelab/nativescript-cast

added the app_id to my strings.xml <string name="app_id">MY KEY HERE</string>

Added the ExpandedControllerActivity to my manifest (it is a copy paste in the readme)

running > ns debug android does not fail at this point, it builds and runs.

The webpack config demo link for a custom webpack.config is broken: https://github.com/lochstar/nativescript-cast/blob/master/demo/webpack.config.custom.js

so I did what we did in NS6 and added it to the existing webpack like this:

  // Add your custom Activities, Services and other Android app components here.
  const appComponents = [
    "@nativescript/core/ui/frame",
    "@nativescript/core/ui/frame/activity",
    "@codelab/nativescript-cast/cast-options-provider"
  ];

At this point the build fails with this error (well it builds but when it launches it says this and we get that error screen on the phone):

Project successfully built.
The build result is located at: C:\Work\wilmafit\chromecast-test\platforms\android\app\build\outputs\apk\debug\app-debug.apk
Installing on device ZY227ZDZDW...
Successfully installed on device with identifier 'ZY227ZDZDW'.
Restarting application on device ZY227ZDZDW...
System.err: An uncaught Exception occurred on "main" thread.
System.err: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Application entry point file not found. Please specify the file in package.json otherwise make sure the file index.js or bootstrap.js exists.\nIf using typescript make sure your entry point file is transpiled to javascript.  
System.err: 
System.err: StackTrace:
System.err: java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Application entry point file not found. Please specify the file in package.json otherwise make sure the file index.js or bootstrap.js exists.\nIf using typescript make sure your entry point file is transpiled to javascript.
System.err:     at android.app.ActivityThread.handleBindApplication(ActivityThread.java:6713)
System.err:     at android.app.ActivityThread.access$1400(ActivityThread.java:232)
System.err:     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2014)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:107)
System.err:     at android.os.Looper.loop(Looper.java:241)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:7617)
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:941)
System.err: Caused by: com.tns.NativeScriptException: Application entry point file not found. Please specify the file in package.json otherwise make sure the file index.js or bootstrap.js exists.\nIf using typescript make sure your entry point file is transpiled to javascript.
System.err:     at com.tns.Module.bootstrapApp(Module.java:316)
System.err:     at com.tns.Runtime.run(Runtime.java:680)
System.err:     at com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:21)
System.err:     at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1211)    
System.err:     at android.app.ActivityThread.handleBindApplication(ActivityThread.java:6708)        
System.err:     ... 8 more
System.err: Caused by: com.tns.NativeScriptException: Failed to find module: "./", relative to: app//
System.err:     at com.tns.Module.resolvePathHelper(Module.java:151)
System.err:     at com.tns.Module.bootstrapApp(Module.java:314)
System.err:     ... 12 more

When we do register the the NativescriptCastModule

import { NativescriptCastModule } from '"@codelab/nativescript-cast/angular';

@NgModule({
  imports: [NativescriptCastModule]
});

at this point I tried to > ns debug android

and I get this error:

ERROR in The target entry-point "nativescript-cast-angular" has missing dependencies:
 - nativescript-cast

File change detected. Starting incremental webpack compilation...
Hash: caa9a2b984fd90bbc9fd
Version: webpack 4.44.2
Time: 400ms
Built at: 12/16/2020 1:28:44 PM
 3 assets
Entrypoint bundle = runtime.js vendor.js bundle.js
   335 modules

ERROR in The target entry-point "nativescript-cast-angular" has missing dependencies:
 - nativescript-cast

Error: node_modules/@codelab/nativescript-cast/angular/index.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the library (@codelab/nativescript-cast/angular) which declares NativescriptCastModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the 
library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

1 export declare class NativescriptCastModule {

[lochstar]

Thanks for pointing out the missing webpack.config.custom.js. It was being ignored by .gitignore. It's checked in now. The Android demos probably wouldn't have worked without it.

There's a good chance I've messed up the Angular distribution. A lot changed with NS7 and I'm not an Angular guy. The Angular demo is working however, have you tried to get it running?

I'll take a closer look at the error above.

[lochstar]

I've just published 0.4.1. One of the Angular paths was incorrect. It should fix ERROR in The target entry-point "nativescript-cast-angular" has missing dependencies: - nativescript-cast. Let me know how you go.

[natebgurutech]

I cloned the repo and tested running the angular demo app, it fails on building because 4 the functions referenced in the HTML needed to have $event handed in, like this:

<Button
  text="&#xff04b; Play"
  (onTap)="handlePlayTap($event)"
  class="-primary fas"
  isEnabled="{{ canCast }}"
></Button>

Then it has more success building but gives this note:

Note: webpack.config.js is different than the suggested @nativescript/webpack config at C:\Work\nativescript-cast\demo-angular\node_modules\@nativescript\webpack\templates\webpack.angular.js.
If you have build trouble you can update to latest config using "./node_modules/.bin/update-ns-webpack --configs" command.

and this error:

ERROR in ../src/cast.common.ts:4:15 - error TS2307: Cannot find module './cast' or its corresponding type declarations.

4 export * from './cast';
                ~~~~~~~~
../src/angular/index.ts:3:28 - error TS2307: Cannot find module '@codelab/nativescript-cast' or its corresponding type declarations.

3 import { CastButton } from "@codelab/nativescript-cast";
                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@codelab/nativescript-cast/angular/index.ts:3:28 - error TS2307: Cannot find module '@codelab/nativescript-cast' or its corresponding type declarations.

I then attempted

1. removing the "@codelab/nativescript-cast": "file:../src", line in package.json and
2. running ns plugin add @codelab/nativescript-cast to get the latest version from npm

this resulted in:

ERROR in ../src/cast.common.ts:4:15 - error TS2307: Cannot find module './cast' or its corresponding type declarations.

4 export * from './cast';

while it was building but it gets over-written by the next build steps, so you need to look at it quickly, then it results in:

System.err: An uncaught Exception occurred on "main" thread.
System.err: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Application entry point file not found. Please specify the file in package.json otherwise make sure the file index.js or bootstrap.js exists.\nIf using typescript make sure your entry point file is transpiled to javascript.
System.err:
System.err: StackTrace:
System.err: java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Application entry point file not found. Please specify the file in package.json otherwise make sure the file index.js or bootstrap.js exists.\nIf using typescript make sure your entry point file is transpiled to javascript.
System.err:     at android.app.ActivityThread.handleBindApplication(ActivityThread.java:6713)
System.err:     at android.app.ActivityThread.access$1400(ActivityThread.java:232)
System.err:     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2014)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:107)
System.err:     at android.os.Looper.loop(Looper.java:241)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:7617)
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:941)
System.err: Caused by: com.tns.NativeScriptException: Application entry point file not found. Please specify the file in package.json otherwise make sure the file index.js or bootstrap.js exists.\nIf using typescript make sure your entry point file 
is transpiled to javascript.
System.err:     at com.tns.Module.bootstrapApp(Module.java:316)
System.err:     at com.tns.Runtime.run(Runtime.java:680)
System.err:     at com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:21)
System.err:     at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1211)
System.err:     at android.app.ActivityThread.handleBindApplication(ActivityThread.java:6708)
System.err:     ... 8 more
System.err: Caused by: com.tns.NativeScriptException: Failed to find module: "./", relative to: app//
System.err:     at com.tns.Module.resolvePathHelper(Module.java:151)
System.err:     at com.tns.Module.bootstrapApp(Module.java:314)
System.err:     ... 12 more

I then tried to add the latest version of the plugin to my blank new ns create angular => "hello world" app using following the latest instructions and I get this error:

Project successfully built.
The build result is located at: C:\Work\chromecast-test\platforms\android\app\build\outputs\apk\debug\app-debug.apk
Installing on device ZY227ZDZDW...
Successfully installed on device with identifier 'ZY227ZDZDW'.
Restarting application on device ZY227ZDZDW...
System.err: An uncaught Exception occurred on "main" thread.
System.err: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Application entry point file not found. Please specify the file in package.json otherwise make sure the file index.js or bootstrap.js exists.\nIf using typescript make sure your entry point file is transpiled to javascript.
System.err: 
System.err: StackTrace:
System.err: java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Application entry point file not found. Please specify the file in package.json otherwise make sure the file index.js or bootstrap.js exists.\nIf using typescript make sure your entry point file is transpiled to javascript.
System.err:     at android.app.ActivityThread.handleBindApplication(ActivityThread.java:6713)
System.err:     at android.app.ActivityThread.access$1400(ActivityThread.java:232)
System.err:     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2014)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:107)
System.err:     at android.os.Looper.loop(Looper.java:241)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:7617)
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:941)
System.err: Caused by: com.tns.NativeScriptException: Application entry point file not found. Please specify the file in package.json otherwise make sure the file index.js or bootstrap.js exists.\nIf using typescript make sure your entry point file is transpiled to 
javascript.
System.err:     at com.tns.Module.bootstrapApp(Module.java:316)
System.err:     at com.tns.Runtime.run(Runtime.java:680)
System.err:     at com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:21)
System.err:     at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1211)
System.err:     at android.app.ActivityThread.handleBindApplication(ActivityThread.java:6708)
System.err:     ... 8 more
System.err: Caused by: com.tns.NativeScriptException: Failed to find module: "./", relative to: app//
System.err:     at com.tns.Module.resolvePathHelper(Module.java:151)
System.err:     at com.tns.Module.bootstrapApp(Module.java:314)
System.err:     ... 12 more
Unable to apply changes on device: ZY227ZDZDW. Error is: The application org.nativescript.chromecasttest does not appear to be running on ZY227ZDZDW or is not built with debugging enabled. Try starting the application manually..

[natebgurutech]

I'm sorry I didn't mean to close the issue, I meant to delete a half comment I didn't mean to post, would you mind re-opening this for me?

[natebgurutech]

Also, I have time tomorrow any time if you would like to do a screen share to get this ironed out. I tried to PM you but can't seem to find how to do it in github, if there even is a way. If that is an option I would like to still post the solution here for posterity. I don't know if that's bad form haha

[lochstar]

I've fixed up the angular demo default webpack config. It runs successfully on iOS:

cd src/
npm run demo-angular.reset
npm run demo-angular.ios

[natebgurutech]

ok I pulled and ran the npm run demo-angular.reset but I'm on windows and don't have access to an iPhone and a mac until my co-worker comes in tomorrow.

I ran npm run demo-angular.android and I get this error:

cast.common.ts:4:15 - error TS2307: Cannot find module './cast' or its corresponding type declarations.

4 export * from './cast';

[lochstar]

Does it break anything if you comment that line out?

The Android Angular demo crashes for me anyway. The regular one works. Like I said, I'm not an Angular guy. Might need some help fixing it up.

[natebgurutech]

ok I commented that out and I get this error:

ERROR in ../src/angular/index.ts:3:28 - error TS2307: Cannot find module '@codelab/nativescript-cast' or its corresponding type declarations.

3 import { CastButton } from "@codelab/nativescript-cast";
                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@codelab/nativescript-cast/angular/index.ts:3:28 - error TS2307: Cannot find module '@codelab/nativescript-cast' or its corresponding type declarations.

3 import { CastButton } from "@codelab/nativescript-cast";
                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

I think you were on the right track exporting the ./cast line especially if it's working on iOS. Are you building with the latest version of nativescript? I'm attempting it on 7.0.11

Also, I do have quite a bit of angular experience, just not nativescript!

[natebgurutech]

I accidentally did a git reset --hard on my larger project instead of my test project, I'll try it out with the

registerElement('CastButton', () => require('@codelab/nativescript-cast').CastButton);

style import, I seemed to have some luck there before I did that.

[natebgurutech]

ok I tried it in my bigger project using the Angular import and I kind of got some headway.

When my reciever was ready:

switch (args.data.eventName) {
      case 'onSessionStarted':
      case 'onSessionResumed':
        this.canCast = true;
        this.loadMedia();
        break;

loadMedia() {
    const media: CastMediaInfo = {
      contentId: 'https://amssamples.streaming.mediaservices.windows.net/bc57e088-27ec-44e0-ac20-a85ccbcd50da/TearsOfSteel.ism/manifest',
      contentType: 'application/vnd.ms-sstr+xml',
      streamType: StreamType.BUFFERED,
      duration: 50,
      metadata: {
        metadataType: MetadataType.MOVIE,
        title: 'Tears of Steel',
        subtitle: 'By Blender Foundation',
        description: 'Tears of Steel is licensed as Creative Commons Attribution 3.0.',
        images: [
          {
            url: 'https://storage.googleapis.com/gtv-videos-bucket/sample/images_480x270/TearsOfSteel.jpg',
            width: 480,
            height: 270,
          },
          {
            url: 'https://storage.googleapis.com/gtv-videos-bucket/sample/images_780x1200/TearsOfSteel-780x1200.jpg',
            width: 780,
            height: 1200,
          }
        ]
      },
      textTracks: [
        {
          src: 'https://amssamples.streaming.mediaservices.windows.net/bc57e088-27ec-44e0-ac20-a85ccbcd50da/TOS-en.vtt',
          contentType: 'text/vtt',
          name: 'English',
          language: 'en'
        },
        {
          src: 'https://amssamples.streaming.mediaservices.windows.net/bc57e088-27ec-44e0-ac20-a85ccbcd50da/TOS-es.vtt',
          contentType: 'text/vtt',
          name: 'Spanish',
          language: 'es'
        }
      ]
    };

    const mediaOptions = {
      autoplay: true,
      playbackRate: 1,
      startTime: 0,
    };
    // this.cast.loadMedia(media, mediaOptions);
    this.cast.loadMedia(media);
    console.log('Loaded media')
    this.mediaLoaded = true;
  }

if I don't give it these mediaOptions it fails with:

JS: ERROR TypeError: Cannot read property 'autoplay' of undefined

and if I give it the mediaOptions I get this error:

JS: eventName: onDeviceChanged
JS: ERROR TypeError: Cannot read property 'getRemoteMediaClient' of null
JS: eventName: onProviderChanged
JS: ERROR TypeError: Cannot read property 'getRemoteMediaClient' of null
JS: eventName: onRouteUnselected
JS: ERROR TypeError: Cannot read property 'getRemoteMediaClient' of null
JS: eventName: onSessionStarting
JS: ERROR TypeError: Cannot read property 'registerCallback' of null
JS: eventName: onRouteSelected
JS: ERROR TypeError: Cannot read property 'registerCallback' of null
JS: eventName: onDeviceChanged
JS: ERROR TypeError: Cannot read property 'registerCallback' of null
JS: eventName: onProviderChanged
JS: ERROR TypeError: Cannot read property 'registerCallback' of null
JS: eventName: onDeviceChanged
JS: ERROR TypeError: Cannot read property 'registerCallback' of null
JS: eventName: onDeviceVolumeChanged
JS: ERROR TypeError: Cannot read property 'registerCallback' of null
JS: eventName: onProviderChanged
JS: ERROR TypeError: Cannot read property 'registerCallback' of null
JS: eventName: onDeviceChanged
JS: ERROR TypeError: Cannot read property 'registerCallback' of null
JS: eventName: onDeviceVolumeChanged
JS: ERROR TypeError: Cannot read property 'registerCallback' of null
JS: eventName: onProviderChanged
JS: ERROR TypeError: Cannot read property 'registerCallback' of null
JS: eventName: onDeviceChanged
JS: ERROR TypeError: Cannot read property 'registerCallback' of null
JS: eventName: onProviderChanged
JS: ERROR TypeError: Cannot read property 'registerCallback' of null
JS: eventName: onSessionStarted
JS: Loaded media
JS: Loaded media
JS: eventName: onDeviceChanged
JS: eventName: onProviderChanged
System.err: An uncaught Exception occurred on "main" thread.
System.err: Calling js method onStatusUpdated failed
System.err: TypeError: Cannot read property 'getName' of null
System.err:
System.err: StackTrace:
System.err: onMediaStatusUpdate(file: node_modules\@codelab\nativescript-cast\cast.android.js:533:0)
System.err:     at push.../node_modules/@codelab/nativescript-cast/remote-media-client-callback.android.js.RemoteMediaClientCallback.onStatusUpdated(file: node_modules\@codelab\nativescript-cast\remote-media-client-callback.android.js:9:0)
System.err:     at com.tns.Runtime.callJSMethodNative(Native Method)
System.err:     at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1302)
System.err:     at com.tns.Runtime.callJSMethodImpl(Runtime.java:1188)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1175)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1153)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1149)
System.err:     at com.tns.gen.com.google.android.gms.cast.framework.media.RemoteMediaClient_Callback_vendor_91845_28_RemoteMediaClientCallback.onStatusUpdated(RemoteMediaClient_Callback_vendor_91845_28_RemoteMediaClientCallback.java:18)
System.err:     at com.google.android.gms.cast.framework.media.zzu.onStatusUpdated(com.google.android.gms:play-services-cast-framework@@19.0.0:8)
System.err:     at com.google.android.gms.cast.internal.zzak.onStatusUpdated(com.google.android.gms:play-services-cast@@19.0.0:606)
System.err:     at com.google.android.gms.cast.internal.zzak.zzx(com.google.android.gms:play-services-cast@@19.0.0:501)
System.err:     at com.google.android.gms.cast.framework.media.RemoteMediaClient.onMessageReceived(com.google.android.gms:play-services-cast-framework@@19.0.0:393)
System.err:     at com.google.android.gms.cast.zzbg.run(com.google.android.gms:play-services-cast@@19.0.0:6)
System.err:     at android.os.Handler.handleCallback(Handler.java:883)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:100)
System.err:     at android.os.Looper.loop(Looper.java:241)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:7617)
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:941)

[natebgurutech]

It is possible I don't understand how to use the library now, at what point should I load the media?

[natebgurutech]

Oh and this DOES play the video on my chromecast but it crashes my app

[lochstar]

It is possible I don't understand how to use the library now, at what point should I load the media?

Best to look at the regular demo app: onSessionStarted & onSessionResumed.

[natebgurutech]

I apologize for leaving this hanging, I got pulled to another project temporarily. I didn't get it working yet but I'll be getting back to make sure I get this working for NS7 in Angular within a few days.

[natebgurutech]

ok I had a little more time to poke at this, my client really needs this working in Angular.

I'm still just trying to get it working on Android for now. It seems like I made a very small amount of progress but for the number of hours I've spent playing with this I don't have much to show for it.

I spent a while trying to fix the errors in the Angular demo app but I'm just not NativeScript savvy enough to fix it. There are native Android java errors that happen. I would really love to see the readme show what to do for an Angular app, the readme currently is just not enough information and/or the demo is broken and is a bad example.

The demo app (non-Angular) only plays media if you "Load Queue", "Load Media" crashes if options.playbackRate is not set and if you set that value "Load Media" does nothing. It would probably be a good thing to default this value to 1 in the library code so it at least does not crash but I'm not sure what it is supposed to be doing as it just doesn't do anything.

I've been poring over the example code (non Angular) to see how things should be done and it looks like I'm doing everything properly.

I've got it so my chromecast will wake up and sit there ready because I called the cast.loadQueue function, but it does nothing but look ready to accept something. If I run the app using ns debug android I can hit ctrl+s in a file, the system recognizes a file change and reloads the app, then if I try to cast.loadQueue again it plays my video on my chromecast.

So it does these steps:

- ns debug android
- - call cast.loadQueue({params})
- - - (chromecast looks ready)
- ctrl+s
- - call cast.loadQueue({params})
- - - (chromecast plays video)

Maybe something stays loaded and the second time I call the cast.loadQueue function it plays what I want since I'm running it with ns debug Android. Maybe the Observable view-model isn't a good comparison to an Angular component; they are similar and you would expect that they would be a good one to one comparison.

Either way, having a working Angular example would be extremely helpful. Unless that is, if this pattern give you a hint as to something I missed?

[natebgurutech]

I just realized something from loading up the demo app (non-angular). When the page loads up I get this output:

and if I comment out this code

## main-page.xml ##
<!-- <cast:CastButton
          id="cast"
          color="#ffffff"
          cast="{{ handleCastEvent }}"
        /> -->

Nothing prints at all on load. The existence of the button causes it to do a bunch of stuff and be ready.

My Angular app does the exact same thing as commenting out the button in the example app. The same as if the button is not present in the demo app.