@waitaction/nestjs-ng-universal

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

<p align="center">

Description

Angular Universal module for Nest.

Installation

Using the Angular CLI:

$ ng add @waitaction/nestjs-ng-universal

Or manually:

$ npm i @waitaction/nestjs-ng-universal

Example

See full example here.

Usage

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 '@waitaction/nestjs-ng-universal';

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

useEjsEngine 设置为 true 则输出不渲染的html

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
cache	boolean? | object?	Cache options, description below (default: true )
useEjsEngine	boolean?	HTML that is not rendered on the server (default: false )

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({
  bootstrap: AppServerModule,
  viewsPath: join(process.cwd(), 'dist/{APP_NAME}/browser'),
  cache: {
    storage: new InMemoryCacheStorage(),
    expiresIn: DEFAULT_CACHE_EXPIRATION_TIME,
    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 = 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 { Response } from 'express';
import { Component, Inject, Optional, PLATFORM_ID } from '@angular/core';
import { isPlatformServer } from '@angular/common';
import { RESPONSE } from '@nguniversal/express-engine/tokens';

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

Universal Cookie

The server and client share the CookieService .

import { makeStateKey, TransferState } from '@angular/platform-browser';
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpResponse } from '@angular/common/http';
import { tap } from 'rxjs/operators';
import { CookieService } from '@gorniv/ngx-universal';
import { TokenService } from '../token.service';

@Injectable()
export class ServerStateInterceptor implements HttpInterceptor {

    constructor(
        private transferState: TransferState,
        private tokenService: TokenService,
        private cookieService: CookieService) { }

    intercept(req: HttpRequest<any>, next: HttpHandler) {
        let self = this;
        return next.handle(req).pipe(
            tap(event => {
                if (event instanceof HttpResponse) {
                    this.transferState.set(makeStateKey(self.tokenService.computedUrlKey(req.url)), event.body);
                    this.cookieService.put(self.tokenService.computedUrlKey(req.url), "server");
                }
            })
        );
    }
}

Support

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

• Author - Kamil Myśliwiec
• Website - https://nestjs.com
• Twitter - @nestframework

License

Nest is MIT licensed.