web-dev-qa-db-ja.com

TSあり、NPMなしのAngular2での開発

すべてのガイドはnpmのインストールを推奨していますが、私はそれなしで方法を探しています。

使用可能なAngular2ファイルがあります ですが、いずれもTypeScriptコードではありません。

だから私は何をしなければならないのですか？ Angular2.tsまたは特定のAngular2-xx.jsおよび.d.tsファイルが必要ですか？

更新：Angular2からNPMをダウンロードして完全なソースツリーを取得しましたが、特定のものが見つかりません。 .d.tsでAngular2を検索しても結果はありませんでした。多数の.tsおよび.d.tsファイルがコードの膨大なコレクションに含まれています。

javascriptangulartypescriptnpm
22
Arman Hayots

実際、これらのファイルはAngular2とその依存関係のバンドルバージョンです。 TypeScriptで記述されたアプリケーション内で使用できます。実際、TypeScriptをそのままブラウザで使用することはできません。 TypeScriptコンパイラーでESコードにコンパイルするためにそれらを前処理するか、TypeScriptライブラリーを使用してブラウザーで直接トランスパイルする必要があります。

これは、transpiler構成属性を介してSystemJS内で直接構成できます（以下を参照）。

まず、これらのファイルをHTMLファイルに追加します。

_<script src="https://code.angularjs.org/2.0.0-beta.2/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/TypeScript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.2/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.2/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.2/http.dev.js"></script>
_

NPMなしでアプリケーションを実装したい場合は、ブラウザー内でTypeScriptファイルをトランスパイルできます.plunkrを使用するときの方法です。そのためには、以下に説明するようにSystemJSを構成する必要があります。

_<script>
  System.config({
    transpiler: 'TypeScript', 
    typescriptOptions: {
      emitDecoratorMetadata: true
    },
    packages: {
      'app': {
        defaultExtension: 'ts'
      }
    } 
  });
  System.import('app/main')
        .then(null, console.error.bind(console));
</script>
_

TypeScriptファイルをappフォルダの下に定義するように注意してください

これを行う方法を説明する単純な（そして完全な）plunkrを以下に示します。 https://plnkr.co/edit/vYQPePG4KDoktPoGaxYu?p=info 。

NPMを使用せずに、対応するコードをダウンロードして、そのコードを_http-server_などの静的HTTPサーバーでローカルに使用できます。これは、ユースケースの出発点として最適です...

編集

TypeScriptファイルがVSによってコンパイルされている場合、以下で説明するように、SystemJS構成を適合させる必要があります。

_<script>
  System.config({
    packages: {
      app: {
        defaultExtension: 'js',
      }
    }
  });
  System.import('app/boot')
        .then(null, console.error.bind(console));
</script>
_

これにより、SystemJSはインポート時にJSファイルをロードします。例：System.import('app/boot')は、TypeScriptではなく_app/boot.js_を使用します

11
Thierry Templier