SamirHodzic / ngx-embed-video

Get embed code for embedding youtube/vimeo/dailymotion/* video in websites from URL or ID in Angular 6+.
MIT License
56 stars 41 forks source link

Error on Angular 6.0.3 #23

Open eluizbr opened 5 years ago

eluizbr commented 5 years ago

Hi,

I have an issue on Angular 6.0.3

ERROR in Error during template compile of 'AppModule'
  Function calls are not supported in decorators but 'EmbedVideo' was called.

There support to this version ?

Thanks!

bhaumikdarji commented 5 years ago

We are facing same issue, any updates on it?

pavansai1122 commented 5 years ago

I'm also facing same issue. Is there any update ?

lazymesh commented 5 years ago

I also had the same issue. The issue was that the official documentation says to import as :

import { HttpClientModule } from '@angular/common/http'; import { EmbedVideo } from 'ngx-embed-video';

@NgModule({ imports: [HttpClientModule, EmbedVideo.forRoot()] }) export class AppModule {}

the solution is to import EmbedVideoService and not EmbedVideo as

import { EmbedVideoService } from 'ngx-embed-video';

@NgModule({ imports: [], providers:[EmbedVideoService] }) export class AppModule {}

I hope its helpful

cguilhermef commented 5 years ago

Hi

I found another way to fix this issue. I created a provider:

import { HttpClient } from '@angular/common/http';
import { EmbedVideoService } from 'ngx-embed-video/dist';
import { EmbedVideoServiceFactory } from './embed-video-service.factory';
import { DomSanitizer } from '@angular/platform-browser';

export const EmbedVideoServiceProvider = {
  provide: EmbedVideoService,
  useFactory: EmbedVideoServiceFactory,
  deps: [ HttpClient, DomSanitizer ]
};

also, the factory used:

import { HttpClient } from '@angular/common/http';
import { DomSanitizer } from '@angular/platform-browser';
import { EmbedVideoService } from 'ngx-embed-video/dist';

export const EmbedVideoServiceFactory = function(http: HttpClient, sanitizer: DomSanitizer ) {
  return new EmbedVideoService(http, sanitizer);
};

then, add it on providers array:

@NgModule({
  providers: [
    EmbedVideoServiceProvider
  ]
})
export class MyModule {
}
begolf commented 5 years ago

Thanks cguilhermef for your comment and solution, this helped me solve the final issue running this component in production. For others, cguilhermef's solution solved another error I was receiving once I was able to use AOT compilation. Here is the error I was receiving: ERROR TypeError: Cannot read property 'bypassSecurityTrustHtml' of undefined at n.sanitize_iframe (main.65f0c9c22c382098f35a.js:1) at n.embed_vimeo (main.65f0c9c22c382098f35a.js:1) at n.showSSVideo (main.65f0c9c22c382098f35a.js:1) ... Hope this helps

kunalkakkad commented 5 years ago

I also had the same issue. The issue was that the official documentation says to import as :

import { HttpClientModule } from '@angular/common/http'; import { EmbedVideo } from 'ngx-embed-video';

@NgModule({ imports: [HttpClientModule, EmbedVideo.forRoot()] }) export class AppModule {}

the solution is to import EmbedVideoService and not EmbedVideo as

import { EmbedVideoService } from 'ngx-embed-video';

@NgModule({ imports: [], providers:[EmbedVideoService] }) export class AppModule {}

I hope its helpful

I got it working using your solution @lazymesh. Thanks dude.

kunalkakkad commented 4 years ago

Thanks cguilhermef for your comment and solution, this helped me solve the final issue running this component in production. For others, cguilhermef's solution solved another error I was receiving once I was able to use AOT compilation. Here is the error I was receiving: ERROR TypeError: Cannot read property 'bypassSecurityTrustHtml' of undefined at n.sanitize_iframe (main.65f0c9c22c382098f35a.js:1) at n.embed_vimeo (main.65f0c9c22c382098f35a.js:1) at n.showSSVideo (main.65f0c9c22c382098f35a.js:1) ... Hope this helps

Yes exactly it resolved 2 issues mentioned perfectly. Thanks for solution @cguilhermef as it is much more convenient than another one. Also thanks @begolf for highlighting.

pyrextor commented 4 years ago

Hello, I am getting this error with Vimeo:

Access to XMLHttpRequest at 'https://vimeo.com/api/v2/video/10549781.json' from origin ( myurl ) has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

Has anyone else this issue?

Thank you.