Angular 16共享模块导出组件在Dashboard模块中无法使用问题

问题根源 #

你的dashboard.module.ts中SharedModule的导入路径错误。当前代码里导入路径写的是./shared/shared.module，这会尝试在dashboard文件夹的子目录中查找SharedModule，但实际SharedModule位于src/app/shared目录，和src/app/dashboard目录是同级关系，导致Dashboard模块并未真正导入SharedModule，因此无法识别app-navbar组件。

解决方案 #

修改dashboard.module.ts中的SharedModule导入路径，从相对路径./shared/shared.module改为../shared/shared.module：

修改后的dashboard.module.ts代码 #

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardComponent } from './dashboard/dashboard.component';
// 修正路径：从./shared改为../shared
import { SharedModule } from '../shared/shared.module';

@NgModule({
  declarations: [
    DashboardComponent
  ],
  imports: [
    CommonModule,
    SharedModule
  ]
})
export class DashboardModule { }

验证要点 #

1. 确认SharedModule已正确导出NavbarComponent：你的shared.module.ts中exports数组包含NavbarComponent，这部分是正确的。
2. 确认模块结构：你的项目目录结构应该符合以下层级：

   src/
     app/
       shared/
         shared.module.ts
         navbar/
           navbar.component.ts
       dashboard/
         dashboard.module.ts
         dashboard/
           dashboard.component.ts
           dashboard.component.html
       app.module.ts
   

3. 清理缓存并重新构建（可选）：如果修改后仍有问题，执行以下命令清理缓存：

   ng clean
   ng build
   ng serve
   

内容的提问来源于stack exchange，提问作者AffiliateVDev