Nativescript-angular:: TypeError: Class constructor View cannot be invoked without 'new' while using nativescript-youtubeplayer npm package

Question

I wanted to use the nativescript-youtubeplayer / nativescript-youtubeplayer-inline npm package to play youtube videos in my nativescript-angular mobile app. I've followed the steps provided at https://www.npmjs.com/package/nativescript-youtubeplayer When i'm trying to build my app using tns run android --bundle command, I'm facing the below error..

*JS: ERROR Error: Uncaught (in promise): TypeError: Class constructor View cannot be invoked without 'new'
JS: TypeError: Class constructor View cannot be invoked without 'new'
JS: at new YoutubePlayerBase (file:///data/user/0/org.nativescript.nsngsample/files/app/vendor.js:154484:42)
JS: at new YoutubePlayer (file:///data/user/0/org.nativescript.nsngsample/files/app/vendor.js:154511:1)
JS: at ViewUtil.createView (file:///data/user/0/org.nativescript.nsngsample/files/app/vendor.js:93506:22)
JS: at NativeScriptRenderer.createElement (file:///data/user/0/org.nativescript.nsngsample/files/app/vendor.js:93706:30)
JS: at elementCreate (file:///data/user/0/org.nativescript.nsngsample/files/app/vendor.js:50479:25)
JS: at ɵɵelementStart (file:///data/user/0/org.nativescript.nsngsample/files/app/vendor.js:58110:43)
JS: at Module.ɵɵelement (file:///data/user/0/org.nativescript.nsngsample/files/app/vendor.js:58187:5)
JS: at AppTabsComponent_Template (file:///data/user/0/org.nativescript.nsngsample/files/app/bundle.js:138:64)...*

Please find below my project details:

 Angular CLI: 10.2.0
    Node: 12.19.0
    OS: win32 x64
    
    Angular: 10.1.6
    ... animations, common, compiler, compiler-cli, core, forms
    ... platform-browser, platform-browser-dynamic, router
    Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.1002.0
@angular-devkit/core 10.2.0
@angular-devkit/schematics 10.2.0
@angular/cli 10.2.0
@ngtools/webpack 10.1.7
@schematics/angular 10.2.0
@schematics/update 0.1002.0
rxjs 6.6.3
typescript 3.9.7

Package.json:

{
"name": "@nativescript/template-hello-world-ng",
"main": "main.js",
"version": "7.0.2",
"author": "NativeScript Team [email protected]",
"description": "NativeScript Application",
"license": "SEE LICENSE IN ",
"publishConfig": {
"access": "public"
},
"keywords": [
"nativescript",
"mobile",
"angular",
"{N}",
"template"
],
"repository": "",
"bugs": {
"url": "https://github.com/NativeScript/NativeScript/issues"
},
"scripts": {
"ngcc": "ngcc --properties es2015 module main --first-only",
"postinstall": "npm run ngcc"
},
"dependencies": {
"@angular/animations": "~10.1.0",
"@angular/cli": "^10.1.7",
"@angular/common": "~10.1.0",
"@angular/compiler": "~10.1.0",
"@angular/core": "~10.1.0",
"@angular/forms": "~10.1.0",
"@angular/platform-browser": "~10.1.0",
"@angular/platform-browser-dynamic": "~10.1.0",
"@angular/router": "~10.1.0",
"@nativescript/angular": "~10.1.0",
"@nativescript/core": "~7.0.0",
"@nativescript/schematics": "^10.1.0",
"@nativescript/theme": "~2.3.0",
"nativescript-ui-sidedrawer": "^9.0.3",
"nativescript-youtubeplayer": "^3.0.1",
"nativescript-youtubeplayer-inline": "^53.0.1",
"reflect-metadata": "~0.1.12",
"rxjs": "^6.6.0",
"zone.js": "~0.11.1"
},
"devDependencies": {
"@angular/compiler-cli": "~10.1.0",
"@nativescript/android": "7.0.0",
"@nativescript/types": "~7.0.0",
"@nativescript/webpack": "~3.0.0",
"@ngtools/webpack": "~10.1.0",
"typescript": "~3.9.0"
},
"private": "true",
"readme": "NativeScript Application"
}

tsconfig.json:

{
"compilerOptions": {
"module": "ESNext",
"target": "ESNext",
"moduleResolution": "node",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"noEmitHelpers": true,
"noEmitOnError": true,
"skipLibCheck": true,
"lib": [
"es2018", "es2017", "dom", "es6"
],
"baseUrl": ".",
"paths": {
"~/": [
"app/"
]
}
},
"include": [
"src/tests//*.ts",
"src//.ios.ts",
"src/**/.android.ts"
],
"files": [
"./references.d.ts",
"./src/main.ts"
],
"exclude": [
"node_modules",
"platforms",
"e2e"
]
}

I tried setting 'target' to 'es5' still facing the issue.. Is this youtube npm package compatible with these versions? Please let me know how to fix this issue..

Answer 1

Could you try my fork of the plugin https://www.npmjs.com/package/nativescript-youtubeplayer-inline with NS 7 support added.

Answer 2

It is a common error since Nativescript 7 for plugins. Nativescript recently introduced some big changes (for example they changed the compiler option from "ES-5" to "ES2017").

The plugin must support Nativescript 7 too.

Here's the URL with all the instructions: https://nativescript.org/blog/nativescript-7-for-plugin-authors/

you have to wait until YoutubePlaye plugin support Nativescript 7 or you can create a new issue in YoutubePlaye GitHub project