Angular 的 SSR(Server-side Rendering)功能是将 Angular 应用在服务器上进行渲染,生成完整的 HTML 页面,然后将其发送给浏览器显示。这样可以提供更好的首次加载性能和更好的 SEO。
以下是一个使用 Angular SSR 的解决方法的代码示例:
npm install @angular/platform-server
server.ts
的文件,并添加以下代码:import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import { enableProdMode } from '@angular/core';
import { renderModuleFactory } from '@angular/platform-server';
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
import * as express from 'express';
import { readFileSync } from 'fs';
import { join } from 'path';
const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');
const APP_NAME = 'your-app-name';
enableProdMode();
const app = express();
const template = readFileSync(join(DIST_FOLDER, APP_NAME, 'index.html')).toString();
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require(`./dist/${APP_NAME}-server/main`);
app.engine('html', (_, options, callback) => {
const opts = { document: template, url: options.req.url };
renderModuleFactory(AppServerModuleNgFactory, {
document: template,
url: options.req.url,
extraProviders: [
provideModuleMap(LAZY_MODULE_MAP)
]
})
.then(html => {
callback(null, html);
});
});
app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, APP_NAME));
app.get('*.*', express.static(join(DIST_FOLDER, APP_NAME)));
app.get('*', (req, res) => {
res.render('index', { req });
});
app.listen(PORT, () => {
console.log(`Node server listening on http://localhost:${PORT}`);
});
运行 ng build --prod && ng run your-app-name:server:production
命令来构建和编译应用的服务器部分。
运行 node server.ts
命令来启动服务器。
这样,你的 Angular 应用就可以使用 SSR 功能了。当用户访问你的应用时,服务器会渲染出完整的 HTML 页面,并将其发送给浏览器显示。