Angular 10中如何在其他模块内使用自定义组件？解决'app-sidebar'未知元素报错问题

我来帮你搞定这个NG8001错误！你目前的操作里有个关键误区，咱们一步步修正：

核心问题分析 #

你错误地把SidebarComponent直接加到了目标模块的imports数组里——Angular的imports数组只能接收NgModule类型，不能直接放组件。组件必须通过它所属模块的exports暴露，其他模块导入这个模块才能使用组件。

正确操作步骤 #

1. 为SidebarComponent创建/配置所属模块 #

首先确保你的侧边栏组件属于一个独立模块（比如SidebarModule），并在该模块中导出它：

// sidebar.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SidebarComponent } from './sidebar.component';

@NgModule({
  declarations: [SidebarComponent], // 声明组件
  imports: [CommonModule],
  exports: [SidebarComponent] // 导出组件，允许其他模块使用
})
export class SidebarModule { }

如果之前没有为SidebarComponent单独创建模块，赶紧生成一个（可以用ng generate module sidebar命令快速创建）。

2. 在目标模块中导入SidebarModule #

回到你的LibraryModule（也就是要使用侧边栏的模块），导入SidebarModule而不是直接导入组件：

// library.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LibraryHomeComponent } from './library-home/library-home.component';
import { SidebarModule } from '../sidebar/sidebar.module'; // 导入组件所属模块

@NgModule({
  declarations: [LibraryHomeComponent],
  imports: [
    CommonModule,
    SidebarModule // 这里添加模块，而非组件
  ]
})
export class LibraryModule { }

3. 验证组件选择器 #

确认SidebarComponent的@Component装饰器里的selector和你模板中使用的app-sidebar完全一致：

// sidebar.component.ts
@Component({
  selector: 'app-sidebar', // 确保选择器正确
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent { }

4. 重启开发服务器（可选但推荐） #

有时候Angular的缓存会导致修改不即时生效，运行ng serve重启服务，再检查报错是否消失。

为什么之前的操作无效？ #

Angular的模块隔离机制要求：组件默认只能在声明它的模块内使用。要让其他模块访问，必须通过所属模块的exports数组暴露，然后其他模块导入这个模块，才能使用里面的导出组件。直接把组件加到imports数组是不符合Angular模块规则的，所以会触发NG8001错误。

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