Angular Universal支持JIT(即时编译)和AOT(预编译)编译。下面是一个代码示例,演示如何在Angular应用程序中使用Angular Universal进行AOT编译。
首先,确保你的Angular应用程序已经使用AOT编译。你可以通过运行以下命令来进行AOT编译:
ng build --aot
接下来,安装Angular Universal的相关依赖:
npm install @angular/platform-server @nguniversal/module-map-ngfactory-loader --save
然后,创建一个名为server.ts
的文件,用于启动Angular Universal:
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 * as express from 'express';
import { readFileSync } from 'fs';
// 读取编译后的Angular应用的bundle文件
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./path/to/your/bundle');
// Angular应用的静态HTML模板
const indexHtml = readFileSync('./dist/browser/index.html', 'utf-8');
// 启用Angular的生产模式
enableProdMode();
const app = express();
// 匹配所有路由,并渲染Angular应用
app.get('*', (req, res) => {
renderModuleFactory(AppServerModuleNgFactory, {
document: indexHtml,
url: req.url,
extraProviders: [
provideModuleMap(LAZY_MODULE_MAP)
]
}).then(html => {
res.send(html);
});
});
// 启动服务器
app.listen(4000, () => {
console.log('Angular Universal server is running on port 4000');
});
最后,通过运行以下命令启动Angular Universal服务器:
node server.ts
这样,你的Angular应用程序将以AOT编译的形式运行在Angular Universal中。
上一篇:Angular Universal是否与本地Express API集成?
下一篇:Angular Universal是一个用于服务器渲染Angular应用程序的框架,@ng-toolkit/universal是与Angular Universal集成的工具包。