Angular 15：非独立组件中RouterOutlet报错的替代解决方案

错误信息 #

X [ERROR] NG8001: 'router-outlet' is not a known element:
If 'router-outlet' is an Angular component, then verify that it is part of this module.
If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. [plugin angular-compiler]

问题根源 #

你的代码在NgModule模式下存在几个核心问题：

1. 错误地将RouterOutlet直接导入模块的imports数组，Angular路由指令由RouterModule统一提供，无需单独导入RouterOutlet组件。
2. 路由配置把根组件AppComponent列为路由组件，导致逻辑嵌套混乱。
3. 混合使用NgModule和独立组件的app.config.ts配置，引发路由服务冲突。

具体解决步骤 #

1. 移除多余的RouterOutlet导入 #

修改app-routing.module.ts

删除imports里的RouterOutlet，RouterModule.forRoot(routes)已经包含所有路由相关指令：

import { NgModule } from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {PdfComponent} from "../pdf/pdf.component";
import {UploadPdfComponent} from "../upload-pdf/upload-pdf.component";

export const routes: Routes = [
  { path: '', redirectTo: 'upload-pdf', pathMatch: 'full' },
  { path: 'pdf', component: PdfComponent},
  { path: 'upload-pdf', component: UploadPdfComponent},
  { path: '**', redirectTo: 'upload-pdf' },
]

@NgModule({
  imports: [RouterModule.forRoot(routes)], // 移除RouterOutlet
  exports: [RouterModule]
})

export class AppRoutingModule { }

修改app.module.ts

同样删除imports里的RouterOutlet，同时移除第三方组件的手动声明（第三方组件由对应模块导出，无需手动添加到declarations）：

import {NgModule} from '@angular/core';
import { CommonModule } from '@angular/common';
import { AppRoutingModule } from './app-routing.module';
import {PdfComponent} from "../pdf/pdf.component";
import {UploadPdfComponent} from "../upload-pdf/upload-pdf.component";
import {FormsModule} from "@angular/forms";
import {MatFileUploadModule} from "angular-material-fileupload";
import {AppComponent} from "./app.component";

@NgModule({
  declarations: [
    AppComponent,
    PdfComponent,
    UploadPdfComponent
  ],
  imports: [
    CommonModule,
    AppRoutingModule,
    FormsModule,
    MatFileUploadModule // 移除RouterOutlet
  ],
  exports:[
    AppComponent
  ],
  bootstrap: [AppComponent] // 明确引导根组件
})
export class AppModule { }

2. 修正路由配置逻辑 #

根组件AppComponent是应用入口，不应出现在路由配置里。将空路径和通配符路径设置为重定向，确保路由逻辑合理（已在上面的app-routing.module.ts中完成修改）。

3. 解决NgModule与独立组件配置冲突 #

如果使用NgModule模式，确保main.ts用NgModule引导，并移除app.config.ts中的路由配置：

修改main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

修改app.config.ts

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

export const appConfig: ApplicationConfig = {
  providers: []
};

如果不需要app.config.ts，直接删除即可。

4. 精简AppComponent代码 #

保留必要的路由导入即可，无需多余配置：

import {Component, OnInit} from '@angular/core';
import {Router} from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent implements OnInit{
  title = 'Docs';

  constructor(private _router: Router) {
  }

  ngOnInit() {
    this._router.navigate(['upload-pdf']).then(r => console.log(r))
  }
}

完成以上修改后，重新运行项目，router-outlet的错误即可解决。

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