代码之家  ›  专栏  ›  技术社区  ›  Udi Mazor

通用不呈现HTTP调用

  •  2
  • Udi Mazor  · 技术社区  · 7 年前

    为了在index.html页面上获得良好的SEO,我正在将一个应用程序移动到Universal。我需要的主要东西是标题和一些元(关键字、描述、og标记等)。

    问题是,如果我模拟一个返回元标记和描述的http调用,它正在工作,我可以在应用程序“查看源页面”中看到结果。当我用返回相同的真实http调用替换mocking时,我没有得到呈现的数据,也看不到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调用,我添加了700ms的延迟。

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

    请帮忙。。

    0 回复  |  直到 7 年前