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

// Set the engine
app.engine('html', ngExpressEngine({
  bootstrap: ServerAppModule // Give it a module to bootstrap
}));

app.set('view engine', 'html');

app.get('/**/*', (req: Request, res: Response) => {
  res.render('../dist/index', {
    req,
    res
  });
});

Configuring the URL and Document

It is possible to override the default URL and document fetched when the rendering engine is called. To do so, simply pass in a url and/or document string to the renderer as follows:

app.get('/**/*', (req: Request, res: Response) => {
  let url = 'http://someurl.com';
  let doc = '<html><head><title>New doc</title></head></html>';
  res.render('../dist/index', {
    req,
    res,
    url,
    document: doc
  });
});

Extra Providers

Extra Providers can be provided either on engine setup

app.engine('html', ngExpressEngine({
  bootstrap: ServerAppModule,
  providers: [
    ServerService
  ]
}));

Advanced Usage

Request based Bootstrap

The Bootstrap module as well as more providers can be passed on request

app.get('/**/*', (req: Request, res: Response) => {
  res.render('../dist/index', {
    req,
    res,
    bootstrap: OtherServerAppModule,
    providers: [
      OtherServerService
    ]
  });
});

Using the Request and Response

The Request and Response objects are injected into the app via injection tokens. You can access them by @Inject

import { Request } from 'express';
import { REQUEST } from '@nguniversal/express-engine/tokens';

@Injectable()
export class RequestService {
  constructor(@Inject(REQUEST) private request: Request) {}
}

If your app runs on the client side too, you will have to provide your own versions of these in the client app.

Using a Custom Callback

You can also use a custom callback to better handle your errors

app.get('/**/*', (req: Request, res: Response) => {
  res.render('../dist/index', {
    req,
    res
  }, (err: Error, html: string) => {
    res.status(html ? 200 : 500).send(html || err.message);
  });
});

16.1.0 (2023-06-13)

Deprecations

StateTransferInitializerModule, TransferHttpCacheInterceptor and domContentLoadedFactory have been deprecated in favor of provideClientHydration. See: https://angular.io/api/platform-browser/provideClientHydration

| Commit | Type | Description | | ------------------------------------------------------------------------------------------------ | -------- | ----------------------------- | | ccc2f52f | refactor | deprecate transfer http cache |

Keywords

FAQs

What is @nguniversal/express-engine?

Is @nguniversal/express-engine popular?

Is @nguniversal/express-engine well maintained?

Package last updated on 23 Aug 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install