Angular报错：'router-outlet'不是已知元素，寻求解决方案

问题根源 #

你在app.module.ts里重复导入了RouterModule.forRoot()，同时导入了AppRoutingModule（该模块内部已经调用了RouterModule.forRoot(routes)），这会导致路由模块初始化冲突，进而使得router-outlet组件无法被正确识别。

修复步骤 #

修改app.module.ts的imports数组，移除多余的RouterModule.forRoot([])，只保留AppRoutingModule即可——因为AppRoutingModule已经导出了配置好的RouterModule：

import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HomepageComponent } from './homepage/homepage.component';
import { FeaturesComponent } from './features/features.component';
import { HowItWorksComponent } from './how-it-works/how-it-works.component';
import { UploadComponent } from './upload/upload.component';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    HomepageComponent,
    FeaturesComponent,
    HowItWorksComponent,
    UploadComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule, // 仅保留此模块，它已包含完整路由配置
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule { }

验证修复 #

1. 终止当前运行的ng serve进程
2. 重新执行ng serve或ng build命令
3. 检查页面加载状态，确认router-outlet报错消失

额外说明 #

• Angular中RouterModule.forRoot()只能调用一次，通常在专门的路由模块（如你的AppRoutingModule）中调用，再在根模块导入该路由模块即可。
• 模块导入顺序确实会影响Angular的初始化逻辑，但本次问题的核心是重复调用forRoot()引发的冲突，而非单纯顺序问题。

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