vime-js / vime

Customizable, extensible, accessible and framework agnostic media player. Modern alternative to Video.js and Plyr. Supports HTML5, HLS, Dash, YouTube, Vimeo, Dailymotion...
https://vimejs.com
MIT License
2.77k stars 152 forks source link

bug: DOMParser is not defined in Angular Universal SSR #162

Open anwarulislam opened 3 years ago

anwarulislam commented 3 years ago

having this issue with Angular SSR.

Check this screenshot: https://prnt.sc/wndik1 image

Bug Report

Vime version:

Provider:

[] Audio [] Video [] HLS [] DASH [] YouTube [] Vimeo [] Dailymotion

Current behaviour:

Expected behaviour:

Steps to reproduce:

As far I realize the issue is, nodejs doesn't support some methods like new DOMParser(). But vime wants to access that. in Browser there is no issue with that. But when I build the application with Angular Universal it's not loading the module where I used the player.

Related code:

insert shortcode snippets here

Other information:

anwarulislam commented 3 years ago

I've solved the issue for my project. What I did:

When I saw the issue is related to the web component. But many web components are not supported by the NodeJS I had to install a library called dom-parser. After installing the library I imported that in server.ts file where I initialized my SSR code in my Angular project. After that, I had to declare DOMParser property globally. And then I build the code and run it. It's working properly. But, I think there should have an official solution for it by default. I know you can easily fix it by using that library or creating something similar to that or any fallback solution for that.

My code looks like in server.ts file:

var DomParser = require('dom-parser')
global['DOMParser'] = DomParser
lmordell commented 2 years ago

Making the VImeModule compatible with SSR should be a priority as this caused unexpected behavior in my app. For example, after importing VimeModule into a feature module, meta tags could no longer be added to the page source via the Meta package, eg. this.meta.addTags({ name: 'foo', content: 'bar'});.

rajeshoodles commented 2 years ago

@anwarulislam I am still facing the same issue after adding these two lines in server.ts