[ref: https://angular.io/guide/schematics] Схема - это генератор кода на основе шаблона, который поддерживает сложную логику. Это набор инструкций по преобразованию программного проекта путем генерации или изменения кода. Схемы упаковываются в коллекции и устанавливаются с помощью npm.

Коллекция схем может быть мощным инструментом для создания, изменения и поддержки любого программного проекта, но особенно полезна для настройки проектов Angular в соответствии с конкретными потребностями вашей организации. Вы можете использовать схемы, например, для создания часто используемых шаблонов пользовательского интерфейса или определенных компонентов, используя предопределенные шаблоны или макеты. Вы можете использовать схемы для обеспечения соблюдения архитектурных правил и соглашений, делая ваши проекты согласованными и взаимодействующими.

Давайте начнем…

Создайте новое приложение библиотеки с помощью angular-cli (вместо приложения angular)

ng new angular-schematic-example  --create-application=false

Это создаст новое приложение angular без какого-либо каталога src.

Используйте ng generate для создания новой библиотеки

ng generate library example-schematic

Эта команда создает структуру папок как projects / example-schematics / src / lib

В основном это настройка библиотеки angular, и вы заметите, что angular.json обновлен с этой новой библиотекой, добавленной в узел дерева проектов с projectType, указанным как библиотека.

Далее мы приступим к созданию наших первых схем в сгенерированной библиотеке.

Вам нужно будет установить следующее из корневой папки

npm install @angular-devkit/core
npm install @angular-devkit/schematics
npm install @schematics/angular --save-dev

А в Schematic library package.json добавьте @ angular-devkit / core и @ angular-devkit / schematic в качестве одноранговых зависимостей. Их не следует устанавливать в библиотеке проектов, потому что это приведет к ошибке при создании библиотеки.

На этом этапе рекомендуется создать схемную библиотеку (из корневой папки), чтобы убедиться, что до сих пор нет проблем с настройкой.

ng build example-schematics --prod

Добавить - -prod, иначе может появиться предупреждение, как показано ниже.

************************************************* ***************************
Не рекомендуется публиковать библиотеки Ivy в репозиториях NPM.
Подробнее здесь: https://v9.angular.io/guide/ivy#mainpting-library-compatibility
********************** ************************************************* *****

Теперь, когда мы реализуем нашу первую схему, все станет еще интереснее.

В процессе сборки библиотеки на предыдущем шаге была бы создана папка / dist / example-schematic для упаковки и распространения. В идеале вы можете запустить npm publish из папки / dist / example-schematic, чтобы опубликовать вашу библиотеку в репозитории npm.

Angular cli использует модуль узла ng-packagr для компиляции и создания папки / dist для библиотек. Взгляните на ng-package.json.

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/example-schematic",
  "lib": {
    "entryFile": "src/public-api.ts"
  }
}

По сути, этот файл содержит всю информацию, требуемую ng-packagr, включая entryFile, который используется для упаковки любых включенных многократно используемых библиотек.

Схема - это деревья, правила и контекст.

По сути, дерево схем - это представление дерева проекта, которое вы хотите создать, обновить или удалить в соответствии с правилами.

Мы будем модифицировать нашу библиотеку пример-схема в соответствии с руководством по angular: https://angular.io/guide/schematics-for-libraries

Весь исходный код можно найти здесь (стоит его клонировать сейчас): https://github.com/VishalAkhouri/angular-schematic-example

  • (продолжая предыдущие шаги…) Начните с добавления новой папки / schematics внутри / projects / example-schematic
  • Добавьте новый collection.json в папку / schematics.
{
  "$schema": "../../node_modules/@angular-devkit/schematics/collection-schema.json",
  "schematics": {
    "create-component": {
      "description": "Generate a custom component in the project.",
      "factory": "./create-component/index#createComponent",
      "schema": "./create-component/schema.json"
    }
  }
}
  • В рамках этого примера схемы мы создаем пользовательский компонент. Нам нужно определить фабричный метод createComponent, а также определить schema.json
  • Мы также включим файлы шаблонов, к которым будут применяться правила, и добавим их в дерево схем.
  • Также вам необходимо добавить расположение файла schematics collection.json в свой package.json.
"schematics": "./schematics/collection.json"

(если вы забудете добавить, что вы получите сообщение об ошибке при использовании этой схемы: Произошло необработанное исключение: пакет «example-schematic» был найден, но не поддерживает схемы.)

  • Вот и все, что касается кодирования новой схемы.

Затем мы рассмотрим компиляцию и сборку пакета для npm publish.

На этом этапе вам, вероятно, следует заново создать свою библиотеку, чтобы проверить, не сломано ли что-нибудь еще.

ng build example-schematic --prod

Это обновит / создаст папку / dist. И если вы исследуете папку dist, нет ничего, что связано с компилированием или копированием Schematics.

Вот шаги для этого:

  • Начните с создания файла tsconfig.schematics.json в корне проекта библиотеки примеров-схем на том же уровне, что и существующий tsconfig.lib.json.
  • Обновите / добавьте сценарий npm для компиляции и копирования файлов tsc /, schema.json и collection.json. Папка tp / dist (используйте cp -p для относительного копирования в Windows, иначе вам может потребоваться выйти, чтобы использовать ../../dist / не выдает ошибку в Windows) (скрипт npm в репозитории github angular-schematics-example был протестирован на Mac OS)
  • По сути, сборка схематического примера представляет собой двухэтапный процесс.

ng build пример схемы --prod

и cd в каталог / projects / example-schematic и запустите ../../node_modules/.bin/tsc -p tsconfig.schematics.json

  • Вероятно, вам следует добавить еще один скрипт в основной файл app package.json, чтобы объединить два шага следующим образом:
"build:example-schematic": "ng build example-schematic --prod && (cd projects/example-schematic && npm run build)"

Вы можете использовать приведенный ниже сценарий для публикации в npm (возможно, потребуется настроить локальный компьютер для публикации в npm напрямую)

"publish:example-schematic": "(cd dist/example-schematic && npm publish)"

Далее мы рассмотрим шаги по локальному тестированию нашего приложения.

  • Создайте скрипт для npm упаковки вашей библиотеки
"publish:local:example-schematic": "(cd dist/example-schematic && npm pack)",

Будет создан файл example-schematic-0.0.1.tgz, который мы установим непосредственно в нашем локальном тестовом приложении.

  • Создайте тестовое приложение с помощью ng new test-example-app
  • Теперь установите файл tgz, сгенерированный на предыдущих шагах, указав правильное место, например npm install ‹путь к tgz› /example-schematic-0.0.1.tgz
  • Наконец, запустите вашу схему (ng generate example-schematic: create-component)
  • Это должно сгенерировать такой вывод в вашем тестовом приложении, и файл пользовательского компонента должен быть создан по правильному пути.
akhouri@Akhouris-MBP angular-schematic-example-test % ng generate example-schematic:create-component
  ? Enter module path : hello
  ? Name of new component: world
CREATE src/app/hello/world/world.component.ts (133 bytes)

Исходный код этой статьи можно найти здесь: https://github.com/VishalAkhouri/angular-schematic-example

Этот пример должен дать вам представление о том, как создавать и использовать схемы, а также предоставить базовую структуру для создания более сложных схем Angular для вашего приложения.

Любые вопросы или комментарии приветствуются. Наслаждаться!