How to put a plethora of components inside another component (module -> module -> module)

Ionic Framework
1

I have a wrapper component that contains (by context) several other components. I also already have in the folder “components” a module that exports other components for the application (menu, headers, etc.) perfectly.

What I wanted was to create a module for this component wrapper, import it into components.module and make it visible to the entire application, keeping a clean organization.

But if I import the wrapper-module into the components.module and use the wrapper-component on the HomeComponent for example it breaks and don’t recognize the component.

Here’s my code, any help?

Folder Structure

components

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

pages
    home
        home.module.ts

wrapper-component.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 {}

I know I could simply write all the components inside ComponentsModule, it works fine this way, but I thought it could work in another more civilized way…

Can you help?

2

Have you found any solution?

3

FWIW, I’m yet to be convinced there’s anything remotely civilized about lazy loading. @MariGari: have you tried just putting everything in a single AppModule?