A progressive Node.js framework for building efficient and scalable server-side applications.
Angular Universal module for Nest.
Using the Angular CLI:
$ ng add @nestjs/ng-universalOr manually:
$ npm i @nestjs/ng-universalSee 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';
@Module({
imports: [
AngularUniversalModule.forRoot({
bootstrap: AppServerModule,
viewsPath: join(process.cwd(), 'dist/{APP_NAME}/browser')
})
]
})
export class ApplicationModule {}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) |
AngularUniversalModule.forRoot({
bootstrap: AppServerModule,
viewsPath: join(process.cwd(), 'dist/{APP_NAME}/browser'),
cache: {
storage: new InMemoryCacheStorage(),
expiresIn: DEFAULT_CACHE_EXPIRATION_TIME,
keyGenerator: new CustomCacheKeyGenerator()
}
});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();
}
}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';
@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);
}
}
}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.
// 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;
};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.
- Author - Kamil Myśliwiec
- Website - https://nestjs.com
- Twitter - @nestframework
Nest is MIT licensed.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent