Компиляция с опережением времени в Angular 2 кажется причудливой, и Минко Гечев говорит об этом лучше всего в этом посте: Компиляция с опережением времени в Angular 2.

Там могут быть отличные объяснения и примеры того, как настроить скомпилированное AoT веб-приложение (например, angular-cli), но вряд ли есть контент о том, как сделать ваш новый блестящий или существующий яркий пакет совместимым с AoT.

Вкратце: если опубликованный пакет не содержит файлов .metadata.json, они несовместимы для компиляции AoT.

Давайте углубимся в то, как сделать ваш пакет совместимым с AoT.

Зависимости

Компилятор Angular 2 и его интерфейс командной строки (cli) можно просто подключить через npm.

$ npm install typescript @angular/compiler @angular/compiler-cli --save-dev

Настройте файл конфигурации сборки

Для сборки пакета лучше настроить отдельный конфиг. Основная команда Angular называет его tsconfig-build.json, так что давайте придерживаться этого. Это должно выглядеть следующим образом:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    /**
      creates type definitions for the compiled files d.ts
    **/
    "declaration": true,
    /**
      output directory for the compiled files
    **/
    "outDir": "./lib",
    "stripInternal": true
  },
  /**
    array of files to be compiled, in our case is our entry file
  **/
  "files": [
    "index.ts"
  ],
  /**
    compiler options for ngc (angular compiler)
  **/
  "angularCompilerOptions": {
    /**
      don't produce .ngfactory.ts or .css.shim.ts files,
      they get published where the package will be consumed
    **/
    "skipTemplateCodegen": true
  }
}

Создать скрипт сборки через npm

Это довольно просто, как показано ниже:

“scripts”: {
 …
 “build”: “ngc -p ./tsconfig-build.json”
 … 
}

Запуск этого скрипта создаст файлы в указанном каталоге. Это кажется простым, но есть одна загвоздка: мы не используем стандартный компилятор машинописного текста, то есть tsc, для компиляции нашего пакета, вместо этого мы используем компилятор-cli Angular2, так какая разница? При компиляции с помощью ngc создается еще один набор файлов с расширением .metadata.json для размещения метаданных файлов, определенных в декораторах.

Эти файлы .metadata.json делают пакет совместимым с AoT. Просто опубликуйте свой пакет и извлекайте их без опасений, поскольку они будут поддерживать компиляцию AoT, где бы вы их ни использовали.

Теперь в сказке есть еще один поворот. Если ваш пакет содержит компоненты, которые полагаются на внешние шаблоны и стили, этот метод не будет работать. В настоящее время ngc не может включать шаблоны и стили, на которые есть ссылки, в процесс сборки. Поскольку это отдельная тема, я расскажу об этом в отдельном посте. А пока удачной публикации :)