如何解决Angular报错'router-outlet' is not a known element

错误根本原因 #

router-outlet是Angular Router模块提供的内置指令，哪个模块下的组件使用了该指令，就需要在对应模块的imports配置中引入RouterModule。你的SiteLayoutComponent属于Shared模块，但SharedModule没有导入RouterModule，所以模板编译时无法识别<router-outlet>标签，抛出NG8001错误。

修复步骤 #

步骤1：修改SharedModule配置 #

在SharedModule中导入Router模块，同时对外导出需要被其他模块使用的组件：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// 新增导入RouterModule
import { RouterModule } from '@angular/router';

import { HeaderComponent } from './layouts/header/header.component';
import { SiteLayoutComponent } from './layouts/site-layout/site-layout.component';


@NgModule({
  declarations: [
    HeaderComponent,
    SiteLayoutComponent
  ],
  imports: [
    CommonModule,
    // 新增导入RouterModule
    RouterModule
  ],
  // 新增exports配置，对外暴露组件供其他模块调用
  exports: [
    SiteLayoutComponent,
    HeaderComponent
  ]
})
export class SharedModule { }

步骤2：确认AppModule导入了SharedModule #

检查你的AppModule是否已经导入SharedModule，否则App模块无法识别Shared模块提供的SiteLayoutComponent：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
// 导入SharedModule
import { SharedModule } from './shared/shared.module';
import { AppComponent } from './app.component';
import { LoginPageComponent } from './components/login-page/login-page.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginPageComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    // 引入SharedModule
    SharedModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

补充说明 #

Angular中所有组件、指令、管道的作用域都是模块级的，只有当前模块导入了对应依赖、或者当前模块本身声明了对应组件/指令，模板编译时才能正确识别。如果你后续在Shared模块的其他组件中也用到了路由相关指令（比如routerLink），当前配置已经可以覆盖使用需求，不需要额外导入其他依赖。

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