Universal doesn't render HTTP calls

Question

I am moving an app to Universal in order to get good SEO on the index.html page. The main things I need there are title and some metas (keywords, description, og-tags etc).

The thing is that if I am mocking an http call that returns the meta tags and description it is working and I can see the result at the application "view source page". When I replace the mocking with real http call that returns the same then I am not getting the data rendered and cant see the title and tags in the index.html source.

the mock data service is:

  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);
    })
  }

I added a 700ms delay in order to emulate a real http call.

The real httpcall is:

  getSeo(): Promise<ISeo> {
    return this.gwApiService.get('/seo').toPromise();
  }

which returns the same output. I am using iisNode. My server.js file code is:

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`);
  });

The web.config file:

<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>

Please help..

@David (node:2408) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead. ERROR { error: null } ERROR { error: null } — Udi Mazor, Jun 21 '19 at 08:08
Well, if you've got errors, then it's likely the server side rendering is not complete and you get a page witout the meta — David, Jun 21 '19 at 08:19
@David I don't know what is the error. When I replace the http call with a mock call Then everything is working. I am using angular's httpClient.get() — Udi Mazor, Jun 21 '19 at 08:29
You need to add debug info to check if the http calls succeeds maybe — David, Jun 21 '19 at 08:41

Universal doesn't render HTTP calls

0 Answers0