Angular 在另一个模块中使用共享模块组件

Question

as a structure I have shared folder and inside there is a shared.module.ts. And also I have modules folder and inside it I have modules and one of them is Dashboard.module.ts. I wrote one custom sidebar menu inside shared module and I will use it inside my Dashboard module. Here is my shared.module.ts

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 { }

RightBarComponent component is the component I want to use. I both wrote it inside declarations and exports. and in Dashboard module I wrote one component which is Dashboard component inside html I wrote

<app-right-bar></app-right-bar>

but it gave error below

Error: src/app/modules/dashboard/pages/dashboard/dashboard.component.html:2:1

• error NG8001: 'app-right-bar' is not a known element:
  1. If 'app-right-bar' is an Angular component, then verify that it is part of this module.
  2. If 'app-right-bar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

this is my dashboard.module.ts

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 { }

and this 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 {
  }

}

Where is my missing? Thanks in advance.

Answer 1

Your missing is that u missed to import Shared module to your Dashboard module

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,
    SharedModule,
    DashboardRoutingModule
  ],
})
export class DashboardModule { }