Question

我想使用 nativescript-youtubeplayer / nativescript-youtubeplayer-inline npm包在我的本机脚本角度移动应用中播放youtube视频。我已按照https://www.npmjs.com/package/nativescript-youtubeplayer中提供的步骤进行操作当我尝试使用 tns run android --bundle 命令构建应用时，我遇到以下错误。

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

请在下面找到我的项目详细信息：

 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 oss@nativescript.org",
"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"
]
}

我仍然尝试将'target'设置为'es5'。此youtube npm软件包与这些版本兼容吗？请让我知道如何解决此问题。

Answer 1

自从Nativescript 7用于插件以来，这是一个常见错误。 Nativescript最近进行了一些重大更改（例如，他们将编译器选项从“ ES-5”更改为“ ES2017”）。

该插件也必须支持Nativescript 7。

以下是所有说明的网址：https://nativescript.org/blog/nativescript-7-for-plugin-authors/

您必须等到YoutubePlaye插件支持Nativescript 7，否则您可以在YoutubePlaye GitHub项目中创建一个新问题

Answer 2

您能否尝试添加NS 7支持的插件https://www.npmjs.com/package/nativescript-youtubeplayer-inline的分支。

Nativescript-angular :: TypeError：使用nativescript-youtubeplayer npm软件包时，如果没有'new'，则无法调用类构造函数View

2 个答案: