Open rollafox opened 6 years ago
I am having the same issue as I am using this library in my project for live streaming but as I did a angular universal build having errors as these
<pre>TypeError: Cannot read property 'unsubscribe' of undefined<br> at VgMedia.ngOnDestroy (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:198117:26)<br> at callProviderLifecycles (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:26429:18)<br> at callElementProvidersLifecycles (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:26397:13)<br> at callLifecycleHooksChildrenFirst (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:26387:29)<br> at destroyView (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:27449:5)<br> at callViewAction (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:27575:13)<br> at execEmbeddedViewsAction (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:27518:17)<br> at destroyView (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:27447:5)<br> at callViewAction (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:27575:13)<br> at execComponentViewsAction (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:27497:13)</pre>
--
If there is any update, please let me know.
I am having the same issue as I am using this library in my project for live streaming but as I did a angular universal build having errors as these
<pre>TypeError: Cannot read property 'unsubscribe' of undefined<br> at VgMedia.ngOnDestroy (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:198117:26)<br> at callProviderLifecycles (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:26429:18)<br> at callElementProvidersLifecycles (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:26397:13)<br> at callLifecycleHooksChildrenFirst (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:26387:29)<br> at destroyView (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:27449:5)<br> at callViewAction (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:27575:13)<br> at execEmbeddedViewsAction (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:27518:17)<br> at destroyView (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:27447:5)<br> at callViewAction (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:27575:13)<br> at execComponentViewsAction (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:27497:13)</pre> --
If there is any update, please let me know.
I made it fixed by replacing the vgMedia.prorotype.ngOnDistroy method in my server.js file with this
VgMedia.prototype.ngOnDestroy = function () {
this.vgMedia.src = '';
if(this.mutationObs)
this.mutationObs.unsubscribe();
if(this.canPlayObs)
this.canPlayObs.unsubscribe();
if(this.canPlayThroughObs)
this.canPlayThroughObs.unsubscribe();
if(this.loadedMetadataObs)
this.loadedMetadataObs.unsubscribe();
if(this.waitingObs)
this.waitingObs.unsubscribe();
if(this.progressObs)
this.progressObs.unsubscribe();
if(this.endedObs)
this.endedObs.unsubscribe();
if(this.playingObs)
this.playingObs.unsubscribe();
if(this.playObs)
this.playObs.unsubscribe();
if(this.pauseObs)
this.pauseObs.unsubscribe();
if(this.timeUpdateObs)
this.timeUpdateObs.unsubscribe();
if(this.volumeChangeObs)
this.volumeChangeObs.unsubscribe();
if(this.errorObs)
this.errorObs.unsubscribe();
if (this.checkBufferSubscription) {
this.checkBufferSubscription.unsubscribe();
}
if (this.syncSubscription) {
this.syncSubscription.unsubscribe();
}
this.bufferDetected.complete();
this.bufferDetected.unsubscribe();
this.api.unregisterMedia(this);
};
Original was this:
VgMedia.prototype.ngOnDestroy = function () {
this.vgMedia.src = '';
this.mutationObs.unsubscribe();
this.canPlayObs.unsubscribe();
this.canPlayThroughObs.unsubscribe();
this.loadedMetadataObs.unsubscribe();
this.waitingObs.unsubscribe();
this.progressObs.unsubscribe();
this.endedObs.unsubscribe();
this.playingObs.unsubscribe();
this.playObs.unsubscribe();
this.pauseObs.unsubscribe();
this.timeUpdateObs.unsubscribe();
this.volumeChangeObs.unsubscribe();
this.errorObs.unsubscribe();
if (this.checkBufferSubscription) {
this.checkBufferSubscription.unsubscribe();
}
if (this.syncSubscription) {
this.syncSubscription.unsubscribe();
}
this.bufferDetected.complete();
this.bufferDetected.unsubscribe();
this.api.unregisterMedia(this);
};
I am having the same issue as I am using this library in my project for live streaming but as I did a angular universal build having errors as these
<pre>TypeError: Cannot read property 'unsubscribe' of undefined<br> at VgMedia.ngOnDestroy (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:198117:26)<br> at callProviderLifecycles (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:26429:18)<br> at callElementProvidersLifecycles (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:26397:13)<br> at callLifecycleHooksChildrenFirst (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:26387:29)<br> at destroyView (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:27449:5)<br> at callViewAction (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:27575:13)<br> at execEmbeddedViewsAction (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:27518:17)<br> at destroyView (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:27447:5)<br> at callViewAction (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:27575:13)<br> at execComponentViewsAction (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:27497:13)</pre> --
If there is any update, please let me know.
I made it fixed by replacing the vgMedia.prorotype.ngOnDistroy method in my server.js file with this
VgMedia.prototype.ngOnDestroy = function () { this.vgMedia.src = ''; if(this.mutationObs) this.mutationObs.unsubscribe(); if(this.canPlayObs) this.canPlayObs.unsubscribe(); if(this.canPlayThroughObs) this.canPlayThroughObs.unsubscribe(); if(this.loadedMetadataObs) this.loadedMetadataObs.unsubscribe(); if(this.waitingObs) this.waitingObs.unsubscribe(); if(this.progressObs) this.progressObs.unsubscribe(); if(this.endedObs) this.endedObs.unsubscribe(); if(this.playingObs) this.playingObs.unsubscribe(); if(this.playObs) this.playObs.unsubscribe(); if(this.pauseObs) this.pauseObs.unsubscribe(); if(this.timeUpdateObs) this.timeUpdateObs.unsubscribe(); if(this.volumeChangeObs) this.volumeChangeObs.unsubscribe(); if(this.errorObs) this.errorObs.unsubscribe(); if (this.checkBufferSubscription) { this.checkBufferSubscription.unsubscribe(); } if (this.syncSubscription) { this.syncSubscription.unsubscribe(); } this.bufferDetected.complete(); this.bufferDetected.unsubscribe(); this.api.unregisterMedia(this); };
Original was this:
VgMedia.prototype.ngOnDestroy = function () { this.vgMedia.src = ''; this.mutationObs.unsubscribe(); this.canPlayObs.unsubscribe(); this.canPlayThroughObs.unsubscribe(); this.loadedMetadataObs.unsubscribe(); this.waitingObs.unsubscribe(); this.progressObs.unsubscribe(); this.endedObs.unsubscribe(); this.playingObs.unsubscribe(); this.playObs.unsubscribe(); this.pauseObs.unsubscribe(); this.timeUpdateObs.unsubscribe(); this.volumeChangeObs.unsubscribe(); this.errorObs.unsubscribe(); if (this.checkBufferSubscription) { this.checkBufferSubscription.unsubscribe(); } if (this.syncSubscription) { this.syncSubscription.unsubscribe(); } this.bufferDetected.complete(); this.bufferDetected.unsubscribe(); this.api.unregisterMedia(this); };
This worked for me. Thanks. Should this be implemented into videogular2 by default?
Description
Angular Universal build with Videogular2 fails at runtime, note:
ng serve
(as per angualr-cli) still works as expected, the error only occurs usingnpm run serve:ssr
(as per angular-universal). Using versions as follows:"@angular/animations": "^5.0.0", "@angular/common": "^5.0.0", "@angular/compiler": "^5.0.0", "@angular/core": "^5.0.0", "@angular/forms": "^5.0.0", "@angular/http": "^5.0.0", "@angular/platform-browser": "^5.0.0", "@angular/platform-browser-dynamic": "^5.0.0", "@angular/platform-server": "^5.0.3", "@angular/router": "^5.0.0", "@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5", "@types/core-js": "^0.9.43", "core-js": "^2.4.1", "rxjs": "^5.5.2", "ts-loader": "^3.1.1", "videogular2": "^5.6.3", "zone.js": "^0.8.14"
Expected Behavior
No errors at runtime
Actual Behavior
The following errors are thrown when loading the app in a browser by the Server Side Renderer:
ERROR ReferenceError: window is not defined at VgMedia.ngOnInit (C:\project_root\dist\server.js:36129:57) at checkAndUpdateDirectiveInline (C:\project_root\dist\server.js:12365:19) at checkAndUpdateNodeInline (C:\project_root\dist\server.js:13868:20) at checkAndUpdateNode (C:\project_root\dist\server.js:13811:16) at prodCheckAndUpdateNode (C:\project_root\dist\server.js:14514:5) at Object.updateDirectives (C:\project_root\dist\server.js:132564:20238) at Object.updateDirectives (C:\project_root\dist\server.js:14255:29) at checkAndUpdateView (C:\project_root\dist\server.js:13778:14) at callViewAction (C:\project_root\dist\server.js:14128:21) at execComponentViewsAction (C:\project_root\dist\server.js:14060:13) Unhandled Promise rejection: Cannot read property 'unsubscribe' of undefined ; Zone: <root> ; Task: Promise.then ; Value: { TypeError: Cannot read property 'unsubscribe' of undefined at VgMedia.ngOnDestroy (C:\project_root\dist\server.js:36464:26) at callProviderLifecycles (C:\project_root\dist\server.js:12704:18) at callElementProvidersLifecycles (C:\project_root\dist\server.js:12669:13) at callLifecycleHooksChildrenFirst (C:\project_root\dist\server.js:12653:17) at destroyView (C:\project_root\dist\server.js:13997:5) at callViewAction (C:\project_root\dist\server.js:14148:13) at execComponentViewsAction (C:\project_root\dist\server.js:14060:13) at Object.destroyView (C:\project_root\dist\server.js:13996:5) at ViewRef_.destroy (C:\project_root\dist\server.js:11616:18) at C:\project_root\dist\server.js:6151:67 __zone_symbol__currentTask: ZoneTask { _zone: Zone { _properties: {}, _parent: null, _name: '<root>', _zoneDelegate: [Object] }, runCount: 0, _zoneDelegates: null, _state: 'notScheduled', type: 'microTask', source: 'Promise.then', data: undefined, scheduleFn: undefined, cancelFn: null, callback: [Function], invoke: [Function] } } TypeError: Cannot read property 'unsubscribe' of undefined at VgMedia.ngOnDestroy (C:\project_root\dist\server.js:36464:26) at callProviderLifecycles (C:\project_root\dist\server.js:12704:18) at callElementProvidersLifecycles (C:\project_root\dist\server.js:12669:13) at callLifecycleHooksChildrenFirst (C:\project_root\dist\server.js:12653:17) at destroyView (C:\project_root\dist\server.js:13997:5) at callViewAction (C:\project_root\dist\server.js:14148:13) at execComponentViewsAction (C:\project_root\dist\server.js:14060:13) at Object.destroyView (C:\project_root\dist\server.js:13996:5) at ViewRef_.destroy (C:\project_root\dist\server.js:11616:18) at C:\project_root\dist\server.js:6151:67
Steps to Reproduce
If this is an issue, describe the steps you took to see the issue. If this is a feature, delete this block.
ng new PROJECT_ROOT
"noStrictGenericChecks": true
in tsconfig.json. #637`
<video #myMedia [vgMedia]="myMedia" width="auto" controls>
`
npm run build:ssr
andnpm run serve:ssr
Attachments
n/a