SharedModule Angular 的问题出现 Error error NG8001: 'app-master-panel' is not a known element

Question

我在使用 SharedModule 的 Angular 11 中遇到问题。一切都配置好，但即使配置正确，我仍然收到此消息。我用声明和导出的共享组件配置了我的 SharedModule，然后我在 AppComponent 和 DashBoardComponent 中导入了但是当我使用 MasterPanelComponent 到 DashboardComponent 时得到错误。为什么？

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.

共享模块

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

应用模块

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

仪表板模块

     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

您必须在所有 module.ts 中导入该组件。所以也添加共享模块。