Angular 19中router-outlet未识别错误求助

核心问题定位 #

你的代码存在三个关键问题，导致在Angular 19中出现该错误（旧版Angular对部分不规范写法兼容性更强）：

1. 错误的启动对象（main.ts） #

你直接启动了AppComponent，但AppComponent的standalone属性设置为false，属于模块驱动组件，必须通过AppModule启动。

2. 路由模块重复导入（app.module.ts） #

AppRoutingModule已经通过exports: [RouterModule]对外导出了路由模块，在AppModule的imports中再次添加RouterModule属于冗余操作，可能引发模块加载冲突。

3. 路由配置冗余（app.router.ts） #

redirectTo类型的路由不需要指定component属性，该配置在Angular 19中会被严格校验，导致路由模块初始化异常。

具体修复步骤 #

修复main.ts #

将启动对象改为AppModule：

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

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

修复app.module.ts #

移除imports中的RouterModule：

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { BrowserModule } from "@angular/platform-browser";
import { AppRoutingModule } from "./app.routes";
import { DashboardComponent } from "./dashboard/dashboard.component";

@NgModule({
  declarations:[
    AppComponent,
    DashboardComponent
  ],
  imports:[
    BrowserModule,
    AppRoutingModule // 已包含RouterModule导出，无需重复导入
  ],
  providers:[],
  bootstrap:[AppComponent],
  schemas:[CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule{}

修复app.router.ts #

移除redirectTo路由中的component属性：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';

const routes: Routes = [
  {
    path: '',
    redirectTo: '/dashboard',
    pathMatch: 'full' // 去掉多余的component配置
  },  
  {
    path: 'dashboard',
    component: DashboardComponent
  }
];

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

验证修复 #

完成以上修改后，重新启动项目：

ng serve

此时router-outlet将被正确识别，路由功能正常运行。

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