Ng Universal Save

Angular Universal module for Nest framework (node.js) 🌷

Project README

Nest Logo

A progressive Node.js framework for building efficient and scalable server-side applications.

NPM Version Package License NPM Downloads Coverage Discord Backers on Open Collective Sponsors on Open Collective


Angular Universal module for Nest.


Using the Angular CLI:

$ ng add @nestjs/ng-universal

Or manually:

$ npm i @nestjs/ng-universal


See full example here.


If you have installed the module manually, you need to import AngularUniversalModule in your Nest application.

import { Module } from '@nestjs/common';
import { join } from 'path';
import { AngularUniversalModule } from '@nestjs/ng-universal';

  imports: [
      bootstrap: AppServerModule,
      viewsPath: join(process.cwd(), 'dist/{APP_NAME}/browser')
export class ApplicationModule {}

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 Function Angular server module reference (AppServerModule).
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? | object? Cache options, description below (default: true)
errorHandler Function? Callback to be called in case of a rendering error


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)
  bootstrap: AppServerModule,
  viewsPath: join(process.cwd(), 'dist/{APP_NAME}/browser'),
  cache: {
    storage: new InMemoryCacheStorage(),
    keyGenerator: new CustomCacheKeyGenerator()

Example for CacheKeyGenerator:

export class CustomCacheKeyGenerator implements CacheKeyGenerator {
  generateCacheKey(request: Request): string {
    const md = new MobileDetect(request.headers['user-agent']);
    const isMobile = ? '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. Note that tokens must be imported from the @nestjs/ng-universal/tokens, not @nguniversal/express-engine/tokens.

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 { Response } from 'express';
import { Component, Inject, Optional, PLATFORM_ID } from '@angular/core';
import { isPlatformServer } from '@angular/common';
import { RESPONSE } from '@nestjs/ng-universal/tokens';

  selector: 'my-not-found',
  templateUrl: './not-found.component.html',
  styleUrls: ['./not-found.component.scss']
export class NotFoundComponent {
    private readonly platformId: any,
    res: Response
  ) {
    // `res` is the express response, only available on the server
    if (isPlatformServer(this.platformId)) {

Custom Webpack

In some situations, it may be required to customize the webpack build while using @nestjs/ng-universal, especially when additional dependencies are included (that rely on native Node.js code).

To add a customizable webpack config to your project, it is recommended to install @angular-builders/custom-webpack in the project and to set your builders appropriately.

Example Custom Webpack

// webpack.config.ts
import { Configuration, IgnorePlugin } from 'webpack'
import {
} from '@angular-builders/custom-webpack'
import nodeExternals from 'webpack-node-externals'

export default (
  config: Configuration
  _options: CustomWebpackBrowserSchema,
  targetOptions: TargetOptions
) => {
  if ( === 'server') {
    config.resolve?.extensions?.push('.mjs', '.graphql', '.gql')

      test: /\.mjs$/,
      include: /node_modules/,
      type: 'javascript/auto'

    config.externalsPresets = { node: true }

    (config.externals as Array<any>).push(
      nodeExternals({ allowlist: [/^(?!(livereload|concurrently|fsevents)).*/]})

      new IgnorePlugin({
        checkResource: (resource: string) => {
          const lazyImports = [

          if (!lazyImpots.includes(resource)) {
            return false;

          try {
          } catch (_err: any) {
            return true;
          return false;
  return config;


Nest is an MIT-licensed open source project. It can grow thanks to the sponsors and support by the amazing backers. If you'd like to join them, please read more here.

Stay in touch


Nest is MIT licensed.

Open Source Agenda is not affiliated with "Ng Universal" Project. README Source: nestjs/ng-universal
Open Issues
Last Commit
3 days ago

Open Source Agenda Badge

Open Source Agenda Rating