Главное, что нужно понимать на этом уровне, состоит в том, что, используя следующую конфигурацию, вы не можете напрямую скомпилировать 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-файлы будут содержать анонимные модули. Анонимный модуль – это JS-файл, который использует System.register но без имени модуля в качестве первого параметра. Это то, что компилятор машинописного текста генерируется по умолчанию, когда systemjs настроен как диспетчер модhive.

Поэтому, чтобы все ваши модули были в одном JS-файле, вам необходимо использовать свойство outFile в вашей конфигурации компилятора TypeScript.

Для этого вы можете использовать следующий внутренний глоток:

 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 для импорта модуля, который загружает приложение. Этот файл должен быть включен в конце страницы (когда загружается вся страница).
• обновить index.html чтобы учесть эти два файла

В задачах gulp используются следующие зависимости:

• Глоток-CONCAT
• глотнуть-HTML-заменить
• Глоток-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 выглядит следующим образом:

                    Loading...     

Обратите внимание, что System.import('boot'); должно быть сделано в конце тела, чтобы дождаться, пока все ваши компоненты приложения будут зарегистрированы из файла app.min.js

Я не описываю здесь способ обработки CSS и HTML-оценки.

Вы можете использовать команду angular2-cli build

 ng build -prod 

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

Создает с помощью флага -prod через ng build -prod или ng serve -prod связывает все зависимости в один файл и использует методы ng serve -prod .

Обновить

Этот ответ был представлен, когда угловой 2 находился в rc4

Я попробовал это снова на angular-cli beta21 и angular2 ^ 2.1.0, и он работает как ожидалось

Этот ответ требует инициализации приложения с помощью angular-cli, который вы можете использовать

 ng new myApp 

Или на существующем

 ng init 

Обновление 08/06/2018

Для углового 6 синтаксис отличается.

 ng build --prod --build-optimizer 

Проверьте документацию

Вы можете создать проект Angular 2 (2.0.0-rc.1) в TypScript с помощью SystemJS с Gulp и SystemJS-Builder .

Ниже приведен упрощенный вариант построения, группировки и минимизации Tour of Heroes с 2.0.0-rc.1 ( полный исходный код , живой пример ).

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

Вот мой шаблон MEA2N для Angular 2: https://github.com/simonxca/mean2-boilerplate

Это простой шаблон, который использует tsc для tsc вещей. (На самом деле использует grunt-ts , который по своей сути является только командой tsc .) Не требуется Wekpack и т. Д.

Независимо от того, используете ли вы хрюканье, идея такова:

• напишите свое приложение в папке ts/ (например: public/ts/ )
• используйте tsc чтобы зеркалировать структуру каталогов вашей ts/ folder в js/ folder и просто ссылаться на файлы в папке js/ в вашем index.html .

Чтобы заставить grunt-ts работать (должна быть эквивалентная команда для простых tsc, Gulp и т. Д.), У вас есть свойство в вашем tsconfig.json называемом "outDir": "../js" , и "outDir": "../js" него в своем gruntfile.js с:

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

Затем запустите grunt ts , который примет ваше приложение в public/ts/ и отобразит его в public/js/ .

Там. Супер легко понять. Не лучший подход, но хороший, чтобы начать.

Самый простой способ, который я нашел для группировки угловых rc1 для systemJs, – использовать systemjs-builder и 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 rc1), по-видимому, заключается в использовании явных путей, т.е. moduleId: '/app/path/'

Я использовал expressjs на бэкэнд для обслуживания моего проекта ng2. Вы можете проверить это на моей странице github: https://github.com/echonax/ng2-beta-and-test-framework

На веб-сайте Angular.io в разделе «Расширенный / развертывание» рекомендуется, чтобы самый простой способ развертывания – «скопировать среду разработки на сервер».

1. перейдите в раздел под: Простейшее развертывание возможно. Окончательные файлы проекта отображаются внутри раздела кода. Обратите внимание, что он уже устанавливает код для загрузки файлов пакета npm из Интернета (вместо локальной папки npm_modules).

2. убедитесь, что он запущен на вашем локальном компьютере (запуск npm). Затем в папке проекта скопируйте все под подпапкой «/ src» в ведро S3, которое вы настроили. Вы можете использовать drag-and-drop для копирования, во время этого процесса вы можете выбрать параметр разрешения для файлов, убедитесь, что они «читаемы» для «всех».

3. под вкладкой «Свойства» в корзине найдите панель «Статический веб-сайт», установите флажок «Использовать этот ведро для размещения веб-сайта» и укажите «index.html» как для документа Index, так и для документа Error.

4. нажмите на статическую конечную точку сайта, ваш проект будет запущен!