Angular 15报错：'router-outlet'不是已知元素的排查与解决

项目背景 #

正在学习Angular，搭建了一个Angular项目。

核心文件代码 #

app-routing.module.ts #

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DefaultLayoutComponent } from './theme/Layout/default-layout/default-layout.component';
const routes: Routes = [
    {
        path: '',
        component: DefaultLayoutComponent,
        loadChildren: () => import('./routers/routers.module').then((x) => x.RoutersModule),
    },
    { path: '', redirectTo: '/home', pathMatch: 'full' },
];
@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
})
export class AppRoutingModule {}

theme.module.ts #

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BannerComponent } from './Layout/banner/banner.component';
import { DataTableComponent } from './Layout/data-table/data-table.component';
import { DefaultLayoutComponent } from './Layout/default-layout/default-layout.component';
import { FooterComponent } from './Layout/footer/footer.component';
@NgModule({
    declarations: [BannerComponent, DataTableComponent, DefaultLayoutComponent, FooterComponent],
    imports: [CommonModule],
})
export class ThemeModule {}

app.module.ts #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { ThemeModule } from './theme/theme.module';
@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AppRoutingModule, HttpClientModule, RouterModule, ThemeModule],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

app.component.html #

<router-outlet></router-outlet>

default-layout.component.html #

希望在default-layout组件中使用<router-outlet>，代码如下：

<app-banner></app-banner>
<p>default-layout works!</p>
<router-outlet></router-outlet>
<app-footer></app-footer>

报错信息 #

'router-outlet' is not a known element:

1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.ngtsc(-998001)

问题原因与解决方案 #

原因 #

<router-outlet>是Angular Router模块提供的内置组件，而DefaultLayoutComponent隶属于ThemeModule，但ThemeModule未导入RouterModule，导致Angular无法识别该组件。

解决方法 #

修改theme.module.ts，在imports数组中添加RouterModule：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router'; // 新增导入语句
import { BannerComponent } from './Layout/banner/banner.component';
import { DataTableComponent } from './Layout/data-table/data-table.component';
import { DefaultLayoutComponent } from './Layout/default-layout/default-layout.component';
import { FooterComponent } from './Layout/footer/footer.component';
@NgModule({
    declarations: [BannerComponent, DataTableComponent, DefaultLayoutComponent, FooterComponent],
    imports: [CommonModule, RouterModule], // 加入RouterModule
})
export class ThemeModule {}

补充说明：按照上述修改后，问题已解决。

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