web-dev-qa-db-ja.com

Angular 2 + TypeScript + systemjsアプリを実際にデプロイする方法を教えてください。

TypeScriptとsystemjsを使ったAngular.ioにクイックスタートチュートリアルがあります。 miniappを実行したので、展開可能なものをどのように作成しますか。私はそれについて全く情報を見つけることができませんでした。

System.configに追加のツールや追加設定が必要ですか。

（私はwebpackを使用して単一のbundle.jsを作成できることを知っていますが、チュートリアルで使用されているようにsystemjsを使用したいのですが）

誰かが自分のビルドプロセスをこの設定で共有できますか？（Angular 2、TypeScript、systemjs）

typescriptangularsystemjs
103
Brian G. Bell

このレベルで理解しておくべき重要なことは、次の設定を使用して、コンパイル済みのJSファイルを直接連結することはできないということです。

TypeScriptコンパイラの設定では、

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "declaration": false,
    "stripInternal": true,
    "module": "system",
    "moduleResolution": "node",
    "noEmitOnError": false,
    "rootDir": ".",
    "inlineSourceMap": true,
    "inlineSources": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules"
  ]
}

HTMLでは

System.config({
  packages: {
    app: {
      defaultExtension: 'js',
      format: 'register'
    }
  }
});

実際のところ、これらのJSファイルには匿名のモジュールが含まれています。無名モジュールはSystem.registerを使用するが最初のパラメータとしてモジュール名を使用しないJSファイルです。これが、systemjsがモジュールマネージャとして設定されている場合に、TypeScriptコンパイラがデフォルトで生成するものです。

したがって、すべてのモジュールを単一のJSファイルにまとめるには、TypeScriptコンパイラ構成内でoutFileプロパティを利用する必要があります。

これを行うには、次のgulpの内側を使用します。

const gulp = require('gulp');
const ts = require('gulp-TypeScript');

var tsProject = ts.createProject('tsconfig.json', {
  TypeScript: require('TypeScript'),
  outFile: 'app.js'
});

gulp.task('tscompile', function () {
  var tsResult = gulp.src('./app/**/*.ts')
                     .pipe(ts(tsProject));

  return tsResult.js.pipe(gulp.dest('./dist'));
});

これは他の処理と組み合わせることができます。

  • コンパイルされたTypeScriptファイルを整理する
  • app.jsファイルを作成する
  • サードパーティライブラリ用のvendor.jsファイルを作成する方法
  • アプリケーションをブートストラップするモジュールをインポートするためのboot.jsファイルを作成します。このファイルはページの最後に含まれていなければなりません（すべてのページがロードされるとき）。
  • これら2つのファイルを考慮するようにindex.htmlを更新する

以下の依存関係がgulpタスクで使用されています。

  • gulp-Concat
  • gulp-html-replace
  • gulp-TypeScript
  • グルグル化

以下は適応できるようにするためのサンプルです。

  • app.min.jsファイルを作成する

    gulp.task('app-bundle', function () {
  var tsProject = ts.createProject('tsconfig.json', {
    TypeScript: require('TypeScript'),
    outFile: 'app.js'
  });

  var tsResult = gulp.src('app/**/*.ts')
                   .pipe(ts(tsProject));

  return tsResult.js.pipe(concat('app.min.js'))
                .pipe(uglify())
                .pipe(gulp.dest('./dist'));
});

  • vendors.min.jsファイルを作成する

    gulp.task('vendor-bundle', function() {
  gulp.src([
    'node_modules/es6-shim/es6-shim.min.js',
    'node_modules/systemjs/dist/system-polyfills.js',
    'node_modules/angular2/bundles/angular2-polyfills.js',
    'node_modules/systemjs/dist/system.src.js',
    'node_modules/rxjs/bundles/Rx.js',
    'node_modules/angular2/bundles/angular2.dev.js',
    'node_modules/angular2/bundles/http.dev.js'
  ])
  .pipe(concat('vendors.min.js'))
  .pipe(uglify())
  .pipe(gulp.dest('./dist'));
});

  • boot.min.jsファイルを作成する

    gulp.task('boot-bundle', function() {
  gulp.src('config.prod.js')
    .pipe(concat('boot.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./dist'));
 });

    config.prod.jsには、単に次のものが含まれています。

     System.import('boot')
    .then(null, console.error.bind(console));

  • index.htmlファイルを更新する

    gulp.task('html', function() {
  gulp.src('index.html')
    .pipe(htmlreplace({
      'vendor': 'vendors.min.js',
      'app': 'app.min.js',
      'boot': 'boot.min.js'
    }))
    .pipe(gulp.dest('dist'));
});

    index.htmlは次のようになります。

    <html>
  <head>
    <!-- Some CSS -->

    <!-- build:vendor -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/http.dev.js"></script>
    <!-- endbuild -->

    <!-- build:app -->
    <script src="config.js"></script>
    <!-- endbuild -->
  </head>

  <body>
    <my-app>Loading...</my-app>

    <!-- build:boot -->
    <!-- endbuild -->
  </body>
