Controls loaded but nothing else (no events triggered)

[willgzn]

Description

I'm a beginner with typescript, I gradually discovered its specificities. The problem encountered is that the controls are loaded (correctly?) and displayed but not clickable.

Expected Behavior

Controls clickable and music played.

Actual Behavior

Controls are not clickable.

Steps to Reproduce

1. Start a new app with Angular-CLI
2. Include Videogular2
3. Fill angular-cli-config.js, src/system-config.ts
4. Add a component (.ts, .html), import videogular2
5. Run the app and test the player

Attachments

angular-cli-bluid.js

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      ...
      'videogular2/dist/**/*',
      'videogular2/fonts/**/*',
      'videogular2/core.+(ts|js)',
      'videogular2/controls.+(ts|js)',
      'videogular2/overlay-play.+(ts|js)'
    ]
  });
};

src/system-config.ts

const map:any = {
    ...
    'videogular2': 'vendor/videogular2'
};

const packages:any = {
    'videogular2': {
        main: 'core.js',
        defaultExtension: 'js'
    }
};

src/app/app.component.ts

import {Component} from '@angular/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router-deprecated';
import {VgPlayer, VgAPI} from 'videogular2/core';
import {
    VgControls,
    VgPlayPause,
    VgPlaybackButton,
    VgScrubBar,
    VgScrubBarCurrentTime,
    VgScrubBarBufferingTime,
    VgMute,
    VgFullscreen
} from 'videogular2/controls';

@Component({
    moduleId: module.id,
    selector: 'app-root',
    templateUrl: 'app.component.html',
    directives: [
        ROUTER_DIRECTIVES,
        VgPlayer,
        VgControls,
        VgPlayPause,
        VgPlaybackButton,
        VgScrubBar,
        VgScrubBarCurrentTime,
        VgScrubBarBufferingTime,
        VgMute,
        VgFullscreen,],
    providers: [ROUTER_PROVIDERS, VgAPI]
})

@RouteConfig([
    ...
])

export class AppComponent {
}

src/app/app.component.html

...
<vg-player style="height: 50px;">
    <vg-controls>
        <vg-play-pause></vg-play-pause>
        <vg-playback-button></vg-playback-button>

        <vg-time-display>{{ media?.time?.current | date:'mm:ss' }}</vg-time-display>

        <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-time-display>{{ media?.time?.left | date:'mm:ss' }}</vg-time-display>
        <vg-time-display>{{ media?.time?.total | date:'mm:ss' }}</vg-time-display>
        <vg-mute></vg-mute>
        <vg-fullscreen></vg-fullscreen>
    </vg-controls>
    <audio #media id="myAudio" preload="auto">
        <source src="http://static.videogular.com/assets/audios/videogular.mp3" type="audio/mp3">
    </audio>
</vg-player>
...