以下是一个使用Angular 8进行通用服务器端渲染的解决方案,包含了一些代码示例:
首先,我们需要创建一个新的Angular项目。可以使用Angular CLI来创建项目:
ng new my-app
Angular Universal是Angular官方提供的用于服务器端渲染的解决方案。在项目根目录下运行以下命令来安装Angular Universal:
ng add @nguniversal/express-engine
在项目根目录下创建一个名为server.ts
的文件,并添加以下代码:
import 'zone.js/dist/zone-node';
import { enableProdMode } from '@angular/core';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { AppServerModule } from './src/main.server';
enableProdMode();
const app = express();
const port = 4000;
const distFolder = join(process.cwd(), 'dist/my-app/browser');
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/my-app/server/main');
app.engine('html', ngExpressEngine({
bootstrap: AppServerModuleNgFactory,
providers: [
provideModuleMap(LAZY_MODULE_MAP)
]
}));
app.set('view engine', 'html');
app.set('views', distFolder);
app.get('*.*', express.static(distFolder, {
maxAge: '1y'
}));
app.get('*', (req, res) => {
res.render('index', { req });
});
app.listen(port, () => {
console.log(`Listening on http://localhost:${port}`);
});
angular.json
打开angular.json
文件,并添加以下配置,将server.ts
作为服务器端渲染的入口文件:
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/my-app-server",
"main": "src/main.server.ts",
"tsConfig": "src/tsconfig.server.json"
}
}
运行以下命令来构建服务器端渲染代码:
ng run my-app:server
最后,使用以下命令启动服务器:
node dist/my-app-server/main.js
这样就完成了一个基本的Angular 8通用服务器端渲染的设置。可以尝试在浏览器中访问http://localhost:4000
来查看服务器端渲染的效果。