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 express from 'express';
import { ngExpressEngine } from '@nguniversal/express-engine';
const app = express();
app.engine(
'html',
ngExpressEngine({
bootstrap: ServerAppModule,
}),
);
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 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);
},
);
});
15.0.0 (2022-11-16)
Breaking Changes
@nguniversal/common
- Angular universal no longer supports Node.js versions
14.[15-19].x
and 16.[10-12].x
. Current supported versions of Node.js are 14.20.x
, 16.13.x
and 18.10.x
.
@nguniversal/express-engine
- deprecated
appDir
option was removed from the express-engine ng add schematic. This option was previously unused.
@nguniversal/express-engine
| Commit | Type | Description |
| ------------------------------------------------------------------------------------------------ | -------- | --------------------------------------- |
| 6d5500d7 | fix | fix formatting in generated server.ts
|
| 905c0ae1 | refactor | remove deprecated appDir option |
@nguniversal/builders
| Commit | Type | Description |
| ------------------------------------------------------------------------------------------------ | ---- | ---------------------------------------------- |
| fef00f90 | feat | add ng-server-context
for SSG pages |
| 08979337 | feat | add sourcemap mapping support for dev-server |
| 654c23c8 | fix | import zone.js
in worker during prerendering |
@nguniversal/common
| Commit | Type | Description |
| ------------------------------------------------------------------------------------------------ | ---- | ------------------------------------- |
| a62d3d3b | feat | add ng-server-context
for SSR pages |
| 78cf7b7f | feat | add support for Node.js version 18 |
Special Thanks
Alan Agius, Carlos Torrecillas, Doug Parker, Greg Magolan and angular-robot[bot]
<!-- CHANGELOG SPLIT MARKER -->
<a name="14.2.1"></a>