Branch: master
Find file History
CaerusKaru feat(modules): pass in absolute URL as default for view rendering (#897)
* Add the absolute URL to view generation to allow for access through
  the document's native location object

NOTE: This will act as a precursor to correct absolute path resolution for `HttpClient`
Latest commit 77e298a Dec 25, 2018
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
schematics feat(hapi-engine): add schematics (#1057) Dec 25, 2018
spec build: update Bazel to use fine-grained deps (#1083) Dec 23, 2018
src feat(modules): pass in absolute URL as default for view rendering (#897) Dec 25, 2018
tokens build: update Bazel to use fine-grained deps (#1083) Dec 23, 2018
BUILD.bazel
README.md docs: fix import of REQUEST token (#952) Apr 3, 2018
index.ts build: add secondary entry points for tokens (#922) Apr 4, 2018
package.json feat(express-engine): add schematics (#1051) Aug 22, 2018
public_api.ts build: add secondary entry points for tokens (#922) Apr 4, 2018
version.ts feat(express-engine): add schematics (#1051) Aug 22, 2018

README.md

Angular Express Engine

This is an Express Engine for running Angular Apps on the server for server side rendering.

Usage

npm install @nguniversal/express-engine --save

To use it, set the engine and then route requests to it

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