Doesn't seem to be working in NativeScript 7

[natebgurutech]

The readme has instructions for NativeScript 6 or higher but I can't seem to get it to work in a clean NS7 Angular project. With NativeScript 7's release back in August it seems like this plugin should be working. I suspect that NS7 is not working yet as the readme instructs to do things that do not exist or are different now.

Which platform(s) does your issue occur on?

Windows 10 - Android (probably the same issue on iOS)

• CLI: (run tns --version to fetch it) Latest from npm install -g nativescript 7.0.11

Follow the steps provided in the readme:

Create a new project and try to run it with this plugin.

> npm install -g nativescript
> ns create mobile-test-casting --ng
> cd mobile-test-casting
> tns plugin add nativescript-cast

Set the application ID

The strings.xml file does not exist, so create it and set the app_id

(with our own app id, this is the one from the readme)

<!-- App_Resources/Android/src/main/res/values/strings.xml -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
  <string name="app_name">Cast Test</string>
  <string name="title_activity_kimera">Cast Test</string>
  <string name="app_id">4F8B3483</string>
</resources>

Register the activity needed to run the plugin:

<!-- App_Resources/Android/src/main/res/AndroidManifest.xml -->
<activity
  android:name="com.google.android.gms.cast.framework.media.widget.ExpandedControllerActivity"
  android:label="@string/app_name"
  android:launchMode="singleTask"
  android:screenOrientation="portrait">
  <intent-filter>
    <action android:name="android.intent.action.MAIN"/>
  </intent-filter>
  <meta-data
    android:name="android.support.PARENT_ACTIVITY"
    android:value="com.tns.NativeScriptActivity"/>
</activity>

Angular uses webpack so we need to register this plugin in the appComponents list:

// Instructions say to do this
const appComponents = [
  'tns-core-modules/ui/frame',
  'tns-core-modules/ui/frame/activity',
  'nativescript-cast/cast-options-provider'
];

// Auto-generated webpack.config has these variables, so I added it to this
const appComponents = [
  "@nativescript/core/ui/frame",
  "@nativescript/core/ui/frame/activity",
  'nativescript-cast/cast-options-provider'
];

Also webpack wasn't properly seeing the main file so a workaround found is to create a src/package.json

{
  "name": "mobile-test-casting",
  "version": "1.0.0",
  "main": "main.js"
}

(Skipping iOS setup for now because we're just trying to get it working on Android first)

// Add NativescriptCastModule in your app's module imports, typically in app.module.ts.

import { NativescriptCastModule } from 'nativescript-cast/angular';
@NgModule({
  imports: [
    NativescriptCastModule
  ]
});

Simply registering the component and running without even using the component in the HTML

> ns debug android

We get this error:

ERROR in node_modules/nativescript-cast/angular/nativescript-cast.module.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 (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]

Hey, check the ns7 branch.

It should be working. I just haven't made time for final check and release yet.

[natebgurutech]

Oh awesome, thank you for looking at that =)

[natebgurutech]

Hi there, any progress on testing this? In the mean time, I'm attempting to try out the ns7 branch but I'm not very experienced in using git branches in NPM. I've tried the trick where you use the github username/project#branchname when installing it and also I tried editing the package.json file in a similar way and neither of them work, I think it's because the package.json file in this repo is not in the root, it's in the src folder?

I then cloned this repo to my machine and used:

"dependencies": {
  . . .
"nativescript-cast": "file:../nativescript-cast/src",
  . . .
}

It seems to find the files but webpack fails with this error:

C:\Work\nativescript-cast\src\cast-options-provider.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

I tried running some of the build command in the package.json file, like npm run plugin.prepare but I can't seem to get it to build, it can't find the ./cast in cast.common.ts and it can't find "nativescript-cast" in index.ts import { CastButton } from "nativescript-cast";

I'm just not sure how to use this branch

[lochstar]

I've published the new version, note the package is now scoped @codelab/nativescript-cast.

@natebgurutech For future reference, if you're having troubling pointing to the /src directory, another way is to package the plugin by running /package/pack.sh and then pointing your depdency to the tgz file.

e.g.

"@codelab/nativescript-cast": "codelab-nativescript-cast-0.4.0.tgz"

[natebgurutech]

@lochstar Thank you so much for looking into this! You're awesome =)