angular2 TSのインポートcdn js with system JS

Question

cdn URLから正しくjsをインストールするのに問題があります.10以上の記事や記事を見ても、それを行うには良い方法が見つかりません。

私の角プロジェクトで使用するためにインストールしたいjsファイルはhttp://player.twitch.tv/js/embed/v1.jsです。現在、私はそれをロードするindex.htmlにscriptタグを持っています。

this.player = new Twitch.Player("video-player", options);などのコードがありますが、npm startを実行すると、エラーが発生します。TS2304：「Twitch」という名前が見つかりません。

「Twitch」を使用する行をコメントアウトすると、サーバーが起動し、サーバーが実行されている間に行がコメントアウトされ、Twitchプレーヤーライブラリに問題はありません。

私はそれをsystem.config.jsファイルにインストールする必要があると思いますが、cdn（これはnpmで利用できません）から来るjsのための方法を見つけることができません。私は複数のnpmパッケージでこれを行っていますが、cdnから少し失われています。

私はsystemjsでこれを行う必要がある場合は100％確信していないので、それが正しくない場合は、この投稿の残りの部分を無視し、あなたの提案を教えてください - 私はちょうどjsファイル認識され、私のアプリ全体で使用することができます。

これを試してみるには、いくつかの方法があります。 1つはload the module directly from the urlです。

// index.html 
<!-- 2. Configure SystemJS --> 
<script src="systemjs.config.js"></script> 
<script> 
    System.import('app').catch(function(err){ console.error(err); }); 
    System.import('http://player.twitch.tv/js/embed/v1.js'); 
</script> 

// main.js 
import {bootstrap} from '@angular/platform-browser-dynamic'; 
import {AppComponent} from './app.component'; 
import "angular2-materialize"; 
import "twitch-api"; 

このアプローチでは、アプリケーションに読み込む方法がわかりません。 import "twitch-api"は、angle2-materializeなどのnpmパッケージと同じように動作しません。これは、system.config.jsファイルにマップされていないためです。この方法が可能かどうかはわかりません。

他の方法はload it in the system.config.js fileです。このメソッドでは、jsファイルにurlを持つマップオブジェクトを追加します。おそらく、system.config.jsファイル全体が関連していると思いますので、以下にすべて貼り付けていきます。

main.tsで私は上記と同じことをしますimport "twitch-api";これらの変更を行った後も、サーバーを起動しようとすると同じエラーメッセージが表示されますTS2304: Cannot find name 'Twitch'。

var map = { 
    'app':      'app', // 'dist', 
    'rxjs':      'node_modules/rxjs', 
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 
    '@angular':     'node_modules/@angular', 
    "materialize-css":   "node-modules/materialize-css", 
    "materialize":    "node_modules/angular2-materialize", 
    "angular2-materialize":  "node_modules/angular2-materialize", 
    "angular2-localstorage":  "node_modules/angular2-localstorage", 
    "twitch-api":     "http://player.twitch.tv/js/embed/v1.js" 
    }; 
    // packages tells the System loader how to load when no filename and/or no extension 
    var packages = { 
    'app':      { main: 'main.js', defaultExtension: 'js' }, 
    'rxjs':      { defaultExtension: 'js' }, 
    'angular2-in-memory-web-api': { defaultExtension: 'js' }, 
    "materialize-css":   { main: "dist/js/materialize" }, 
    "materialize": { main: "dist/materialize-directive", defaultExtension: "js" }, 
    "angular2-localstorage": {main: "index.js", defaultExtension: 'js'}, 
    "twitch-api": {} 
    }; 
    var packageNames = [ 
    '@angular/common', 
    '@angular/compiler', 
    '@angular/core', 
    '@angular/http', 
    '@angular/platform-browser', 
    '@angular/platform-browser-dynamic', 
    '@angular/router', 
    '@angular/router-deprecated', 
    '@angular/testing', 
    '@angular/upgrade', 
    '' 
    ]; 
    // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' } 
    packageNames.forEach(function(pkgName) { 
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' }; 
    }); 
    var config = { 
    map: map, 
    packages: packages 
    } 
    System.config(config); 

Answer 1

最終更新 だからもう少し研究を行うと（程度に）何が起こっていたかのより良い理解を得た後、私はもう少し意味をなさないかもしれません更新に入れたかったです。ある程度、オリジナルと更新の両方には、いくつかの虚偽の情報が含まれていました。

間違っていたアップデートから、「インポート」命令を別の方法で扱っているVSコードに関する私の声明です。正しいステートメントはSystemJSであり、TypeScriptコンパイラは 'import'命令を別の方法で扱います。 SystemJSの基本的なケース（JSファイルをロードしている場合）では、これらのインポート文も表示されません。インポート文の製品が表示されます（Typescriptがtsconfig.jsonファイルでどのように設定されているかに基づいています）。

