Angular CLI 18.2.7中'app-header'等元素识别失败求助

针对app-header和app-footer的排查步骤 #

• 核对组件selector拼写：打开header.component.ts和footer.component.ts，确认@Component装饰器里的selector字段是'app-header'和'app-footer'，和模板中使用的完全一致（注意kebab-case格式，不能写成驼峰或大小写错误）。
• 确认组件声明：如果用的是NgModule模式，检查app.module.ts的declarations数组里是否包含HeaderComponent和FooterComponent，且已经正确导入这两个组件的路径。
• 跨模块组件处理：如果组件来自其他功能模块，要确保该模块的exports数组里导出了这两个组件，同时app.module.ts已经导入了这个功能模块。

针对router-outlet的排查步骤 #

• 确保RouterModule正确初始化：在app.module.ts的imports数组里，必须是RouterModule.forRoot(yourRoutes)（根模块用forRoot，子模块用forChild），不能只写RouterModule。同时要传入有效的路由配置数组，不能是空数组（至少要有默认路由）。
• 检查模板拼写：确认模板里的router-outlet没有拼写错误，比如不要写成routeroutlet或RouterOutlet。

适配Angular 18默认的Standalone组件模式 #

Angular 18默认启用Standalone组件，如果你的AppComponent里有standalone: true配置，那么app.module.ts的配置不会生效，需要直接在AppComponent的imports数组里添加依赖：

// app.component.ts
import { Component } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  // 其他路由配置
];

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterModule.forRoot(routes),
    HeaderComponent,
    FooterComponent
  ],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

最后一步：清理缓存重启服务 #

执行ng cache clean清理Angular缓存，然后停止当前的ng serve进程，重新启动开发服务器。缓存残留可能会导致模块变更不生效，引发未知元素错误。

内容的提问来源于stack exchange，提问作者Dhiyaul Naufal Zainuddin