</html>

すべてのアプリコンポーネントがapp.min.jsファイルから登録されるのを待つために、System.import('boot');は本文の最後で実行する必要があります。

ここではCSSとHTMLの縮小化を処理する方法については説明しません。

66
Thierry Templier

Angular2-cli buildコマンドを使用できます。

ng build -prod

https://github.com/angular/angular-cli/wiki/build#bundling

ng build -prodまたはng serve -prodを介して - prodフラグを使用して作成されたビルドは、すべての依存関係を単一ファイルにまとめます、およびツリーシェイクの手法を利用する。

更新

Angular2がrc4に入っていたときにこの回答が投稿されました

Angular-cli beta 21とangular 2 ^ 2.1.0でもう一度試してみましたが、期待通りに動作しています

この答えはあなたが使用できるAngular-Cliでアプリを初期化することを必要とします

ng new myApp

または既存のもの

ng init

更新日08/06/2018

角度6の場合、構文は異なります。

ng build --prod --build-optimizer

ドキュメント を確認してください

28
Amr ElAdawy

SystemJSを Gulp および SystemJS-Builder を使用して使用すると、TypeScriptでAngular 2（2.0.0-rc.1）プロジェクトを作成できます。

以下は、2.0.0-rc.1を実行しているTour of Heroesを構築、バンドル、および縮小する方法を簡略化したものです（ フルソース 、 ライブ例 ）。

gulpfile.js

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat');
var TypeScript = require('gulp-TypeScript');
var systemjsBuilder = require('systemjs-builder');

