Angular 18中router-outlet无法识别（NG8001错误）求助

问题描述 #

在Angular 18项目中使用<router-outlet>时触发NG8001错误，提示该元素未被识别。即使已导入RouterModule，问题仍未解决。具体报错信息：

Error: src/app/app.component.html:3:1 - error NG8001: 'router-outlet' is not a known element:

1. 若'router-outlet'是Angular组件，请确认它属于当前模块。
2. 若'router-outlet'是Web组件，请将'CUSTOM_ELEMENTS_SCHEMA'添加到该组件的'@NgModule.schemas'中以抑制此消息。

用户提供的项目代码如下：

app.module.ts #

import { CommonModule } from "@angular/common";
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { MatBadgeModule } from "@angular/material/badge";
import { MatDialogModule } from "@angular/material/dialog";
import { MatIconModule } from "@angular/material/icon";
import { MatProgressBarModule } from "@angular/material/progress-bar";
import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
import { MatTooltipModule } from "@angular/material/tooltip";
import { BrowserModule } from "@angular/platform-browser";
import { RouterModule, RouterOutlet } from "@angular/router";
import { ToastrModule } from "ngx-toastr";
import { DashboardComponent } from "./__framework/layout/dashboard/dashboard.component";
import { ProfileMenuModule } from "./__framework/layout/dashboard/profile-menu/profile-menu.module";
import { SidemenuModule } from "./__framework/layout/dashboard/sidemenu/sidemenu.module";
import { Layout1Component } from "./__framework/layout/layout1/layout1.component";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { LoginModule } from "./modules/auth/login/login.module";
import { SharedModule } from "./shared/shared.module";
import { ɵBrowserAnimationBuilder } from "@angular/animations";


const DashboardLayoutModules = [
  SidemenuModule,
  ProfileMenuModule
]
@NgModule({
  declarations: [
    AppComponent,
    Layout1Component,
    DashboardComponent
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  imports: [
    BrowserModule,
    AppRoutingModule,
    LoginModule,
    SharedModule,
    RouterModule,
    RouterOutlet,
    MatTooltipModule,
    CommonModule,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts #

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { Layout1Component } from './__framework/layout/layout1/layout1.component';
import { DashboardComponent } from './__framework/layout/dashboard/dashboard.component';
import { Routes, ExtraOptions, PreloadAllModules, RouterModule } from '@angular/router';


const routes: Routes = [
  {path: '', pathMatch: 'full', redirectTo: 'login'},
  {
    path: '',
    component: Layout1Component,
    children: [
      {
        path: '',
        loadChildren: () => import('./modules/auth/login/login.module').then(m => m.LoginModule)
      },
    ]
  },
];
const routerConfig: ExtraOptions = {
  scrollPositionRestoration: 'enabled',
  useHash: true,
  preloadingStrategy: PreloadAllModules
};
@NgModule({
  imports: [RouterModule.forRoot(routes, routerConfig)],
  exports: [RouterModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppRoutingModule { }

app.component.ts #

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';
}

app.component.html #

<router-outlet></router-outlet>

问题原因 #

核心错误在于app.module.ts的imports数组中直接导入了RouterOutlet组件类。Angular的<router-outlet>是由RouterModule导出的指令，必须通过导入RouterModule（或包含它的路由模块）来让模块识别，直接导入组件类不符合Angular的模块依赖机制，因此会触发未识别元素的错误。

修复步骤 #

1. 移除app.module.ts中多余的RouterOutlet导入
   修改app.module.ts的imports数组，删除RouterOutlet条目，同时可以移除重复的RouterModule（因为AppRoutingModule已经包含了RouterModule的配置）：

   imports: [
     BrowserModule,
     AppRoutingModule, // 已包含RouterModule的完整配置
     LoginModule,
     SharedModule,
     // 移除RouterOutlet和重复的RouterModule
     MatTooltipModule,
     CommonModule,
   ],
   

2. 验证路由模块配置
   app-routing.module.ts中已经正确通过RouterModule.forRoot()配置路由并导出RouterModule，这部分无需修改。

3. 确认模板写法
   app.component.html中的<router-outlet></router-outlet>写法正确，保持原样即可。

完成以上修改后，重新编译项目，NG8001错误即可解决。

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