Angular Universal Intergration #653

rollafox · 2017-11-28T10:39:29Z

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.

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

<vg-player> <video #myMedia [vgMedia]="myMedia" width="auto" controls> <source src="./assets/test-video.mp4" type="video/mp4"> </video> </vg-player>

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

Attachments

n/a

The text was updated successfully, but these errors were encountered:

badarAhmed95 · 2019-02-19T11:55:02Z

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 · 2019-02-22T06:29:35Z

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 · 2019-04-04T19:53:07Z

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?

Added isPlatformBrowser for vgMedia, to avoid SSR issues. videogular#653

videogular#653

Elecash added the feature:request label Feb 6, 2018

dorufurtuna added a commit to dorufurtuna/videogular2 that referenced this issue Jul 14, 2019

fix($ssr): SSR errors for vgMedia

20a4859

Added isPlatformBrowser for vgMedia, to avoid SSR issues. videogular#653

dorufurtuna added a commit to dorufurtuna/videogular2 that referenced this issue Jul 14, 2019

fix($ssr): Added isPlatformBrowser for vgMedia, to avoid SSR errors.

9156f43

videogular#653

dorufurtuna mentioned this issue Jul 14, 2019

fix($ssr): Added isPlatformBrowser for vgMedia, to avoid SSR errors. #843

Closed

5 tasks

g-hamilton mentioned this issue Mar 6, 2020

TypeError: Cannot read property 'unsubscribe' of undefined #888

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Angular Universal Intergration #653

Angular Universal Intergration #653

rollafox commented Nov 28, 2017 •

edited

badarAhmed95 commented Feb 19, 2019

badarAhmed95 commented Feb 22, 2019 •

edited

DevDomRaven commented Apr 4, 2019

Angular Universal Intergration #653

Angular Universal Intergration #653

Comments

rollafox commented Nov 28, 2017 • edited

Description

Expected Behavior

Actual Behavior

Steps to Reproduce

Attachments

badarAhmed95 commented Feb 19, 2019

badarAhmed95 commented Feb 22, 2019 • edited

DevDomRaven commented Apr 4, 2019

rollafox commented Nov 28, 2017 •

edited

badarAhmed95 commented Feb 22, 2019 •

edited