是的,可以通过Angular Universal的服务端渲染来完成。以下是一个基本示例:
首先安装Angular Universal:
ng add @nguniversal/express-engine
然后导入ServerModule和ModuleMapLoaderModule:
import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
在AppModule中,添加ServerModule和ModuleMapLoaderModule:
@NgModule({
imports: [
AppModule,
ServerModule,
ModuleMapLoaderModule
],
bootstrap: [AppComponent],
})
export class AppServerModule {}
在服务端应用的main.ts中,使用renderModuleFactory函数进行渲染:
import 'zone.js/dist/zone-node';
import { enableProdMode } from '@angular/core';
import { renderModuleFactory } from '@angular/platform-server';
import { AppServerModuleNgFactory } from './src/main.server';
const express = require('express');
const { join } = require('path');
const app = express();
const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');
app.engine('html', (_, options, callback) => {
const renderOptions = {
document: options.req.initialUrl,
url: options.req.url,
extraProviders: [
{ provide: 'req', useValue: options.req },
{ provide: 'res', useValue: options.res },
],
};
renderModuleFactory(AppServerModuleNgFactory, renderOptions)
.then(html => callback(null, html));
});
app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));
app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));
app.get('*', (req, res) => {
res.render('index', { req });
});
app.listen(PORT, () => {
console.log(`Node server listening on http://localhost:${PORT}`);
});
通过运行npm run build:ssr和npm run serve:ssr命令来构建和启动