Problem with SharedModule Angular getting Error error NG8001: 'app-master-panel' is not a known element

Question

i have a problem in Angular 11 with SharedModule. All is configured good but still i am getting this message even the configuration is correct. I configured my SharedModule with shared components declared and exported, then i have imported in AppComponent and DashBoardComponent but when i use MasterPanelComponent into DashboardComponent get the error. Why?

Error: src/app/modules/dashboard/components/dashboard/dashboard.component.html:3:1 - error NG8001: 'app-master-panel' is not a known element:
1. If 'app-master-panel' is an Angular component, then verify that it is part of this module.
2. If 'app-master-panel' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

SharedModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BasePanelLeftComponent } from './../components/base-panel-left/base-panel-left.component';
import { BasePanelRigthComponent } from './../components/base-panel-rigth/base-panel-rigth.component';
import { MasterPanelComponent } from './../components/master-panel/master-panel.component';


 @NgModule({
 imports: [
 CommonModule
 ],
 declarations: [BasePanelLeftComponent,BasePanelRigthComponent,MasterPanelComponent],
 exports:[
 BasePanelLeftComponent,BasePanelRigthComponent,MasterPanelComponent
 ]
 })
 export class SharedModule { }

AppModule

             import { BrowserModule } from '@angular/platform-browser';
          import { NgModule } from '@angular/core';
          
          import { AppRoutingModule } from './app-routing.module';
          import { AppComponent } from './app.component';
          import {BrowserAnimationsModule} from '@angular/platform-browser/animations'
          
          import {ButtonModule} from 'primeng/button';
          import {MegaMenuModule} from 'primeng/megamenu';
          import {SidebarModule} from 'primeng/sidebar';
          import {MenuModule} from 'primeng/menu';
          import {PanelMenuModule} from 'primeng/panelmenu';
          
          
          import { DashboardModule } from './modules/dashboard/dashboard.module';
          import { HomeComponent } from './components/home/home.component';
          import { SharedModule } from './shared/shared.module';
          
          
          
          @NgModule({
            declarations: [
              AppComponent,
              HomeComponent
            ],
            imports: [
              SharedModule,
              BrowserModule,
              AppRoutingModule,
              SidebarModule,
              BrowserAnimationsModule,
              ButtonModule,
              MenuModule,
              PanelMenuModule,
              DashboardModule,
              MegaMenuModule
            ],
            providers: [],
            bootstrap: [AppComponent]
          })
          export class AppModule { }

DashBoardModule

     import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { DashboardRoutingModule } from './dashboard-routing.module';
    import { SharedModule } from '../../shared/shared.module';
    
    
    @NgModule({
      declarations: [],
      imports: [
        CommonModule,
        DashboardRoutingModule,
        SharedModule
    
      ]
    })
    export class DashboardModule { }

Answer 1

You have to import that component in all of your module.ts. So add in shared module as well.