Компиляция с опережением времени в 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 не может включать шаблоны и стили, на которые есть ссылки, в процесс сборки. Поскольку это отдельная тема, я расскажу об этом в отдельном посте. А пока удачной публикации :)