Question

我正在将应用移至Universal，以便在index.html页面上获得良好的SEO。我需要的主要内容是标题和一些元数据（关键字，描述，og-tags等）。

问题是，如果我正在模拟返回元标记和描述的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);
    })
  }

我添加了700ms的延迟以模拟真实的http呼叫。

真正的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>

请帮助。

Universal不呈现HTTP调用

0 个答案: