Как поместить множество компонентов внутри другого компонента (модуль -> модуль -> модуль)

Question

У меня есть компонент-оболочка, который содержит (по контексту) несколько других компонентов.У меня также уже есть в папке «компоненты» модуль, который отлично экспортирует другие компоненты для приложения (меню, заголовки и т. Д.).

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

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

Вот мой код, любая помощь?

Структура папки

components

    wrapper-component
        comp1
        comp1
        wrapper-component.module.ts
    menu
    topnavbar
    components.module.ts

pages
    home
        home.module.ts

обертка-компонент.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';

/** COMPONENTS */
import { WrapperComponent } from './wrapper.component';
import { ChildComponent1 } from './comp1/comp1.component';
import { ChildComponent2 } from './comp2/comp2.component';

@NgModule({
  declarations: [
    WrapperComponent,
    ChildComponent1
    ChildComponent2
  ],
  imports: [
    CommonModule,
    IonicModule
  ],
  exports: [
    WrapperComponent,
    ChildComponent1
    ChildComponent2
  ]
})
export class WrapperComponentsModule { }

components.module.ts

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { IonicModule } from '@ionic/angular';

    /** MODULES */
    import { WrapperComponentsModule } from './wrapper-component/wrapper-component.module';

.. other components imports

    @NgModule({
      declarations: [
.. other components declarations (works fine)
      ],
      imports: [
        CommonModule,
        IonicModule,
        WrapperComponentsModule 
      ],
      exports: [
.. other components exports (works fine)
      ]
    })
    export class ComponentsModule { }

home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { ComponentsModule } from './../../components/components.module';

import { HomeComponent } from './home.component';

@NgModule({
  imports: [
    CommonModule,
    IonicModule,
    ComponentsModule,
    ..other imports
  ],
  declarations: [
    HomeComponent,
  ]
})
export class HomePageModule {}

Я знаю, что мог бы просто написать все компоненты внутри ComponentsModule, таким образом, он работает нормально, но я подумал, что он может работать другим, более цивилизованным образом ...

Можете ли вы помочь?

Answer 1

Вам необходимо добавить WrapperComponentsModule в раздел экспорта компонентов.module.ts.