Builders for Angular Universal server-side rendering, static site generation, and prerendering capabilities.
Builds Angular applications for server-side rendering with Node.js runtime.
/**
* Execute server builder for Angular Universal applications
* @param options - Server build configuration
* @param context - Builder context
* @param transforms - Optional webpack configuration transforms
* @returns Observable with server build results
*/
function executeServerBuilder(
options: ServerBuilderOptions,
context: BuilderContext,
transforms?: {
webpackConfiguration?: ExecutionTransformer<webpack.Configuration>;
}
): Observable<ServerBuilderOutput>;
interface ServerBuilderOptions {
/** Output directory for server bundle */
outputPath: string;
/** Server entry point file */
main: string;
/** TypeScript configuration */
tsConfig: string;
/** Static assets to copy */
assets?: AssetPattern[];
/** File replacements */
fileReplacements?: FileReplacement[];
/** Enable optimization */
optimization?: boolean | OptimizationOptions;
/** Enable source maps */
sourceMap?: boolean | SourceMapOptions;
/** Locale for i18n */
locale?: string;
/** i18n missing translation handling */
i18nMissingTranslation?: 'warning' | 'error' | 'ignore';
/** Delete output path before build */
deleteOutputPath?: boolean;
/** Enable build progress reporting */
progress?: boolean;
/** Enable verbose logging */
verbose?: boolean;
/** Watch for file changes */
watch?: boolean;
/** External dependencies to bundle */
bundleDependencies?: boolean | string[];
}
interface ServerBuilderOutput extends BuilderOutput {
/** Base output directory path */
baseOutputPath: string;
/** Server bundle output path */
outputPath: string;
/** Output paths for different locales */
outputs: {
locale?: string;
path: string;
}[];
}Usage Examples:
import { executeServerBuilder } from "@angular-devkit/build-angular";
// Basic server build configuration
const serverOptions: ServerBuilderOptions = {
outputPath: "dist/my-app-server",
main: "src/main.server.ts",
tsConfig: "tsconfig.server.json",
optimization: true,
sourceMap: false,
bundleDependencies: false
};
// Server build with custom webpack configuration
const serverResult = await executeServerBuilder(serverOptions, context, {
webpackConfiguration: (config) => {
// Add Node.js specific optimizations
config.target = 'node';
config.optimization = {
...config.optimization,
minimize: false // Don't minify server code for debugging
};
return config;
}
}).toPromise();Generates static HTML files for specified routes at build time for Angular Universal applications.
/**
* Execute prerendering for static site generation
* Renders Angular routes to static HTML files
* @param options - Prerender configuration options
* @param context - Builder context
* @returns Promise with build results
*/
function execute as executePrerenderBuilder(
options: PrerenderBuilderOptions,
context: BuilderContext
): Promise<BuilderOutput>;
interface PrerenderBuilderOptions {
/** Browser target to build */
browserTarget: string;
/** Server target to build */
serverTarget: string;
/** Routes to prerender */
routes?: string[];
/** Routes file containing list of routes */
routesFile?: string;
/** Discover routes from Angular Router configuration */
discoverRoutes?: boolean;
}Prerender Usage:
// Basic prerender configuration
const prerenderOptions: PrerenderBuilderOptions = {
browserTarget: "my-app:build:production",
serverTarget: "my-app:server:production",
routes: [
"/",
"/about",
"/contact",
"/products"
],
discoverRoutes: true
};
// Prerender with routes file
const prerenderWithFileOptions: PrerenderBuilderOptions = {
browserTarget: "my-app:build:production",
serverTarget: "my-app:server:production",
routesFile: "routes.txt",
discoverRoutes: false
};
// Execute prerendering
const result = await executePrerenderBuilder(prerenderOptions, context);Routes File Format:
/
/about
/contact
/products
/blog/post-1
/blog/post-2/**
* Server runtime configuration for Angular Universal
*/
interface ServerConfig {
/** Server port */
port: number;
/** Server host */
host?: string;
/** Static files directory */
distFolder: string;
/** Server bundle path */
serverBundle: string;
/** Index HTML template */
indexHtml: string;
/** Enable compression */
compression?: boolean;
/** Cache control headers */
cacheControl?: {
/** Cache duration for static assets */
assets: string;
/** Cache duration for API responses */
data: string;
};
}
/**
* Express server integration types
*/
interface ExpressServerOptions {
/** Express app instance */
app: any;
/** Document template */
template: string;
/** Angular engine options */
engine: {
/** Bootstrap function */
bootstrap: Function;
/** Providers for server rendering */
providers?: any[];
};
}/**
* Server-side rendering context
*/
interface RenderContext {
/** Current request URL */
url: string;
/** Request headers */
headers?: Record<string, string>;
/** User agent string */
userAgent?: string;
/** Initial application state */
state?: any;
/** Locale for i18n */
locale?: string;
}
/**
* Server rendering result
*/
interface RenderResult {
/** Rendered HTML content */
html: string;
/** Application state to transfer */
state?: any;
/** HTTP status code */
statusCode?: number;
/** Response headers */
headers?: Record<string, string>;
/** Redirects if any */
redirectUrl?: string;
}
/**
* Platform server exports configuration
*/
interface PlatformServerExports {
/** Angular platform server module */
platformServer: any;
/** Server-side rendering function */
renderModule: Function;
/** Static rendering function */
renderApplication: Function;
}/**
* Static site generation configuration
*/
interface StaticGenerationOptions {
/** Routes to generate */
routes: string[];
/** Output directory */
outputPath: string;
/** Base href for generated files */
baseHref?: string;
/** Resource inlining options */
inlineResources?: {
/** Inline CSS files */
styles: boolean;
/** Inline JavaScript files */
scripts: boolean;
/** Maximum file size to inline */
maxSize: number;
};
/** Minification options */
minify?: {
/** Minify HTML */
html: boolean;
/** Minify CSS */
css: boolean;
/** Minify JavaScript */
js: boolean;
};
}
/**
* Route extraction configuration
*/
interface RouteExtractionConfig {
/** Extract routes from router configuration */
fromRouter: boolean;
/** Extract routes from sitemap.xml */
fromSitemap?: string;
/** Custom route provider function */
customProvider?: () => Promise<string[]>;
/** Route filtering rules */
filter?: {
/** Include patterns */
include?: string[];
/** Exclude patterns */
exclude?: string[];
};
}