Сборка Angular2 HTML и TypeScript в один файл

Question

Я собираю приложение (крупномасштабное), используя Angular2 и TypeScript. Он должен быть разделен на многочисленные проекты, и каждый проект будет иметь множество компонентов, каждый из которых имеет .html Посмотреть, .css таблица стилей и .ts логика / класс.

Я бы хотел, чтобы каждый проект компилировался в один *.js файл и будет скопирован на хост-сайт, который будет работать в IIS. Это будет похоже на то, как приложение WPF или Silverlight создается с .xaml файлы все собираются в .dll,

Я посмотрел в Интернете и смог получить .ts файлы для сборки в один .js файл с использованием --outFile вариант. Но это не помогает мне с .html файлы или css,

Любая помощь будет принята с благодарностью, даже если она скажет, что то, что я прошу, невозможно:-)

Стивен

Answer 1

Если вы используете по умолчанию Angular2 tsconfig.json с загрузчиком SystemJS:

"module": "system",
"moduleResolution": "node",
...

Вы можете оставить всю тяжелую работу над SystemJS Build Tool. Это, например, как я делаю это в моих проектах, используя gulp:

1. Компилировать *.ts и встроенные *.html шаблоны

   я использую gulp-angular-embed-templatesсразу, чтобы включить всеtemplateUrlвtemplate строки (этот плагин работает как с 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'));
   });
   

   Это создаст много анонимных модулей System.register в build/jsкаталог. Все они будут иметь своиtemplateUrl встроенный уже.

2. Объедините все в один.jsфайл

   Для этого я использую 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.

   призвание builder.bundle('main', ...) ищет main.js (это мой первоначальный сценарий с Angular's bootstrap вызов. Это тот же файл, который вы можете увидеть в 5 минут быстрого запуска), потому что я добавляю .js на все пути, которые ищет строитель. Это потому, что когда вы импортируете модуль в TS, вы обычно вызываете:

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

   который составлен как ./modal-result.component зависимость и это не заботится о расширении файла. Вот почему я должен был добавить *.js ко всем путям, чтобы помочь строителю найти все скомпилированные файлы JavaScript.

   meta параметры просто говорят сборщику игнорировать зависимости, которые я не хочу связывать. Это сам Angular2 и rxjs библиотека, потому что я включаю import 'rxjs/add/operator/map' в main.ts,

   Это генерирует один app.bundle.js файл со всеми модулями, зарегистрированными как именованные модули с использованием System.register.

3. Используя нашapp.bundle.js

   Последняя часть - кусок пирога. Мы просто импортируем материал Angular2 по умолчанию, а затем используем bundle возможность сказать 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>
   

   Когда мы звоним System.import('main') это на самом деле первые загрузки /web/app.bundle.js и регистрирует все модули в пакете и после этого импортирует модули main с нашей начальной загрузкой Angular2.

   И это все!

Вам на самом деле не нужно использовать gulp на все и делай все чисто node скрипт.

Объединять CSS-файлы легко с такими вещами, как cssnano, и я уверен, что вы можете найти учебные пособия о том, как его использовать везде.

Я уверен, что есть другие пути к тому же. Angular2 разработан, чтобы не ограничивать вас в использовании только одной технологии. Тем не менее, использование SystemJS кажется мне самым простым способом, потому что он использует ту же систему модулей, что и Angular2 по умолчанию.

Я уверен, что вы могли бы использовать, например, commonjs формат, но это потребует от вас также использовать некоторые polyfill для require() загрузчик, но я еще не пробовал. Я верю, что UMD тоже стоит попробовать.