Angular 17基础SPA项目routerLink导航失效：缺失哪些路由配置？

在Angular 17的独立组件模式下，你目前的配置还缺少路由的核心注册步骤，另外还有几个细节需要确认：

1. 必须在app.config.ts中注册路由 #

Angular 17默认采用独立组件架构，不再通过传统的AppRoutingModule配置路由，而是需要在app.config.ts中用provideRouter把路由配置注入到应用中：

修改app.config.ts内容如下：

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes) // 注册路由配置
  ]
};

2. 确认组件的创建与路径正确性 #

检查Page1Component和Page2Component是否通过ng generate component page1这类命令正确创建，同时确保app.routes.ts中的组件导入路径没有拼写错误，保证组件能被正常加载。

3. routerLinkActive的优化（可选，不影响导航但影响激活样式） #

当前代码里的routerLinkActive没有指定激活时的CSS类，补充后可以直观看到当前激活的路由：

<a routerLink="/page1" routerLinkActive="active-nav">Page 1</a>

然后在全局样式文件（比如styles.css）中定义激活样式：

.active-nav {
  color: #165DFF;
  font-weight: 600;
  text-decoration: underline;
}

完成以上配置后，你的路由导航应该就能正常工作了。

内容的提问来源于stack exchange，提问作者Jeff M Palmer