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..
