How to use @nestjs/ng-universal - 10 common examples

const path = require('path');
const webpack = require('webpack');
const WebpackConfigFactory = require('@nestjs/ng-universal')
  .WebpackConfigFactory;

const config = WebpackConfigFactory.create(webpack, {
  // Nest server for SSR
  server: './apps/nest-test-app/src/main.ts'
});
config.output = {
  // Puts the output at the root of the dist folder
  path: path.join(__dirname, '../../dist/apps/ng-test-app-server'),
  filename: '[name].js'
};
config.plugins = [
  new webpack.ContextReplacementPlugin(
    // fixes WARNING Critical dependency: the request of a dependency is an expression
    /(.+)?angular(\\|\/)core(.+)?/,
    path.join(__dirname, 'apps/ng-test-app/src'), // location of your src

const path = require('path');
const webpack = require('webpack');
const WebpackConfigFactory = require('@nestjs/ng-universal')
  .WebpackConfigFactory;

const config = WebpackConfigFactory.create(webpack, {
  // Nest server for SSR
  server: './apps/nest-test-app/src/main.ts'
});
config.output = {
  // Puts the output at the root of the dist folder
  path: path.join(__dirname, '../../dist/apps/ng-test-app-server'),
  filename: '[name].js'
};
config.plugins = [
  new webpack.ContextReplacementPlugin(
    // fixes WARNING Critical dependency: the request of a dependency is an expression
    /(.+)?angular(\\|\/)core(.+)?/,
    path.join(__dirname, 'apps/ng-test-app/src'), // location of your src
    {} // a map of your routes
  ),
  new webpack.ContextReplacementPlugin(

import { applyDomino } from '@nestjs/ng-universal';
// Import module map for lazy loading
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'fs';
import { join } from 'path';
import { ROUTES } from './static.paths';

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

const BROWSER_FOLDER = join(process.cwd(), 'browser');

// Load the index.html file containing references to your application bundle.
const indexPath = join('browser', 'index.html');
// Ensure that we mock Window|Document etc
applyDomino(global, indexPath);

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const {
  AppServerModuleNgFactory,
  LAZY_MODULE_MAP,
} = require('./dist/server/main');

let previousRender = Promise.resolve();

// Iterate each route path
ROUTES.forEach(route => {
  const fullPath = join(BROWSER_FOLDER, route);

  // Make sure the directory structure is there
  if (!existsSync(fullPath)) {
    mkdirSync(fullPath);

const webpack = require('webpack');
const WebpackConfigFactory = require('@nestjs/ng-universal')
  .WebpackConfigFactory;

module.exports = WebpackConfigFactory.create(webpack, {
  // Nest server for SSR
  server: './server/main.ts'
});

const webpack = require('webpack');
const WebpackConfigFactory = require('@nestjs/ng-universal')
  .WebpackConfigFactory;

module.exports = WebpackConfigFactory.create(webpack, {
  // Nest server for SSR
  server: './server/main.ts'
});

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

import { AppController } from './app.controller';
import { AppService } from './app.service';

const BROWSER_DIR = join(process.cwd(), 'dist', 'apps', 'ng-test-app');
applyDomino(global, join(BROWSER_DIR, 'index.html'));

@Module({
  imports: [
    AngularUniversalModule.forRoot({
      viewsPath: BROWSER_DIR,
      bundle: require('../../../../dist/apps/ng-test-app-server/main'),
      liveReload: true
    })
  ],
  controllers: [AppController],
  providers: [AppService]
})
export class AppModule {}

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

import { AppController } from './app.controller';
import { AppService } from './app.service';

const BROWSER_DIR = join(process.cwd(), 'dist', 'apps', 'ng-test-app');
applyDomino(global, join(BROWSER_DIR, 'index.html'));

@Module({
  imports: [
    AngularUniversalModule.forRoot({
      viewsPath: BROWSER_DIR,
      bundle: require('../../../../dist/apps/ng-test-app-server/main'),
      liveReload: true
    })
  ],
  controllers: [AppController],
  providers: [AppService]
})
export class AppModule {}

import { Module } from '@nestjs/common';
import { AngularUniversalModule, applyDomino } from '@nestjs/ng-universal';
import { join } from 'path';
import { AppController } from './app.controller';

const BROWSER_DIR = join(process.cwd(), 'dist/browser');
applyDomino(global, join(BROWSER_DIR, 'index.html'));

@Module({
  imports: [
    AngularUniversalModule.forRoot({
      viewsPath: BROWSER_DIR,
      bundle: require('../server/main'),
      liveReload: true,
    }),
  ],
  controllers: [AppController],
})
export class ApplicationModule {}

import { MiddlewareConsumer, Module, NestModule } from '@nestjs/common';
import { AngularUniversalModule } from '@nestjs/ng-universal';
import { transferStateMiddleware } from '@foretag/transfer-state';

import { webFolder, webServerFolder } from './utils';

@Module({
  imports: [
    AngularUniversalModule.forRoot({
      viewsPath: webFolder(),
      bundle: require(webServerFolder('main.js')),
    }),
  ],
})
export class AppModule implements NestModule {
  configure(consumer: MiddlewareConsumer) {
    return consumer
      .apply(transferStateMiddleware)
      .exclude('assets')
      .forRoutes('*');
  }
}

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

const BROWSER_DIR = join(process.cwd(), 'dist', 'browser');
applyDomino(global, join(BROWSER_DIR, 'index.html'));

@Module({
  imports: [
    AngularUniversalModule.forRoot({
      viewsPath: BROWSER_DIR,
      bundle: require('../server/main'),
      liveReload: true
    })
  ]
})
export class ApplicationModule {}