要解决Angular Universal不会接管客户端的渲染的问题,你可以使用Angular的TransferState服务来在服务器端和客户端之间共享数据。下面是一个包含代码示例的解决方法:
import { enableProdMode } from '@angular/core';
import { renderModuleFactory } from '@angular/platform-server';
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
import { provideTransferStateCache } from '@ngx-utils/transfer-state-cache';
// 导入你的应用程序模块
import { AppServerModuleNgFactory } from './path-to-your-app-module';
// 启用生产模式
enableProdMode();
// 创建一个Express服务器
const app = express();
// 设置静态文件目录
app.use(express.static('./dist/browser', { index: false }));
// 对所有路由进行处理
app.get('*', (req, res) => {
// 创建TransferStateCache对象
const transferStateCache = provideTransferStateCache();
// 使用renderModuleFactory方法渲染应用程序
renderModuleFactory(AppServerModuleNgFactory, {
document: indexHtml,
url: req.url,
extraProviders: [
// 提供ModuleMapLoaderProvider
provideModuleMap(LAZY_MODULE_MAP),
// 提供TransferStateCache对象
{ provide: TransferStateCache, useValue: transferStateCache }
]
}).then(html => {
// 将渲染好的HTML返回给客户端
res.send(html);
});
});
// 启动服务器
app.listen(3000, () => {
console.log('Server is listening on port 3000');
});
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './path-to-your-app-module';
import { TransferState } from '@angular/platform-browser';
// 启用生产模式
enableProdMode();
// 监听DOMContentLoaded事件
document.addEventListener('DOMContentLoaded', () => {
// 获取服务器端传递的数据
const transferState = new TransferState();
const stateData = transferState.get(STATE_KEY, null);
// 在bootstrap过程中注入TransferState服务
platformBrowserDynamic([{ provide: TransferState, useValue: transferState }])
.bootstrapModule(AppModule)
.then(appModule => {
// 将服务器端传递的数据设置到应用程序中
appModule.injector.get(TransferState).set(STATE_KEY, stateData);
})
.catch(err => console.error(err));
});
通过使用TransferState服务,你可以将服务器端渲染的数据传递到客户端,并确保Angular Universal在客户端接管渲染过程。