videogular2 icon indicating copy to clipboard operation
videogular2 copied to clipboard
verified publisher icon videogular

MutationObserver is not defined

Open johnsken-jerry opened this issue 7 years ago • 2 comments

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 ssr (as per angular-universal). Using versions as follows:

    "@angular/animations": "6.0.6",
    "@angular/common": "6.0.6",
    "@angular/compiler": "6.0.6",
    "@angular/core": "6.0.6",
    "@angular/forms": "6.0.6",
    "@angular/http": "6.0.6",
    "@angular/platform-browser": "6.0.6",
    "@angular/platform-browser-dynamic": "6.0.6",
    "@angular/pwa": "0.6.8",
    "@angular/router": "6.0.6",
    "@angular/service-worker": "6.0.6",
    "@nguniversal/express-engine": "6.0.0",
    "@nguniversal/module-map-ngfactory-loader": "6.0.0",
     "videogular2": "6.2.1",

Expected Behavior

No errors at runtime

Actual Behavior

node prerender.js The following error occurs when running the server pre rendered program：

ERROR ReferenceError: MutationObserver is not defined
    at Observable.eval [as _subscribe] (webpack:///./node_modules/videogular2/src/core/vg-media/vg-media.js?:71:30)
    at Observable._trySubscribe (webpack:///./node_modules/rxjs/_esm5/internal/Observable.js?:48:25)
    at Observable.subscribe (webpack:///./node_modules/rxjs/_esm5/internal/Observable.js?:34:22)
    at VgMedia.ngOnInit (webpack:///./node_modules/videogular2/src/core/vg-media/vg-media.js?:82:56)
    at checkAndUpdateDirectiveInline (webpack:///./node_modules/@angular/core/fesm5/core.js?:9211:19)
    at checkAndUpdateNodeInline (webpack:///./node_modules/@angular/core/fesm5/core.js?:10475:20)
    at checkAndUpdateNode (webpack:///./node_modules/@angular/core/fesm5/core.js?:10437:16)
    at prodCheckAndUpdateNode (webpack:///./node_modules/@angular/core/fesm5/core.js?:10977:5)
    at Object.View_MediaPlayerComponent_0.i1.ɵvid._co [as updateDirectives] (webpack:///./dist-server/main.078677d72ddd9c4b5758.js?:1:203096)
    at Object.updateDirectives (webpack:///./node_modules/@angular/core/fesm5/core.js?:10766:72)
ERROR TypeError: Cannot read property 'length' of undefined
    at VgScrubBarBufferingTime.getBufferTime (webpack:///./node_modules/videogular2/src/controls/vg-scrub-bar/vg-scrub-bar-buffering-time/vg-scrub-bar-buffering-time.js?:25:71)
    at Object.eval [as updateRenderer] (webpack:///./dist-server/main.078677d72ddd9c4b5758.js?:1:342276)
    at Object.updateRenderer (webpack:///./node_modules/@angular/core/fesm5/core.js?:10768:70)
    at checkAndUpdateView (webpack:///./node_modules/@angular/core/fesm5/core.js?:10424:14)
    at callViewAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:10660:21)
    at execComponentViewsAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:10602:13)
    at checkAndUpdateView (webpack:///./node_modules/@angular/core/fesm5/core.js?:10425:5)
    at callViewAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:10660:21)
    at execEmbeddedViewsAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:10623:17)
    at checkAndUpdateView (webpack:///./node_modules/@angular/core/fesm5/core.js?:10420:5)
ERROR TypeError: Cannot read property 'length' of undefined
    at VgScrubBarBufferingTime.getBufferTime (webpack:///./node_modules/videogular2/src/controls/vg-scrub-bar/vg-scrub-bar-buffering-time/vg-scrub-bar-buffering-time.js?:25:71)
    at Object.eval [as updateRenderer] (webpack:///./dist-server/main.078677d72ddd9c4b5758.js?:1:342276)
    at Object.updateRenderer (webpack:///./node_modules/@angular/core/fesm5/core.js?:10768:70)
    at checkAndUpdateView (webpack:///./node_modules/@angular/core/fesm5/core.js?:10424:14)
    at callViewAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:10660:21)
    at execComponentViewsAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:10602:13)
    at checkAndUpdateView (webpack:///./node_modules/@angular/core/fesm5/core.js?:10425:5)
    at callViewAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:10660:21)
    at execEmbeddedViewsAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:10623:17)
    at checkAndUpdateView (webpack:///./node_modules/@angular/core/fesm5/core.js?:10420:5)
ERROR TypeError: Cannot read property 'length' of undefined
    at VgScrubBarBufferingTime.getBufferTime (webpack:///./node_modules/videogular2/src/controls/vg-scrub-bar/vg-scrub-bar-buffering-time/vg-scrub-bar-buffering-time.js?:25:71)
    at Object.eval [as updateRenderer] (webpack:///./dist-server/main.078677d72ddd9c4b5758.js?:1:342276)
    at Object.updateRenderer (webpack:///./node_modules/@angular/core/fesm5/core.js?:10768:70)
    at checkAndUpdateView (webpack:///./node_modules/@angular/core/fesm5/core.js?:10424:14)
    at callViewAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:10660:21)
    at execComponentViewsAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:10602:13)
    at checkAndUpdateView (webpack:///./node_modules/@angular/core/fesm5/core.js?:10425:5)
    at callViewAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:10660:21)
    at execEmbeddedViewsAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:10623:17)
    at checkAndUpdateView (webpack:///./node_modules/@angular/core/fesm5/core.js?:10420:5)
......
......

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 angular_universal 2. install Angular Universal as per the official guide 3.install videogular2 as per the Documentation 4.add Angular6/videogular2 workaround "noStrictGenericChecks": true in tsconfig.json. 5.Add videogular component to app component with local video in assets folder: app.component.html-

<vg-player (onPlayerReady)="onPlayerReady($event)">
    <video [vgMedia]="media" #media id="singleVideo" preload="auto">
        <source src="./assets/video/my_movie.mp4" type="video/mp4">
    </video>
</vg-player>

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

Attachments

qq20180711-112242

johnsken-jerry avatar Jul 11 '18 03:07 johnsken-jerry

Same for me, have you found a solution?

yacineblr avatar Nov 28 '18 21:11 yacineblr

The problem is in SSR, because server don't know what means MutationObserver) The solution for angular is *ngIf directive for element with videogular player. You can render element only in browser using something like:

//component.ts

ngOnInit(){
this._isBrowser = isPlatformBrowser(this._id_platform);
}

and in your template

<app-component-with-video *ngIf="_isBrowser">

and server will be ignore your video player for rendering and videoplayer appears only in client side

kovaletsyurii avatar Sep 17 '19 14:09 kovaletsyurii