// Compile TypeScript app to JS
gulp.task('compile:ts', function () {
  return gulp
    .src([
        "src/**/*.ts",
        "typings/*.d.ts"
    ])
    .pipe(sourcemaps.init())
    .pipe(TypeScript({
        "module": "system",
        "moduleResolution": "node",
        "outDir": "app",
        "target": "ES5"
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('app'));
});

// Generate systemjs-based bundle (app/app.js)
gulp.task('bundle:app', function() {
  var builder = new systemjsBuilder('public', './system.config.js');
  return builder.buildStatic('app', 'app/app.js');
});

// Copy and bundle dependencies into one file (vendor/vendors.js)
// system.config.js can also bundled for convenience
gulp.task('bundle:vendor', function () {
    return gulp.src([
        'node_modules/jquery/dist/jquery.min.js',
        'node_modules/bootstrap/dist/js/bootstrap.min.js',
        'node_modules/es6-shim/es6-shim.min.js',
        'node_modules/es6-promise/dist/es6-promise.min.js',
        'node_modules/zone.js/dist/zone.js',
        'node_modules/reflect-metadata/Reflect.js',
        'node_modules/systemjs/dist/system-polyfills.js',
        'node_modules/systemjs/dist/system.src.js',
      ])
        .pipe(concat('vendors.js'))
        .pipe(gulp.dest('vendor'));
});

// Copy dependencies loaded through SystemJS into dir from node_modules
gulp.task('copy:vendor', function () {
  gulp.src(['node_modules/rxjs/**/*'])
    .pipe(gulp.dest('public/lib/js/rxjs'));

  gulp.src(['node_modules/angular2-in-memory-web-api/**/*'])
    .pipe(gulp.dest('public/lib/js/angular2-in-memory-web-api'));
  
  return gulp.src(['node_modules/@angular/**/*'])
    .pipe(gulp.dest('public/lib/js/@angular'));
});

gulp.task('vendor', ['bundle:vendor', 'copy:vendor']);
gulp.task('app', ['compile:ts', 'bundle:app']);

// Bundle dependencies and app into one file (app.bundle.js)
gulp.task('bundle', ['vendor', 'app'], function () {
    return gulp.src([
        'app/app.js',
        'vendor/vendors.js'
        ])
    .pipe(concat('app.bundle.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./app'));
});

gulp.task('default', ['bundle']);

system.config.js

var map = {
  'app':                                'app',
  'rxjs':                               'vendor/rxjs',
  'zonejs':                             'vendor/zone.js',
  'reflect-metadata':                   'vendor/reflect-metadata',
  '@angular':                           'vendor/@angular'
};

var packages = {
  'app':                                { main: 'main', defaultExtension: 'js' },
  'rxjs':                               { defaultExtension: 'js' },
  'zonejs':                             { main: 'zone', defaultExtension: 'js' },
  'reflect-metadata':                   { main: 'Reflect', defaultExtension: 'js' }
};

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',
];

packageNames.forEach(function(pkgName) {
  packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});

System.config({
  map: map,
  packages: packages
});
12
Steely

これがAngular 2用の私のMEA2N定型文です： https://github.com/simonxca/mean2-boilerplate

物事をまとめるためにtscを使う単純な定型文です。 （実際には grunt-ts を使用しています。これは、基本的には単にtscコマンドです。）いいえ、Wekpackなどは必要ありません。

あなたがgruntを使っているかどうかにかかわらず、考えは：

  • アプリをts/というフォルダーに作成します（例：public/ts/）
  • tscを使用して、ts/フォルダーのディレクトリ構造をjs/フォルダーにミラーリングし、js/内のindex.htmlフォルダー内のファイルを参照するだけです。

grunt-tsを機能させるには（普通のtsc、Gulpなどにも同等のコマンドがあるはずです）、tsconfig.jsonに次のようなプロパティがあります。 "outDir": "../js"、そしてあなたのgruntfile.jsの中でそれを参照してください：

grunt.initConfig({
  ts: {
    source: {tsconfig: 'app/ts/tsconfig.json'}
  },
  ...
});

それからgrunt tsを実行してください。そうすればあなたのアプリはpublic/ts/に入り、それをpublic/js/にミラーリングします。

そこ。とてもわかりやすい。最善の方法ではありませんが、始めるのに良い方法です。

1
Simonxca

SystemJsのために角度rc1をバンドルすることを私が見つけた最も簡単な方法はgulpとsystemjs-builderを使うことです：

gulp.task('bundle', function () {
    var path = require('path');
    var Builder = require('systemjs-builder');

    var builder = new Builder('/node_modules');

    return builder.bundle([
        '@angular/**/*.js'
        ], 
        'wwwroot/bundle.js', 
        { minify: false, sourceMaps: false })
        .then(function () {
            console.log('Build complete');
        })
        .catch(function (err) {
            console.log('Build error');
            console.log(err);
        });
});

コメントで指摘されているように、systemJsは現在moduleId: module.idを使用してコンポーネントをバンドルする際に問題を抱えています

https://github.com/angular/angular/issues/6131

現在の推奨（角度2 rc 1）は明示的なパス、すなわちmoduleId: '/app/path/'を使うことであるように思われます

1
paul

私は私のng2プロジェクトを提供するためにバックエンドでexpressjsを使用しました。あなたは私のgithubページからそれをチェックすることができます： https://github.com/echonax/ng2-beta-and-test-framework

0
eko

Angular.io WebサイトのAdvanced/Deploymentセクションで、展開する最も簡単な方法は「開発環境をサーバーにコピーする」ことです。

  1. 以下のセクションを通過してください。可能な限り最も単純なデプロイメント。最終的なプロジェクトファイルはコードセクション内に表示されます。 （ローカルのnpm_modulesフォルダからではなく）Webからnpmパッケージファイルをロードするコードがすでに設定されていることに注意してください。

  2. ローカルコンピュータで実行されていることを確認してください（npm start）。次に、プロジェクトフォルダの下にある '/ src'サブフォルダの下にあるすべてのものを、設定したS3バケットにコピーします。ドラッグアンドドロップを使用してコピーすることができます。その過程で、ファイルのアクセス権設定を選択するオプションが表示されます。ファイルを「全員」に「読み取り可能」にするようにしてください。

  3. [プロパティ]タブで、[静的Webサイトのホスティング]パネルを探し、[このWebサイトをホストWebサイトに使用する]オプションをオンにして、インデックス文書とエラー文書の両方に 'index.html'を指定します。

  4. 静的WebサイトのEndpointをクリックして、プロジェクトは正常に実行されています。

0
Joseph Wu