要在查看源代码时看不到标题,但在检查时可以看到标题,可以使用Angular Universal的预渲染功能。预渲染是指在服务器上预先生成静态HTML文件,然后在客户端加载这些文件。这样,当搜索引擎或社交媒体爬虫访问您的网站时,它们将能够看到完整的HTML内容,包括标题和其他元数据。
以下是一个示例解决方法:
ng add @nguniversal/express-engine
import 'zone.js/dist/zone-node';
import { renderModuleFactory } from '@angular/platform-server';
import { enableProdMode } from '@angular/core';
import { readFileSync, writeFileSync, mkdirSync } from 'fs';
import { join } from 'path';
// 读取Angular构建后的服务器bundle文件
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');
// 配置Angular Universal
enableProdMode();
// 读取index.html文件
const index = readFileSync(join('dist', 'browser', 'index.html'), 'utf-8');
// 定义要预渲染的路由
const routes = [
'/',
'/about',
'/contact',
// 添加其他需要预渲染的路由
];
// 创建预渲染目录
const prerenderDir = join('dist', 'prerender');
mkdirSync(prerenderDir);
// 遍历路由并生成预渲染文件
routes.forEach(route => {
const fullPath = join(prerenderDir, route, 'index.html');
renderModuleFactory(AppServerModuleNgFactory, {
document: index,
url: route,
extraProviders: [
{
provide: APP_BASE_HREF,
useValue: '/',
},
{
provide: 'REQUEST',
useValue: {
url: route,
},
},
],
}).then(html => {
writeFileSync(fullPath, html, 'utf-8');
});
});
"scripts": {
"prerender": "node prerender.ts"
}
npm run build
npm run prerender
请注意,预渲染功能需要在服务器上部署。您可以将预渲染目录上传到您的服务器,并相应地配置服务器以提供这些静态HTML文件。
希望这个解决方法能帮助到您!