Как собрать библиотеку для angular 12 с рекурсивными компонентами?

Для сборки библиотеки Angular с рекурсивными компонентами в Angular 12, вам потребуется выполнить несколько шагов.

1. Создайте новый проект библиотеки, используя Angular CLI командой:

ng new my-library --create-application=false

2. Перейдите в каталог созданного проекта библиотеки:

cd my-library

3. Создайте новый модуль библиотеки:

ng generate module my-library --module=app --project=my-library

В этой команде мы создаем модуль с именем "my-library" и добавляем его в главный модуль вашего приложения, указывая --module=app --project=my-library.

4. Создайте компонент библиотеки:

ng generate component my-component --project=my-library

В этой команде мы создаем компонент с именем "my-component" внутри проекта "my-library".

5. Создайте файл public-api в каталоге проекта библиотеки. В этом файле вы будете экспортировать все необходимые компоненты, модули, сервисы и т.д., которые вы хотите сделать доступными извне библиотеки.

6. В файле my-component.component.ts добавьте декоратор @Input() component: any;, чтобы вы могли передавать компоненты рекурсивно.

7. В файле my-component.component.html добавьте код, который отображает переданный компонент, например, <ng-container *ngComponentOutlet="component"></ng-container>. Вы можете настроить внешний вид этого кода в соответствии с вашими потребностями.

8. В файле my-component.component.ts добавьте входной параметр @ViewChild(MyComponentComponent) childComponent: MyComponentComponent;. Это нужно для рекурсивного получения доступа к компоненту.

9. В файле my-component.component.ts добавьте метод, который будет вызывать метод внутри компонента-ребенка:

public doSomething(): void {
  this.childComponent.doSomething();
}

10. В вашем проекте приложения, где вы хотите использовать вашу библиотеку, добавьте ссылку на вашу библиотеку в файле angular.json:

"projects": {
  "my-app": {
    "architect": {
      "build": {
        "options": {
          "tsConfig": "./tsconfig.app.json",
          "assets": [
            "src/favicon.ico",
            "src/assets"
          ],
          "styles": [
            "src/styles.css"
          ],
          "scripts": [],
          "allowedCommonJsDependencies": [
            "my-library"
          ]
        },
        // ...

11. Соберите вашу библиотеку, используя Angular CLI команду:

ng build my-library

После выполнения этой команды, вы найдете собранную библиотеку в каталоге dist.

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