Angular聊天应用开发遇NG8001错误：'router-outlet'非已知元素求助

这个错误是因为你没有在模块中导入并配置Angular路由模块，导致Angular无法识别router-outlet组件。按以下步骤修复：

1. 配置AppModule的路由规则 #

打开src/app/app.module.ts，添加路由相关的导入和配置：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
// 导入你的两个页面组件
import { ChatHomeComponent } from './chat-home/chat-home.component';
import { ChatRoomComponent } from './chat-room/chat-room.component';

// 定义路由映射
const routes: Routes = [
  { path: '', component: ChatHomeComponent }, // 默认加载聊天概览页
  { path: 'chat-room', component: ChatRoomComponent }, // 聊天房间路由
  { path: '**', redirectTo: '' } // 处理未定义路由，重定向到首页
];

@NgModule({
  declarations: [
    AppComponent,
    ChatHomeComponent,
    ChatRoomComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes) // 注册根路由配置
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 确认组件已正确创建 #

确保ChatHomeComponent和ChatRoomComponent是通过Angular CLI创建的（比如执行ng generate component chat-home和ng generate component chat-room），并且已经在AppModule的declarations数组中声明。

3. 完善AppComponent模板 #

修改src/app/app.component.html，添加router-outlet标签和导航链接：

<nav>
  <a routerLink="/">聊天概览</a>
  <a routerLink="/chat-room">进入聊天房间</a>
</nav>

<router-outlet></router-outlet>

完成以上步骤后，重新启动项目（ng serve），错误应该就会消失，你可以通过导航链接在两个页面之间切换。

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