Angular SSR預渲染的建置選項

應用程式建構器 prerender 選項可以是布林值或對象，以進行更精細的配置。當選項為 時false，不進行預渲染。當為 時true，所有選項都使用預設值。當它是一個物件時，每個選項都可以單獨配置。
app.config.ts

• discoverRoutes配置來尋找所有未參數化的路由，預設值是true,
• routesFile檔案路徑，檔名：routes.txt
  路由路徑/api,/product/1,/product/2
ng build

angular.json配置

"options": {
+     "prerender": {
+        "discoverRoutes": true,
+        "routesFile": "routes.txt"
+      },
}

app.config.ts配置

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
+ import { provideHttpClient, withFetch } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    provideClientHydration(withEventReplay()),
+    provideHttpClient(withFetch())
  ],
};

routesFile配置

新增routes.txt加入以下

/api
/product/1
/product/2

打包以後

ng serve

官網