在项目的根目录下找到 angular.json 文件,在该文件中添加以下代码块:
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/main.ts",
"with": "src/main.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"prerender": {
"builder": "@nguniversal/builders:prerender",
"options": {
"browserTarget": "your-project-name:build:production",
"serverTarget": "your-project-name:server:production",
"routes": [
"/"
]
},
"configurations": {
"production": {}
}
}
}
}
其中, "your-project-name" 应替换为您的项目名称。
这段代码会在构建过程中启用预渲染功能,并指定要预渲染的路由。如果您的 Angular 项目包含动态路由,请在 "routes" 数组中添加相应的路由。
添加完以上代码块后,您可以使用以下命令构建并预渲染您的 Angular 项目:
ng run your-project-name:prerender:production
此命令会在 dist 文件夹中生成预渲染后的 HTML 文件,您可以将其使用于服务器端渲染或作为纯静态文件发布。