Angular报错NG8001：'app-navbar'非已知元素的原因与解决方法

错误原因 #

1. 独立组件导入路径错误：AdminModule中导入NavbarComponent的相对路径不正确，导致组件未被正确加载到模块作用域内，UsersComponent无法识别<app-navbar>元素。
2. Angular版本或编译缓存问题：部分旧版Angular在NgModule中导入独立组件时存在兼容性bug，或是编译缓存未更新，导致组件未被正确识别。

解决办法 #

• 检查并修正导入路径：确认import { NavbarComponent } from '../components/navbar/navbar.component';中的路径与实际文件目录结构匹配。例如AdminModule位于src/app/admin，NavbarComponent位于src/app/components/navbar时该路径正确；若路径不符，调整为正确的相对路径。
• 将UsersComponent改为独立组件（推荐）：修改UsersComponent代码，开启独立组件模式并直接导入NavbarComponent，同时从AdminModule的declarations数组中移除UsersComponent：

import { Component } from '@angular/core';
import { NavbarComponent } from '../../components/navbar/navbar.component'; // 根据实际路径调整

@Component({
  selector: 'app-users',
  standalone: true,
  imports: [NavbarComponent],
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.scss']
})
export class UsersComponent { }

• 清理编译缓存：执行以下命令清理缓存后重新启动服务：

ng clean
ng serve

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