search

videogular / videogular2

The HTML5 video player for Angular 2
https://videogular.github.io/videogular2-showroom/#/
MIT License
672 stars 211 forks source link

Angular Universal Intergration #653

Open rollafox opened 6 years ago

rollafox commented 6 years ago

Description

Angular Universal build with Videogular2 fails at runtime, note: ng serve (as per angualr-cli) still works as expected, the error only occurs using npm 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.

  1. install a new angular-cli project ng new PROJECT_ROOT
  2. install Angular Universal as per the official guide
  3. install videogular2 as per the Documentation
  4. add Angular5/videogular2 workaround "noStrictGenericChecks": true in tsconfig.json. #637
  5. Add videogular component to app component with local video in assets folder: app.component.html-

` <video #myMedia [vgMedia]="myMedia" width="auto" controls>

</video>

`

  1. build and serve application with npm run build:ssr and npm run serve:ssr

Attachments

n/a

badarAhmed95 commented 5 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 &#39;unsubscribe&#39; of undefined<br> &nbsp; &nbsp;at VgMedia.ngOnDestroy (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:198117:26)<br> &nbsp; &nbsp;at callProviderLifecycles (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:26429:18)<br> &nbsp; &nbsp;at callElementProvidersLifecycles (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:26397:13)<br> &nbsp; &nbsp;at callLifecycleHooksChildrenFirst (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:26387:29)<br> &nbsp; &nbsp;at destroyView (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:27449:5)<br> &nbsp; &nbsp;at callViewAction (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:27575:13)<br> &nbsp; &nbsp;at execEmbeddedViewsAction (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:27518:17)<br> &nbsp; &nbsp;at destroyView (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:27447:5)<br> &nbsp; &nbsp;at callViewAction (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:27575:13)<br> &nbsp; &nbsp;at execComponentViewsAction (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:27497:13)</pre>
--

If there is any update, please let me know.

badarAhmed95 commented 5 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 &#39;unsubscribe&#39; of undefined<br> &nbsp; &nbsp;at VgMedia.ngOnDestroy (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:198117:26)<br> &nbsp; &nbsp;at callProviderLifecycles (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:26429:18)<br> &nbsp; &nbsp;at callElementProvidersLifecycles (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:26397:13)<br> &nbsp; &nbsp;at callLifecycleHooksChildrenFirst (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:26387:29)<br> &nbsp; &nbsp;at destroyView (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:27449:5)<br> &nbsp; &nbsp;at callViewAction (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:27575:13)<br> &nbsp; &nbsp;at execEmbeddedViewsAction (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:27518:17)<br> &nbsp; &nbsp;at destroyView (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:27447:5)<br> &nbsp; &nbsp;at callViewAction (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:27575:13)<br> &nbsp; &nbsp;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);
    };
DevDomRaven commented 5 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 &#39;unsubscribe&#39; of undefined<br> &nbsp; &nbsp;at VgMedia.ngOnDestroy (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:198117:26)<br> &nbsp; &nbsp;at callProviderLifecycles (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:26429:18)<br> &nbsp; &nbsp;at callElementProvidersLifecycles (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:26397:13)<br> &nbsp; &nbsp;at callLifecycleHooksChildrenFirst (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:26387:29)<br> &nbsp; &nbsp;at destroyView (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:27449:5)<br> &nbsp; &nbsp;at callViewAction (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:27575:13)<br> &nbsp; &nbsp;at execEmbeddedViewsAction (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:27518:17)<br> &nbsp; &nbsp;at destroyView (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:27447:5)<br> &nbsp; &nbsp;at callViewAction (E:\Angular\Angular universal Repo\SSR Zedflix\dist\server.js:27575:13)<br> &nbsp; &nbsp;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?