Angular共享模块报错：'app-navbar'不是已知元素

问题还原 #

已将NavbarComponent封装在NavbarModule中并导出，且在ProductsListModule里导入了NavbarModule，但在ProductsListComponent模板中使用<app-navbar>时仍提示该元素未知。

排查与解决步骤 #

1. 核对组件选择器 #

确认NavbarComponent的@Component装饰器中selector字段完全为'app-navbar'，示例如下：

@Component({
  selector: 'app-navbar', // 必须和模板中使用的标签完全一致
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent {}

常见错误：拼写错误、大小写不一致（比如写成'AppNavbar'或'navbar'）。

2. 移除多余的组件导入 #

在product-list.module.ts中，你额外导入了NavbarComponent，这完全没必要（已通过NavbarModule导入组件），反而可能导致模块解析冲突，直接删除该行：

// 删掉这行冗余代码！
// import { NavbarComponent } from 'src/app/components/navbar/navbar.component';

3. 修正模块导入路径（可选但更稳妥） #

当前使用的绝对路径src/app/components/navbar/navbar.module若路径层级复杂易出错，建议改用相对路径。假设目录结构为：

src/app/components/
├── navbar/
│   ├── navbar.module.ts
│   └── navbar.component.ts
└── products-list/
    ├── products-list.module.ts
    └── products-list.component.ts

则ProductsListModule中导入NavbarModule的路径应改为：

import { NavbarModule } from '../navbar/navbar.module';

4. 清理Angular缓存 #

Angular构建缓存可能导致模块变更未生效，执行以下命令重启服务：

ng clean
ng serve --open

5. 修正NavbarModule的依赖导入 #

NavbarModule中导入了BrowserModule，这是错误的——BrowserModule只能在根模块（AppModule）中导入一次，特性模块应使用CommonModule。删除NavbarModule中的BrowserModule导入：

// navbar.module.ts 中删掉这行错误代码
// BrowserModule

最终修正后的核心代码示例 #

navbar.module.ts #

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NavbarComponent } from './navbar.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@NgModule({
  declarations: [NavbarComponent],
  imports: [
    CommonModule,
    FontAwesomeModule
  ],
  exports: [NavbarComponent]
})
export class NavbarModule { }

product-list.module.ts #

import { NavbarModule } from '../navbar/navbar.module'; // 根据实际目录调整相对路径
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProductsListRoutingModule } from './products-list-routing.module';
import { ProductsListComponent } from './products-list.component';

@NgModule({
  declarations: [ProductsListComponent],
  imports: [
    CommonModule,
    ProductsListRoutingModule,
    NavbarModule
  ],
  exports: [ProductsListComponent]
})
export class ProductsListModule { }

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