angular - Universal 不呈现 HTTP 调用
问题描述
我正在将一个应用程序移至 Universal,以便在 index.html 页面上获得良好的 SEO。我需要的主要内容是标题和一些元数据(关键字、描述、OG 标签等)。
问题是,如果我正在模拟一个返回元标记和描述的 http 调用,它正在工作,我可以在应用程序“查看源页面”中看到结果。当我用返回相同的真实 http 调用替换模拟时,我没有得到呈现的数据,也看不到 index.html 源中的标题和标签。
模拟数据服务是:
getSeo() {
return new Promise<ISeo>((resolve, reject) => {
setTimeout(() => {
resolve({
title: 'Bnei David Univercity Connect',
metas: [
{
name: 'description',
content: 'Bnei David alumni relationship will allow the alumni and students to participate in events, find jobs, stay in touch with their alumni friends etc'
},
{
property: 'og:image',
content: 'https://www.gouconnect.com/wp-content/themes/uConnect_V4/img/integration/graduway.png'
},
{
property: 'og:description',
content: 'Bnei David alumni relationship will allow the alumni and students to participate in events, find jobs, stay in touch with their alumni friends etc'
},
{
property: 'og:image:title',
content: 'Bnei David Connect'
},
{
name: 'keywords',
content: 'Alumni relationship, Israel, Bnei-david, Univercity'
},
{
name: 'application-name',
content: 'Bnei David COnnect'
},
{
property: 'og:title',
content: 'Bnei David Alumni Relationship Management'
},
{
property: 'og:url',
content: 'http://app.bneidavidconnect.com'
},
{
property: 'og:image:type',
content: 'image/png'
}
]
})
}, 700);
})
}
为了模拟真正的 http 调用,我添加了 700 毫秒的延迟。
真正的httpcall是:
getSeo(): Promise<ISeo> {
return this.gwApiService.get('/seo').toPromise();
}
它返回相同的输出。我正在使用 iisNode。我的 server.js 文件代码是:
const { ngExpressEngine } = require('@nguniversal/express-engine');
const { provideModuleMap } = require('@nguniversal/module-map-ngfactory-loader');
const express = require('express');
const { enableProdMode } = require('@angular/core');
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/gw-web-app/main.js');
require('zone.js/dist/zone-node');
const domino = require('domino');
const fs = require('fs');
const path = require('path');
const template = fs.readFileSync(path.join(__dirname, '.', 'dist', 'index.html')).toString();
const win = domino.createWindow(template);
global['window'] = win;
global['document'] = win.document;
enableProdMode();
const app = express();
const distFolder = __dirname + '/dist';
app.engine('html', ngExpressEngine({
bootstrap: AppServerModuleNgFactory,
providers: [provideModuleMap(LAZY_MODULE_MAP)] // Make Universal lazy loading enabled on server side
}));
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(process.env.PORT, ()=>{
console.log(`Angular Universal Node Express server listening on http://localhost:80`);
});
web.config 文件:
<configuration>
<system.webServer>
<!-- indicates that the hello.js file is a node.js application
to be handled by the iisnode module -->
<handlers>
<add name="iisnode" path="server.js" verb="*" modules="iisnode" />
</handlers>
<rewrite>
<rules>
<rule name="universal">
<match url=".*" />
<action type="Rewrite" url="server.js" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
请帮忙..
解决方案
推荐阅读
- ruby - 如何减少 Ruby 的 if 条件?
- git - Git 提交所有更改,而不仅仅是在 git add -p 之后暂存更改
- angular - Angular 7:如何在不点击的情况下调用方法?
- kotlin - 我尝试使用 Adapter 制作 RecyclerView,但看不到布局?
- python - 删除自定义 ItemDataRoles
- xamarin - 如何从 ViewModel 管理 Tabbedpage 中的选项卡
- terminal - 如何“cd”到终端中“find”命令的输出
- excel - 如何使用powershell将行添加到带有公式的excel文档
- c# - 与对象矢量相交的相机角度
- c# - DataGridTemplateColumn 中的数据上下文不可用