Angular 2 + TypeScript + systemjsアプリを実際にデプロイする方法を教えてください。
TypeScriptとsystemjsを使ったAngular.ioにクイックスタートチュートリアルがあります。 miniappを実行したので、展開可能なものをどのように作成しますか。私はそれについて全く情報を見つけることができませんでした。
System.configに追加のツールや追加設定が必要ですか。
（私はwebpackを使用して単一のbundle.jsを作成できることを知っていますが、チュートリアルで使用されているようにsystemjsを使用したいのですが）
誰かが自分のビルドプロセスをこの設定で共有できますか？（Angular 2、TypeScript、systemjs）
このレベルで理解しておくべき重要なことは、次の設定を使用して、コンパイル済みの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の縮小化を処理する方法については説明しません。
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
ドキュメント を確認してください
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
});これが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/にミラーリングします。
そこ。とてもわかりやすい。最善の方法ではありませんが、始めるのに良い方法です。
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/'を使うことであるように思われます
私は私のng2プロジェクトを提供するためにバックエンドでexpressjsを使用しました。あなたは私のgithubページからそれをチェックすることができます： https://github.com/echonax/ng2-beta-and-test-framework
Angular.io WebサイトのAdvanced/Deploymentセクションで、展開する最も簡単な方法は「開発環境をサーバーにコピーする」ことです。
以下のセクションを通過してください。可能な限り最も単純なデプロイメント。最終的なプロジェクトファイルはコードセクション内に表示されます。 （ローカルのnpm_modulesフォルダからではなく）Webからnpmパッケージファイルをロードするコードがすでに設定されていることに注意してください。
ローカルコンピュータで実行されていることを確認してください（npm start）。次に、プロジェクトフォルダの下にある '/ src'サブフォルダの下にあるすべてのものを、設定したS3バケットにコピーします。ドラッグアンドドロップを使用してコピーすることができます。その過程で、ファイルのアクセス権設定を選択するオプションが表示されます。ファイルを「全員」に「読み取り可能」にするようにしてください。
[プロパティ]タブで、[静的Webサイトのホスティング]パネルを探し、[このWebサイトをホストWebサイトに使用する]オプションをオンにして、インデックス文書とエラー文書の両方に 'index.html'を指定します。
静的WebサイトのEndpointをクリックして、プロジェクトは正常に実行されています。