I seem to be facing an issue with how my modules are structured, as I am unable to use shared components across different modules.
Basically, I have a Core module and a Feature module. The Core module contains components that I want to share across multiple Feature modules. The Feature module imports the Core module.
Within the FeatureModule, I have a component named PageSectionComponent that I want to display on a dashboard page. However, when trying to use the selector, I receive the error
page-section is not a known elementFilePath
src
- components
- site-layout.component.html
- site-layout.component.ts
- modules
- core
- core-routing.module.ts
- core.module.ts
- feature
- pages
- dashboard-page.component.html
- dashboard-page.component.ts
- components
- page-section.component.html
- page-section.component.ts
- feature-routing.module.ts
- feature.module.ts
feature.module.ts
import { NgModule } from '@angular/core';
import { FeatureRoutingModule } from './feature-routing.module';
import { CoreModule } from '../core/core.module';
@NgModule({
imports: [
CoreModule,
FeatureRoutingModule
]
})
export class FeatureModule {}
core.module.ts - imports both the SiteLayout and the PageSection.
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SiteLayoutComponent } from 'app/components';
import { CoreRoutingModule } from './core-routing.module';
import { PageSectionComponent } from '@feature/components';
@NgModule({
declarations: [
PageSectionComponent,
SiteLayoutComponent
],
imports: [
CommonModule,
CoreRoutingModule,
],
exports: [
PageSectionComponent,
SiteLayoutComponent
]
})
export class CoreModule {}
The problem seems to lie within my routing configuration. I am using the SiteLayoutComponent to wrap pages from both the Core and Feature modules. Thus, my FeatureRoutingComponent looks like this, where all paths include the SiteLayoutComponent, followed by the specific Dashboard or other component based on the path.
feature-routing.component.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SiteLayoutComponent } from '@components/layouts/site-layout.component';
import { DashboardPageComponent } from '@feature/pages';
const routes: Routes = [
{
path: '',
component: SiteLayoutComponent,
children: [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardPageComponent }
]
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class FeatureRoutingModule { }
Currently, the SiteLayoutComponent only contains the router-outlet.
site-layout.component.html
<router-outlet></router-outlet>
My trouble starts when attempting to place a 'PageSectionComponent' in the DashboardPageComponent.
dashboard-page.component.html
<page-section></page-section>
This results in the error stating that page-section is not a recognized element.
After researching multi-module applications, it seems that adding the PageSectionComponent to the CoreModule's imports + exports and then importing the CoreModule within the FeatureModule should work, but it doesn't.
My current hypothesis is that because the Site-Layout is a shareable component referenced directly in feature-routing.module.ts AND core.module.ts, it may be causing the imported PageSectionComponent to lose scope somehow.