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?
