Nest-Nguniversal
A module that will integrate your Angular SSR app and your NestJS app.
This module takes care of incorporating the Angular Universal application and forwarding requests to their desired destination. Angular Universal will render the requested view which will then be served by the NestJS server.
Â
Kudos to the maintainers/contributors of @nestjs/ng-universal as this library is built on top of this repository.
Prerequisites
This library requires separate ui, ssr and server bundles. Separating compilation enhances DX and reflects that server and ui applications handled differently.
This is one possible setup
├── dist
│ ├── server
│ | ├── main.js
│ ├── ssr-app
│ | ├── main.js
│ ├── ui-app
│ | ├── main.js
│ | ├── index.html
...
→ In order to immensely simplify the setup process use @nxarch/ng-nest. This library will set up everything with one simple command.
Installation
npm i @nxarch/nest-nguniversal
yarn add @nxarch/nest-nguniversal
Make sure to use one of these environment variables during development:
APP_ENV=development or REMOVE_WEBPACK_CACHE=true
Usage
AngularUniversalModule.forRoot({
bootstrap: join(process.cwd(), 'dist/ssr-app/main.js'),
viewsPath: join(process.cwd(), 'dist/ui-app/browser'),
});API Spec
The forRoot() method takes an options object with a few useful properties.
| Property | Type | Description |
|---|---|---|
viewsPath |
string | The directory where the module should look for client bundle (Angular app) |
bootstrap |
string | Compiled Angular server module path (Angular SSR app) |
useCustomRenderEndpoint |
boolean | Use this option to specify your own endpoint to render your Angular app |
templatePath |
string? | Path to index file (default: {viewsPaths}/index.html) |
rootStaticPath |
string? | Static files root directory (default: *.*) |
renderPath |
string? | Path to render Angular app (default: *) |
extraProviders |
StaticProvider[]? | The platform level providers for the current render request |
inlineCriticalCss |
boolean? | Reduce render blocking requests by inlining critical CSS. (default: true) |
cache |
boolean? \ CacheOptions | Cache options, description below (default: true; uses InMemoryCache) |
errorHandler |
Function? | Callback to be called in case of a rendering error |
Routes
Make sure to prefix your api route to avoid Angular and NestJS route collisions.
The renderPath will be set up after all api routes are registered.
If you choose to use the default render path (*) all requests to routes that aren't specified inside your API
controllers
will be funneled to Angular Universals ngExpressEngine to render the Angular view.
// main.ts - e.g. use this
async function bootstrap() {
// ...
app.setGlobalPrefix('api');
}Custom Render Endpoint
If you chose to use your own implementation for the route where the Angular app is going to be rendered and returned
make sure to implement a Controller accordingly.
Also Make sure to include the RenderController in your module.
export class RenderController {
@Get('*')
render(@Req() req: Request, @Res() res: Response, @Next() next: NextFunction) {
res.render(this.viewsPath + '/index.html', { req, res });
}
}Cache
| Property | Type | Description |
|---|---|---|
expiresIn |
number? | Cache expiration in milliseconds (default: 60000) |
storage |
CacheStorage? | Interface for implementing custom cache storage (default: in memory) |
keyGenerator |
CacheKeyGenerator? | Interface for implementing custom cache key generation logic (default: by url) |
AngularUniversalModule.forRoot({
// ...
cache: {
storage: {
useClass: RedisCacheStorage,
},
// or
// storage: {
// useValue: new InMemoryCacheStorage(),
// },
// expiresIn: DEFAULT_CACHE_EXPIRATION_TIME,
// keyGenerator: new CustomCacheKeyGenerator()
},
});Example for RedisCacheStorage:
import { CacheStorage } from '@nxarch/nest-nguniversal';
@Injectable()
export class RedisCacheStorage implements CacheStorage {
constructor(private redisCacheService: RedisCacheService) {}
async get(key: string, request: Request): Promise<string | undefined> {
const result = await this.redisCacheService.get(key);
return result;
}
set(key: string, html: string, request: Request) {
this.redisCacheService.set(key, html);
return html;
}
}Example for CacheKeyGenerator:
export class CustomCacheKeyGenerator implements CacheKeyGenerator {
generateCacheKey(request: Request): string {
const md = new MobileDetect(request.headers['user-agent']);
const isMobile = md.mobile() ? 'mobile' : 'desktop';
return (request.hostname + request.originalUrl + isMobile).toLowerCase();
}
}Request and Response Providers
This tool uses @nguniversal/express-engine and will properly provide access to the Express Request and Response
objects in you Angular components.
This is useful for things like setting the response code to 404 when your Angular router can't find a page (
i.e. path: '**' in routing):
import { isPlatformServer } from '@angular/common';
import { Component, Inject, Optional, PLATFORM_ID } from '@angular/core';
import { RESPONSE } from '@nguniversal/express-engine/tokens';
import { Response } from 'express';
@Component({
selector: 'my-not-found',
templateUrl: './not-found.component.html',
styleUrls: ['./not-found.component.scss'],
})
export class NotFoundComponent {
constructor(@Inject(PLATFORM_ID) private readonly platformId: any, @Optional() @Inject(RESPONSE) res: Response) {
// `res` is the express response, only available on the server
if (isPlatformServer(this.platformId)) {
res.status(404);
}
}
}Contributing
PRs accepted.
License
MIT © 2022 nxarch
![renovate[bot]](https://avatars.githubusercontent.com/u/29139614?size=120)