or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

application-builders.mddevelopment-server.mdindex.mdlibrary-packaging.mdserver-side-rendering.mdtesting-builders.mdtesting-utilities.md
tile.json

server-side-rendering.mddocs/

Server Side Rendering

Builders for Angular Universal server-side rendering, static site generation, and prerendering capabilities.

Capabilities

Server Builder

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();

Prerender Builder

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 Configuration

/**
 * 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[];
  };
}

Universal Rendering Types

/**
 * 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

/**
 * 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[];
  };
}