How do I get the hostname Angular Universal v9.x

Question

@nguniversal/express-engine": "^9.1.1"

Having a difficult time finding a way to get hostname with most recent version of angular universal. I need to make a webapi and SSR requires the using of full url. My url changes depending on environment (i.e. localhost for development) and real domain names for staging and production. How do I determine the hostname during SSR? All the examples I have found have been for previous version of angular. For example:

app.engine('html',  (_, options, callback) => {
  let engine = ngExpressEngine({
    bootstrap: ServerAppModule,
    providers: [ { provide: 'host', useFactory: () => options.req.get('host') } ]
  });

  engine(_, options, callback)
})

This results in "Property 'req' does not exist on type 'object'". This is after changing 'app.engine' to 'server.engine'

My webapi is on a different port during development as I'm using dotnetcore for api calls. This complicates things as I can't use relative paths. — lightbulb112, Jul 10 '20 at 17:07

score 1 · Answer 1 · answered Jul 12 '20 at 08:09

The server.ts file has changed since angular 9, it looks like your code is for older versions. You can access the request from the get route, like below and provide it with useValue instead of useFactory like suggested in the comments.

  server.get('*', (req, res) => {
    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl },
                            { provide: 'host', useValue: req.get('host') } ] });
  });

Here is the complete server.ts file

import 'zone.js/dist/zone-node';

import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';

import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync } from 'fs';

// The Express app is exported so that it can be used by serverless Functions.
export function app() {
  const server = express();
  const distFolder = join(process.cwd(), 'browser');
  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule
    
  }));

  server.set('view engine', 'html');
  server.set('views', distFolder);

  // Example Express Rest API endpoints
  // server.get('/api/**', (req, res) => { });
  // Serve static files from /browser
  server.get('*.*', express.static(distFolder, {
    maxAge: '1y'
  }));

  // All regular routes use the Universal engine
  server.get('*', (req, res) => {
    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl },
                            { provide: 'host', useValue: req.get('host') } ] });
  });

  return server;
}

function run() {
  const port = process.env.PORT || 4000;

  // Start up the Node server
  const server = app();
  server.listen(port, () => {
    console.log(`Node Express server listening on http://localhost:${port}`);
  });
}

// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
  run();
}

export * from './src/main.server';

How do I get the hostname Angular Universal v9.x

1 Answers1

Linked