Angular2 HTMLとTypeScriptを1つのファイルに構築する

Question

Angular2とTypeScriptを使用してアプリケーション（大規模）をまとめています。それは多くのプロジェクトに分割される必要があり、各プロジェクトは.htmlビュー、.cssスタイルシート、.ts論理/クラスの各コンポーネントを多数持ちます。

私は各プロジェクトを単一の*.jsファイルにコンパイルし、IISで動作するホストWebサイトにコピーしたいと思います。これは、.xamlファイルがすべて.dllにコンパイルされたWPFまたはSilverlightアプリケーションの構築方法と似ています。

ウェブの周りを見て、.tsファイルを--outFileオプションを使用して1つの.jsファイルにビルドすることができました。しかし、これは.htmlファイルやcssファイルでは役に立ちません。

すべてのヘルプは大幅にそれはあなたがSystemJS loaderでデフォルトAngular2 tsconfig.jsonを使用している場合は、私が求めていることは

スティーブン

Answer 1

:-)不可能であると言うことだ場合でもいただければ幸いです。

SystemJS Build Toolにすべての重い作業を任せることができます。これは私がgulpを使用して私のプロジェクトでそれを行う方法の例です：

1. コンパイル* .TSとインライン* .htmlのテンプレート

   私はtemplateにすべてのtemplateUrlをインライン化するためにすぐにgulp-angular-embed-templatesを使用しています文字列（このプラグインはAngular 1. *とAngular 2の両方で動作します）。

   var tsc = require('gulp-typescript'); 
   var tsProject = tsc.createProject('tsconfig.json'); 
   var embedTemplates = require('gulp-angular-embed-templates'); 
   
   gulp.task('app.build', function() { 
       var tsResult = gulp.src('app/src/**/*.ts', {base: './app/src'}) 
        .pipe(embedTemplates()) // inline templates 
        .pipe(tsc(tsProject)); 
   
       return tsResult.js 
        .pipe(gulp.dest('build/js')); 
   }); 
   

   これは、多くのanonymous System.register modulesbuild/jsでディレクトリを生成します。それらのすべてにはすでにtemplateUrlがインライン化されています。

2. 単一.jsファイルにバンドルすべて

   私はそれは、例えば、WebPACKのために使用するより方法が容易だと思うので、私はこのためにSystemJS Build Toolを使用しています。だから、私はこのプロセスを自動化するための別の一気タスクを持っている：

   var SystemBuilder = require('systemjs-builder'); 
   
   gulp.task('app.systemjs.bundle', function() { 
       var builder = new SystemBuilder('build/js, { 
        paths: { 
         '*': '*.js' 
        }, 
        meta: { 
         'angular2/*': { 
          build: false 
         }, 
         'rxjs/*': { 
          build: false 
         } 
        } 
       }); 
   
       return builder.bundle('main', 'build/js/app.bundle.js'); 
   }); 
   

   ビルダーはSystemJSと同じオプションを取るので、彼らのConfig APIをご確認ください。 （角のbootstrapコールと私の最初のスクリプトである。それはあなたがin the 5 min quickstartを見ることができ、同じファイルです）main.jsためbuilder.bundle('main', ...)検索を呼び出すと、私はビルダーで検索すべてのパスに.jsを追加するため

   。 ./modal-result.component依存関係としてコンパイルされ

   import {ModalResultComponent} from './modal-result.component'; 
   

   をし、それがファイルの拡張子を気にしません：あなたはTSでモジュールをインポートするときは、通常呼び出すためです。だから私は*.jsをすべてのパスに追加して、ビルダーがコンパイルされたすべてのJavaScriptファイルを見つけるのを助けなければならなかったのです。

   metaのオプションは、バンドルしたくない依存関係を無視するようにビルダーに指示するだけです。それはimport 'rxjs/add/operator/map'をmain.tsに含めるので、Angular2自体とrxjsライブラリです。

   これは、すべてのモジュールがSystem.registerを使用して名前付きモジュールとして登録された単一のapp.bundle.jsファイルを生成します。最後の部分はケーキの一部である私たちのapp.bundle.js

   を使用して

3. 。デフォルトのAngular2のものをインポートしてから、bundle optionを使用して、SystemJSのどこに依存するのかを教えてください。

   <script> System.config({ packages: { '/web': { format: 'register', defaultExtension: 'js' } }, bundles: { '/web/app.bundle': ['main'] } }); System.import('main').then(null, console.error.bind(console)); </script> 

   私たちが実際最初のダウンロード/web/app.bundle.jsでSystem.import('main')それを呼び出すと、パッケージ内のすべてのモジュールを登録し、その後、それは私たちのAngular2ブートストラップでモジュールをインポートしmain

   。

   それだけです！

あなたは実際にはまったくgulpを使用して、純粋なnodeスクリプトですべてを行う必要はありません。

CSSファイルをバンドルするのはcssnanoのようなもので簡単ですが、どこからでも使用する方法についてのチュートリアルを見つけることができます。

私は同じことに他の方法があると確信しています。 Angular2は、1つのテクノロジだけを使用するように制限されていないように設計されています。しかし、SystemJSを使うのは、デフォルトでAngular2と同じモジュールシステムを使用しているので、私は最も簡単な方法です。

たとえば、commonjsという形式も使用できますが、これはrequire()ローダー用のポリフィルを使用する必要がありますが、まだ試していません。私はUMDでも試してみる価値があります。