Angular中'router-outlet'未知元素错误的解决方法求助

问题根源 #

从你提供的代码来看，导致报错的核心问题有两个：

• 错误地将NgModule加入了declarations数组（该数组仅允许存放组件、指令、管道）
• app.component.html存在无效代码干扰解析

修复步骤 #

1. 修正app.module.ts的declarations配置 #

移除declarations中的NgModule（它是模块装饰器，不属于可声明对象），并清理冗余的RouterModule导入（AppRoutingModule已包含完整路由配置）：

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CommonPopupComponent } from './Shared/Common-popup/common-popup/common-popup.component';
import { PlantComponent } from './Masters/Plant/plant.component';
import DataTables from 'datatables.net';
import DataTable from 'datatables.net-dt';
import { DataTablesModule } from 'angular-datatables';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { CommonSwalService } from './common-swal.service';

@NgModule({
  declarations: [
    AppComponent,
    CommonPopupComponent,
    PlantComponent
    // 移除 NgModule
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    CommonModule,
    DataTablesModule,
  ],
  
  providers: [CommonSwalService],
  bootstrap: [AppComponent],
  schemas:[CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule { }

2. 确保AppRoutingModule配置正确 #

检查app-routing.module.ts是否完成了基础路由配置（如果尚未配置，补充如下代码）：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PlantComponent } from './Masters/Plant/plant.component';

const routes: Routes = [
  { path: 'plant', component: PlantComponent },
  // 可添加其他路由规则
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

3. 清理app.component.html的无效代码 #

移除文件中无效的description here](https://i.sstatic.net/mcC9R.png)行，仅保留路由出口标签：

<router-outlet></router-outlet>

验证修复 #

执行以下命令重启项目，确认报错消失：

ng serve

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