In my project structure, I have a shared folder containing shared.module.ts. Additionally, there is a modules folder with sub-modules, one of which is Dashboard.module.ts. Inside the shared module, I created a custom sidebar menu that I intend to use within the Dashboard module.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './header/header-component/header-component.component';
import { LoaderComponent } from './components/loader/loader.component';
import { ModalComponent } from './components/modal/modal.component';
import { SidebarMenuComponent } from './components/sidebar-menu/sidebar-menu.component';
import { WidgetComponent } from './components/widget/widget.component';
import { BarChartComponent } from './components/bar-chart/bar-chart.component';
import { SliderComponent } from './components/slider/slider.component';
import { RightBarComponent } from './components/right-bar/right-bar.component';
@NgModule({
declarations: [
HeaderComponent,
LoaderComponent,
ModalComponent,
SidebarMenuComponent,
WidgetComponent,
BarChartComponent,
SliderComponent,
RightBarComponent
],
imports: [
CommonModule,
BrowserModule,
BrowserAnimationsModule
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
exports:[HeaderComponent,LoaderComponent,ModalComponent,SidebarMenuComponent,RightBarComponent]
})
export class SharedModule { }
The component I want to use is RightBarComponent, which I included in both declarations and exports. In the Dashboard module, I defined one component - Dashboard component - and added the following HTML snippet:
<app-right-bar></app-right-bar>
However, this resulted in an error message:
Error: src/app/modules/dashboard/pages/dashboard/dashboard.component.html:2:1
- error NG8001: 'app-right-bar' is not a known element:
- If 'app-right-bar' is an Angular component, then verify that it is part of this module.
- If 'app-right-bar' is a Web Component, add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' within this component to suppress this message.
This is my dashboard.module.ts file:
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardComponent } from './pages/dashboard/dashboard.component';
import { DashboardRoutingModule } from './dashboard-routing.module';
@NgModule({
declarations: [
DashboardComponent
],
imports: [
CommonModule,
DashboardRoutingModule
],
})
export class DashboardModule { }
Lastly, here is my right-bar.component.ts:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-right-bar',
templateUrl: './right-bar.component.html',
styleUrls: ['./right-bar.component.scss']
})
export class RightBarComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
Can anyone spot where I might be missing something? Thank you in advance for any guidance.