title: How can I implement Videogular in an Ionic 2/Angular 2 project?
body: <p>I am seeking a working example of Videogular 2 working in an Ionic 2 environment, or even a flat Angular 2 environment.</p>
  
  <p>I have tried many different online examples and it feels like the docs are way out of date or totally inaccurate.</p>
  
  <p>For example, docs clearly state that a basic player can be produced with:</p>
  
  <pre><code>  &lt;videogular vg-theme="config.theme"&gt;
      &lt;vg-media vg-src="config.sources"
            vg-tracks="config.tracks"&gt;
      &lt;/vg-media&gt;
  
      &lt;vg-overlay-play&gt;&lt;/vg-overlay-play&gt;
    &lt;/videogular&gt;
  </code></pre>
  
  <p>Which I am loading in Typescript:</p>
  
  <pre><code>import { VgAPI } from 'videogular2/core';
  import { VgCoreModule } from 'videogular2/core';
  import { VgControlsModule } from 'videogular2/controls';
  import { VgOverlayPlayModule } from 'videogular2/overlay-play';
  </code></pre>
  
  <p>This gives me the error:</p>
  
  <pre><code>Error: Uncaught (in promise): Error: Template parse errors:
  'vg-media' is not a known element
  </code></pre>
  
  <p>I have a little success using a <code>vg-player</code> element instead of <code>videogular</code> and then a <code>video</code> 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.</p>
  
  <p>All components are also present in my <code>app.module.ts</code> file under the <code>imports</code> area.</p>
  
  <p>My full controller:</p>
  
  <pre><code>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/videogular@2.1.2/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();
    }
  
  }
  </code></pre>
  
  <p>And my full HTML:</p>
  
  <pre><code>&lt;ion-header&gt;
    &lt;ion-navbar&gt;
      &lt;ion-title&gt;Video&lt;/ion-title&gt;
    &lt;/ion-navbar&gt;
  &lt;/ion-header&gt;
  
  &lt;ion-content&gt;
  
    &lt;videogular vg-theme="config.theme"&gt;
      &lt;vg-media vg-src="config.sources"
            vg-tracks="config.tracks"&gt;
      &lt;/vg-media&gt;
  
      &lt;vg-overlay-play&gt;&lt;/vg-overlay-play&gt;
    &lt;/videogular&gt;
  
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>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.</p>