Как я фактически развертываю приложение Angular 2 + Typescript + systemjs?

В учебнике angular.io есть учебник быстрого запуска, в котором используются typescript и systemjs. Теперь, когда я запускаю этот мини-принтер, как бы я мог создать что-то развертываемое? Я не мог найти никакой информации об этом вообще.

Нужны ли мне дополнительные инструменты, любые дополнительные настройки в System.config?

(Я знаю, что я мог бы использовать webpack и создать один пакет bundle.js, но я хотел бы использовать systemjs, как он используется в учебнике)

Может ли кто-то поделиться процессом сборки с этой установкой (Angular 2, TypeScript, systemjs)

Ответы

Ответ 1

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

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

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

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

gulp -concat
gulp -html замены
gulp - typescript
gulp -uglify

Ниже приведен образец, поэтому его можно было бы адаптировать.

Создать 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>

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

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

Ответ 2

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

ng build -prod

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

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

Update

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

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

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

ng new myApp

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

ng init

Ответ 3

Вы можете построить проект Angular 2 (2.0.0-rc.1) в Typescript с помощью 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']);

Ответ 4

Здесь мой шаблон MEA2N для Angular 2: https://github.com/simonxca/mean2-boilerplate

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

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

напишите ваше приложение в папке 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/.

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

Ответ 5

Самый простой способ, который я нашел для пакета angular rc1 для systemJs, - использовать 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);
        });
});

Как указано в комментариях, в системе в настоящее время возникают проблемы при связывании компонентов с использованием moduleId: module.id

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

Текущая рекомендация (angular 2 rc1), по-видимому, заключается в использовании явных путей, т.е. moduleId: '/app/path/'

Ответ 6

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

Ответ 7

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

перейдите в раздел под: Простейшее развертывание возможно. Окончательные файлы проекта отображаются внутри раздела кода. Обратите внимание, что он уже устанавливает код для загрузки файлов пакета npm из Интернета (вместо локальной папки npm_modules).
убедитесь, что он запущен на вашем локальном компьютере (запуск npm). Затем в папке проекта скопируйте все под подпапкой "/src" в ведро S3, которое вы настроили. Вы можете использовать drag-and-drop для копирования, во время этого процесса вы можете выбрать параметр разрешения для файлов, убедитесь, что они "читаемы" для "всех".
под вкладкой "Свойства" в корзине найдите панель "Статический веб-хостинг", установите флажок "Использовать этот ведро для размещения веб-сайта" и укажите "index.html" как для документа Index, так и для документа Error.
нажмите на статическую конечную точку сайта, ваш проект будет запущен!