How can I implement Videogular in an Ionic 2/Angular 2 project?

Question

I am seeking a working example of Videogular 2 working in an Ionic 2 environment, or even a flat Angular 2 environment.

I have tried many different online examples and it feels like the docs are way out of date or totally inaccurate.

For example, docs clearly state that a basic player can be produced with:

  <videogular vg-theme="config.theme">
    <vg-media vg-src="config.sources"
          vg-tracks="config.tracks">
    </vg-media>

    <vg-overlay-play></vg-overlay-play>
  </videogular>

Which I am loading in Typescript:

import { VgAPI } from 'videogular2/core';
import { VgCoreModule } from 'videogular2/core';
import { VgControlsModule } from 'videogular2/controls';
import { VgOverlayPlayModule } from 'videogular2/overlay-play';

This gives me the error:

Error: Uncaught (in promise): Error: Template parse errors:
'vg-media' is not a known element

I have a little success using a vg-player element instead of videogular and then a video tag within. This works, but just gives me the native player. Any attempt to use Videogular tags within it will give me a similar error to the above.

All components are also present in my app.module.ts file under the imports area.

My full controller:

import { Component } from '@angular/core';
import { NavController, NavParams, ToastController, LoadingController } from 'ionic-angular';

import { VgAPI } from 'videogular2/core';
import { VgCoreModule } from 'videogular2/core';
import { VgControlsModule } from 'videogular2/controls';
import { VgOverlayPlayModule } from 'videogular2/overlay-play';

import { Level } from '../../providers/level';

@Component({
  selector: 'page-programme-overview',
  templateUrl: 'programme_overview.html'
})
export class ProgrammeOverviewPage {

  api: VgAPI;
  videos: any;
  config: any;

  constructor(
    public navCtrl: NavController,
    public toastCtrl: ToastController,
    private navParams: NavParams) {

    this.videos = [
      {
        sources: [
          {src: "http://static.videogular.com/assets/videos/videogular.mp4", type: "video/mp4"},
          {src: "http://static.videogular.com/assets/videos/videogular.webm", type: "video/webm"},
          {src: "http://static.videogular.com/assets/videos/videogular.ogg", type: "video/ogg"}
        ]
      },
      {
        sources: [
          {src: "http://static.videogular.com/assets/videos/big_buck_bunny_720p_h264.mov", type: "video/mp4"},
          {src: "http://static.videogular.com/assets/videos/big_buck_bunny_720p_stereo.ogg", type: "video/ogg"}
        ]
      } 
    ];

    this.config = {
      preload: "none",
      autoHide: false,
      autoHideTime: 3000,
      autoPlay: false,
      sources: this.videos[0].sources,
      theme: {
        url: "https://unpkg.com/[email protected]/dist/themes/default/videogular.css"
      },
      plugins: {
        poster: "http://www.videogular.com/assets/images/videogular.png"
      }
    };


  }

  // Play
  onPlayerReady(api: VgAPI) {
    this.api = api;
    this.api.play();
  }

}

And my full HTML:

<ion-header>
  <ion-navbar>
    <ion-title>Video</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>

  <videogular vg-theme="config.theme">
    <vg-media vg-src="config.sources"
          vg-tracks="config.tracks">
    </vg-media>

    <vg-overlay-play></vg-overlay-play>
  </videogular>

</ion-content>

Any help is greatly appreciated. At this point I'm considering other video options, but would love to stick with Videogular as it seems like a great solution, if I can get it to work.

Answer 1

Note that if you prefer using lazy loading , you need not import the modules in you app.module.ts . Simply lazy load it in the page module ts

...
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { VgCoreModule } from 'videogular2/core';
import { VgControlsModule } from 'videogular2/controls';
import { VgOverlayPlayModule } from 'videogular2/overlay-play';
import { VgBufferingModule } from 'videogular2/buffering';
import { VgAPI } from 'videogular2/core';
...

After installing videogular via npm , If you use lazy loading and i presume you are , import these modules from videogular2 in your page.module.ts

imports: [
    ...
    VgCoreModule,
    VgControlsModule,
    VgOverlayPlayModule,
    VgBufferingModule
],
providers:[
  VgAPI
]

VgAPI is the core api for almost all controls

in your html file

    <vg-player (onPlayerReady)="onPlayerReady($event)">
       <vg-overlay-play></vg-overlay-play>
       <vg-buffering></vg-buffering>
       <vg-scrub-bar>
          <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
          <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
       </vg-scrub-bar>
       <vg-controls>
          <vg-play-pause></vg-play-pause>
          <vg-playback-button></vg-playback-button>
          <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>
          <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>
          <vg-track-selector></vg-track-selector>
          <vg-volume></vg-volume>
       </vg-controls>
       <video #media
       [vgMedia]="media"
       [src]="currentItem.src"
       id="singleVideo"
       preload="auto"
       crossorigin>
       </video>
    </vg-player>

in your component.ts file

import {VgAPI } from 'videogular2/core';

export class MyPage{

api:VgAPI;

onPlayerReady(api: VgAPI) {
  this.api = api;
 }
}

Follow their documentation at site