この質問では、 "import"ステートメントのTypeScriptとSystemJSの間の唯一の "リンク"は "twitch-api"です。 TypeScriptは、.tsファイルを.jsファイルに変換します。このファイルは、ページがロードされるとSystemJSが読み込み、 "twitch-api"という名前のパッケージの設定設定を調べます。これは、サイトを開始するために「ツイッチ」オブジェクトの使用をコメントアウトし、「ツイッチ」オブジェクトのコメントを外した場合、SystemJSがすでにそのパッケージをサイトにロードしているため、機能するはずです。

TypeScriptコンパイラでは、コンパイラがimportステートメントを渡すときに、rulesという独自のセットがあります（ 'TypeScriptがモジュールを解決する方法'のセクションを参照してください）。それに基づいて、TypeScriptはSystemJSを認識していないことがわかります。それは、あなたのフォルダ構造内の特定の場所を探しているだけです。

インポートは非​​相対型なのでnode_modulesで "twitch-api"と一致するものが検索されますが、拡張子が '.ts'、 '。tsx'のファイルも検索されます'.d.ts']。興味深いのは、URLです。フォルダ構造にファイルがありません。通常、TypeScriptはJSファイルを正しく構築するために必要です。残念ながら、Twitchは.ts/.tsx/.d.tsファイルを提供しません。DefinitelyTypedは、Twitch用の.d.tsファイルを提供しません。

私がこれを回避するためにしたのは、自分の.d.tsファイルを作成することでした（完了しておらず、Twitchが実際に行っていることには間違いがあります）。だから私の "node_modules"フォルダでは "twitch-api"という名前のフォルダを作成し、 "index.d.ts"というファイルを作成しました。このファイルにはこの定義を入れています。コード私は、メソッド「Twitch.Player（」ビデオプレーヤー「オプション）は、」何を知っていないと、実際に返しますが、SystemJSは、定義ファイルを使用していないので、それはまだ動作します）一度

export class Twitch{ 
    static Player(type:string,options:{}):void;  
} 

export class Player{ 
    constructor(type:string,options:{}); 
} 

。これら二つのことは、私はあなたのケースでは

import {Twitch,Player} from 'twitch-api' 

のような完全なimport文を使用することができた場所にあった、あなたはおそらく、あなたのu他のメソッドやプロパティのために、あなたの定義ファイルに多くを追加する必要がありますTwitch/Playerオブジェクトのseです。

最後に、 "Twitch：any"という変数を宣言するだけで問題を回避できる理由がわかりません。なぜなら、「import 'twitch-api'」は、TypeScriptコンパイラが通常行う特定のチェックを行わないためです。これは「ツイッチ」が何であるかを知る必要があることを意味し、深く見ない。それは私の最高の推測です。

---

更新 だから私の最初の推測では、私はあなたのセットアップに基づいてplukerで遊んで開始し、完全に間違っていたと、これは何か他のものであることが明らかになりました。プランターをnewにフォークし、Twitch.Playerを正しくインスタンス化する方法がわかっていたら、この例ではうまくいくはずです。

これは、実行中に変更を行った後で動作するはずです。表示されているエラーはTypescriptコンパイラにあります。私はどのIDEを使用しているのかはわかりませんが、VSコードを使用していますが、「インポート」ステートメントがPlunkerの場合とは異なって動作するため、これらを実行します。

---

私はあなたがほとんどそこにいると思うが、両方の組み合わせの種類が必要です。最初の例が失敗したのは、 "twitch-api"がimportコマンドの認識されたパッケージではないからです。

2回目の試行が失敗するのは、マップとパッケージオブジェクトを実装する方法だと思います。外部URLを使用して設定を実装する方法を示すplunkerがあります。以下はconfig.jsファイルの抜粋です。私はあなたが "メイン"プロパティを使用する必要があるときのためのすべてのルールについてはわからない、私はあなたがそれを使用する必要があると思うファイルは "インデックス"またはパッケージの名前に従っていない名前はない？

var map = { 
'app':      'src', // 'dist', 
'rxjs':      'https://npmcdn.com/rxjs@5.0.0-beta.6', 
'ng2-toastr':     'https://npmcdn.com/ng2-toastr@0.3.0' 
}; 

var packages = { 
'app':      { main: 'app.ts', defaultExtension: 'ts' }, 
'rxjs':      { defaultExtension: 'js' }, 
'ng2-toastr':     { main: 'bundles/ng2-toastr.js', defaultExtension: 'js' } 
};