shaka-playerをアングル2のアプリケーションにインポートするには

Question

私は、タイプスクリプト（最新）のアプリケーションでAngular 2（最新）を持っています。私はビデオ用のコンポーネントを作成し、すべてが問題なく動作しています。今度はshaka-playerを追加したいと思いますが、私はこれを持っています： TS2307： 'shaka-player'モジュールが見つかりません。

私はshaka-playerをインストールしました。これはnode_modulesフォルダにリストされています。

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { MaterialModule } from '@angular/material'; 

import { AppComponent } from './app.component'; 

import * as shaka from 'shaka-player'; 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    MaterialModule.forRoot() 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Answer 1

ここでは、Angular 2アプリでshaka-playerを使用する方法を示します。 node_modules/shaka-player/build/ 実行build.pyスクリプトへ

移動：ライブラリ

を（https://shaka-player-demo.appspot.com/docs/api/tutorial-welcome.htmlここではドキュメントを参照してください）コンパイル

。

次に、node_modules/shaka-player/dist/には異なるファイルがありますが、わかりやすくするためにshaka-player.compiled.jsを選択しました。

私のコンポーネントのクラスの中にライブラリ

を使用して

---

私はファイルを必要とし、それを変数に割り当てる：

shaka = require('../../../../node_modules/shaka-player/dist/shaka-player.compiled');

その後、私はクラスのこのプロパティを使用することができますthis表記： this.shaka.Player.isBrowserSupported()

をエクスポートすることが可能であるアプリ上で再利用するライブラリについてhttps://shaka-player-demo.appspot.com/docs/api/tutorial-basic-usage.html

---

モジュラーアプローチ

：

あなたは、代わりにちょうどshakaのthis.shakaを使用することを忘れないで公式ドキュメントに従うことができます上記の変数を個別の.tsファイルから取得します。ライブラリは、まさにドキュメントのようthisを使用する必要が使用することはできません。ここから

import {shaka} from '../../common/js-libs/shaka-player'

：次にコンポーネントファイルにES6のimport文を使用することができます

export var shaka = require('../../../../node_modules/shaka-player/dist/shaka-player.compiled');

表記

importステートメントからshakaをコピーするクラスのプロパティを作成することは、あなた次第です。

Answer 2

角度2（またはそれ以上）のshakaプレーヤーを使用するもう1つのアプローチは、angle-cliで外部ライブラリとしてインポートすることです。JSON ）をインストールシャカ・プレーヤー

npm install shaka-player --save 

2）コンポーネントでテンプレート

<video id="video" 
      width="640" 
      poster="//shaka-player-demo.appspot.com/assets/poster.jpg" 
      controls autoplay></video> 

3）にビデオ要素を追加します。

import { Component, OnInit } from '@angular/core'; 
declare var shaka: any; 
@Component({ 
    selector: 'app-shaka-player', 
    templateUrl: './shaka-player.component.html', 
    styleUrls: ['./shaka-player.component.scss'] 
}) 
export class ShakaPlayerComponent implements OnInit { 
    manifestUri = '//storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd'; 
    constructor() { } 

    ngOnInit() { 
    this.initApp(); 
    } 

    initApp() { 
    // Install built-in polyfills to patch browser incompatibilities. 
    shaka.polyfill.installAll(); 

    // Check to see if the browser supports the basic APIs Shaka needs. 
    if (shaka.Player.isBrowserSupported()) { 
     // Everything looks good! 
     this.initPlayer(); 
    } else { 
     // This browser does not have the minimum set of APIs we need. 
     console.error('Browser not supported!'); 
    } 
    } 

    initPlayer() { 
    // Create a Player instance. 
    const video = document.getElementById('video'); 
    const player = new shaka.Player(video); 

    // Attach player to the window to make it easy to access in the JS console. 
//window.player = player; 

// Listen for error events. 
player.addEventListener('error', this.onErrorEvent); 

// Try to load a manifest. 
// This is an asynchronous process. 
player.load(this.manifestUri).then(function() { 
    // This runs if the asynchronous load is successful. 
    console.log('The video has now been loaded!'); 
}).catch(error => {this.onError(error)}); // onError is executed if the asynchronous load fails. 
} 

onErrorEvent(event) { 
    // Extract the shaka.util.Error object from the event. 
    this.onError(event.detail); 
} 

onError(error) { 
    // Log the error. 
    console.error('Error code', error.code, 'object', error); 
} 

}