Components: bug(Angular YouTube Player): Class constructor YouTubePlayer cannot be invoked without 'new'

[codingmoi]

I installed the component @angular/youtube-player in a new angular 9 application. When I include the package I get these errors:

youtube-player.js:388 Uncaught TypeError: Class constructor YouTubePlayer cannot be invoked without 'new'
at Module../node_modules/@angular/youtube-player/__ivy_ngcc__/fesm2015/youtube-player.js (youtube-player.js:388)
at __webpack_require__ (bootstrap:79)
at Module../src/app/app.module.ts (app.module.ts:1)
at __webpack_require__ (bootstrap:79)
at Module../src/main.ts (main.ts:1)
at __webpack_require__ (bootstrap:79)
at Object.0 (main.ts:12)
at __webpack_require__ (bootstrap:79)
at checkDeferredModules (bootstrap:45)
at Array.webpackJsonpCallback [as push] (bootstrap:32)

This is my package.json

{
"name": "yt-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~9.1.9",
"@angular/common": "~9.1.9",
"@angular/compiler": "~9.1.9",
"@angular/core": "~9.1.9",
"@angular/forms": "~9.1.9",
"@angular/platform-browser": "~9.1.9",
"@angular/platform-browser-dynamic": "~9.1.9",
"@angular/router": "~9.1.9",
"@angular/youtube-player": "^10.0.1",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.901.7",
"@angular/cli": "~9.1.7",
"@angular/compiler-cli": "~9.1.9",
"@types/node": "^12.11.1",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~3.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.8.3"
}
}

[virendrapatel62]

Same Problem

[mahmoudshawkat]

Had same issue, as a temporary workaround, I used version:

npm i @angular/[email protected]

and it worked fine

[jelbourn]

Here's a working instance with v10: https://stackblitz.com/edit/angular-ivy-abnbxa?file=src%2Findex.html

Can anyone provide a reproduction?

[codingmoi]

@mahmoudshawkat What's you current Angular Cli version?

[codingmoi]

@jelbourn I updated to Angular CLI 10.02 and the player works the first time the angular project starts. Afterward when the page refresh I got a new error.

core.js:4081 ERROR TypeError: YT.Player is not a constructor
at youtube-player.js:511
at ZoneDelegate.invoke (zone-evergreen.js:364)
at Zone.run (zone-evergreen.js:123)
at NgZone.runOutsideAngular (core.js:27076)
at ScanSubscriber.syncPlayerState [as accumulator] (youtube-player.js:511)
at ScanSubscriber._tryNext (scan.js:49)
at ScanSubscriber._next (scan.js:42)
at ScanSubscriber.next (Subscriber.js:49)
at MapSubscriber._next (map.js:35)
at MapSubscriber.next (Subscriber.js:49)

This is the project yt-app.zip

[codingmoi]

I just got the solution...after updating Angular CLI to the latest version 10.0.2 and installing youtube-player latest version 10.0.1. The component was working first time only, then when refreshing the page I was getting

ERROR TypeError: YT.Player is not a constructor

It looked like a synchronism issue between the iframe API and the youtube-player component when the iframe API Js code has executed the component didn't exist yet.

The solution was removing <script src="https://www.youtube.com/iframe_api"></script> from the head section and adding OnInit hook to the main angular component:

ngOnInit(): void {
    const tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
    document.body.appendChild(tag);
  }

This way when the component already exists the iframe API is loaded without trouble.

[JMainol]

Had same issue, as a temporary workaround, I used version:

npm i @angular/[email protected]

and it worked fine

I installed the exactly same version for @angular/google-maps and worked!
Thanks

[devversion]

It looks like this issue mixes two separate problems. i.e. one time about YT.Player not being available, and the YoutubePlayer class not being "new-able". This issue seems to be about the latter here. For the other one please create a separate issue.

Either way, I think this might have been a past issue with the Angular compiler where it didn't emit the proper new keyword. Running the youtube-player now with the latest version of ngcc, I can see the use of the new keyword as expected.

YouTubePlayer.ɵfac = function YouTubePlayer_Factory(t) {
  return new (t || YouTubePlayer)(ɵngcc0.ɵɵdirectiveInject(ɵngcc0.NgZone),
     ɵngcc0.ɵɵdirectiveInject(PLATFORM_ID));
};

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}