求助：Angular 18 SSG路由链接href改为./about/index.html的配置方法

我用Angular 18搭建了静态站点，启用SSG后执行ng build生成了静态文件，但内部路由链接的生成格式不符合需求：

原路由链接代码：

<a class="text-color group-hover:text-[#F1C203]" [routerLink]="['about']">About</a>

构建后生成的HTML中，链接变为：

<a _ngcontent-ng-c2439168922 class="text-color group-hover:text-[#F1C203]" href="./about">About</a>

需要将href值从./about修改为./about/index.html，当前已配置如下：

• 提供了routes.txt文件，包含/about路由
• AppModule路由配置：

RouterModule.forRoot([
      { path: '', component: HomeComponent },
      { path: 'about', component: AboutComponent }
])

• angular.json中SSG相关配置：

"server": "src/main.server.ts",
"prerender": {
  "routesFile": "routes.txt"
},
"ssr": false

解决方案：自定义UrlSerializer修改URL生成格式 #

通过自定义路由URL序列化器，强制生成带index.html的链接路径：

1. 创建自定义序列化器文件index-html-url-serializer.ts：

import { DefaultUrlSerializer, UrlTree } from '@angular/router';

export class IndexHtmlUrlSerializer extends DefaultUrlSerializer {
  parse(url: string): UrlTree {
    return super.parse(url);
  }

  serialize(tree: UrlTree): string {
    const rawPath = super.serialize(tree);
    // 根路径保持原格式，非根路径追加/index.html
    if (rawPath === './' || rawPath === '/') {
      return rawPath;
    }
    return `${rawPath}/index.html`;
  }
}

2. 在AppModule中注册这个序列化器：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, UrlSerializer } from '@angular/router';
import { IndexHtmlUrlSerializer } from './index-html-url-serializer';

// 导入你的组件
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent },
      { path: 'about', component: AboutComponent }
    ])
  ],
  providers: [
    { provide: UrlSerializer, useClass: IndexHtmlUrlSerializer }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

重新执行ng build后，路由链接的href会自动生成为./about/index.html。

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