@nestjs-fixed/ng-universal v8.0.0
Description
Angular Universal module for Nest.
Installation
Till the issue #573 is resolved and the original package does not work as described in the readme you can use this packages as a drop-in replacement. Simply add the following line to your package.json
.
"@nestjs/ng-universal": "npm:@nestjs-fixed/ng-universal@7.0.1",
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 '@nestjs/ng-universal';
@Module({
imports: [
AngularUniversalModule.forRoot({
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 |
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 @angular/ssr
and will properly provide access to the Express Request and Response objects in your Angular components.
Note since Angular 17, tokens are no longer provided by Angular, and must be imported from the @nestjs/ng-universal/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';
@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);
}
}
}
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 {
CustomWebpackBrowserSchema,
TargetOptions
} from '@angular-builders/custom-webpack'
import nodeExternals from 'webpack-node-externals'
export default (
config: Configuration
_options: CustomWebpackBrowserSchema,
targetOptions: TargetOptions
) => {
if (targetOptions.target === 'server') {
config.resolve?.extensions?.push('.mjs', '.graphql', '.gql')
config.module?.rules?.push({
test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto'
});
config.externalsPresets = { node: true }
(config.externals as Array<any>).push(
nodeExternals({ allowlist: [/^(?!(livereload|concurrently|fsevents)).*/]})
);
config.plugins?.push(
new IgnorePlugin({
checkResource: (resource: string) => {
const lazyImports = [
'@nestjs/microservices',
'@nestjs/microservices/microservices-module',
'@nestjs/websockets/socket-module',
'cache-manager',
'class-validator',
'class-transform',
];
if (!lazyImpots.includes(resource)) {
return false;
}
try {
require.resolve(resource)
} catch (_err: any) {
return true;
}
return false;
}
})
);
}
return config;
};
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.