Angular 17中'router-outlet'不是已知元素的问题求助

问题根源 #

1. 混合两种组件模式：你的AppComponent标记了standalone: true（独立组件模式），但同时又在AppModule中声明了它。Angular 17默认采用独立组件模式，两种模式混用会导致路由配置冲突，进而引发router-outlet识别问题。
2. 路由文件配置为空：app.routes.ts里没有实际路由规则，而AppModule中的路由配置未被独立组件模式加载。

解决方案（二选一） #

方案一：使用独立组件模式（Angular 17推荐）

1. 删除AppModule文件：独立组件模式无需NgModule，直接移除app.module.ts即可。
2. 更新路由文件app.routes.ts：将原AppModule中的路由规则迁移过来：

import { Routes } from '@angular/router';
import { UserComponent } from './components/user/user.component';
import { MovieComponent } from './components/movie/movie.component';
import { RentalComponent } from './components/rental/rental.component';

export const routes: Routes = [
    { path: 'users', component: UserComponent },
    { path: 'movies', component: MovieComponent },
    { path: 'rentals', component: RentalComponent },
    { path: '', redirectTo: '/movies', pathMatch: 'full' }
];

3. 设置子组件为独立组件：确保UserComponent、MovieComponent、RentalComponent的@Component装饰器中添加standalone: true，并导入所需依赖模块（如CommonModule用于ngIf/ngFor等指令）：

// 示例：UserComponent修改
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-user',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './user.component.html',
  styleUrl: './user.component.css'
})
export class UserComponent {}

4. 确认引导方式：检查main.ts是否为独立组件引导模式：

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));

方案二：改用NgModule模式

1. 修改AppComponent：移除standalone: true和imports: [RouterOutlet]：

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

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

2. 删除冗余文件：移除app.config.ts和app.routes.ts（或保留但不使用）。
3. 修改引导方式：main.ts改为引导AppModule：

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

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

4. 保留AppModule配置：确保所有组件在declarations中声明，路由配置保持原样即可。

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