要部署Angular PreRendering / Ng Universal,您需要按照以下步骤进行操作:
npm install @angular/platform-server @nguniversal/module-map-ngfactory-loader
prerender.ts
的文件。在该文件中,您需要导入一些必要的依赖项,设置一些配置,然后导出一个函数来生成预渲染的HTML:import 'zone.js/dist/zone-node';
import { enableProdMode } from '@angular/core';
import { renderModuleFactory } from '@angular/platform-server';
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
import { AppServerModuleNgFactory, LAZY_MODULE_MAP } from './path/to/your/server/main';
enableProdMode();
export function prerender(): Promise {
return new Promise((resolve, reject) => {
renderModuleFactory(AppServerModuleNgFactory, {
document: ' ',
url: '/'
}).then(html => {
resolve(html);
}).catch(error => {
reject(error);
});
});
}
请确保替换./path/to/your/server/main
为您的服务器端代码的路径。
prerender.js
的文件。在该文件中,您需要导入prerender.ts
并调用prerender()
函数:require('ts-node').register();
const { prerender } = require('./prerender');
prerender().then(html => {
console.log(html);
}).catch(error => {
console.error(error);
});
package.json
中,将"scripts"部分的"build"命令更改为以下内容:"build": "ng build && node prerender.js"
npm run build
这将在dist
文件夹中生成预渲染的HTML文件。
请注意,这只是一个示例,您可能需要根据您的项目的实际情况进行一些调整。