angular/angular-cli · warning

"preserveWhitespaces" was set in "${tsConfigPath}". Make sur

Error message

"preserveWhitespaces" was set in "${tsConfigPath}". Make sure that this setting is set consistently in both "tsconfig.server.json" for your server side and "tsconfig.app.json" for your client side. A mismatched value will cause hydration to break.
For more information see: https://angular.dev/guide/hydration#preserve-whitespaces-configuration

What it means

The server builder checks tsconfig.server.json for angularCompilerOptions.preserveWhitespaces. If set, it warns that the value must match tsconfig.app.json, because a mismatch between server and client templates (whitespace handling) breaks Angular hydration.

Source

Thrown at packages/angular_devkit/build_angular/src/builders/server/index.ts:261

async function checkTsConfigForPreserveWhitespacesSetting(
  context: BuilderContext,
  tsConfigPath: string,
): Promise<void> {
  // We don't use the `readTsConfig` method on purpose here.
  // To only catch cases were `preserveWhitespaces` is set directly in the `tsconfig.server.json`,
  // which in the majority of cases will cause a mistmatch between client and server builds.
  // Technically we should check if `tsconfig.server.json` and `tsconfig.app.json` values match.

  // But:
  // 1. It is not guaranteed that `tsconfig.app.json` is used to build the client side of this app.
  // 2. There is no easy way to access the build build config from the server builder.
  // 4. This will no longer be an issue with a single compilation model were the same tsconfig is used for both browser and server builds.
  const content = await readFile(path.join(context.workspaceRoot, tsConfigPath), 'utf-8');
  const { parse } = await import('jsonc-parser');
  const tsConfig = parse(content, [], { allowTrailingComma: true });
  if (tsConfig.angularCompilerOptions?.preserveWhitespaces !== undefined) {
    context.logger.warn(
      `"preserveWhitespaces" was set in "${tsConfigPath}". ` +
        'Make sure that this setting is set consistently in both "tsconfig.server.json" for your server side ' +
        'and "tsconfig.app.json" for your client side. A mismatched value will cause hydration to break.\n' +
        'For more information see: https://angular.dev/guide/hydration#preserve-whitespaces-configuration',
    );
  }
}

/**
 * Add `@angular/platform-server` exports.
 * This is needed so that DI tokens can be referenced and set at runtime outside of the bundle.
 */
function getPlatformServerExportsConfig(wco: BrowserWebpackConfigOptions): Partial<Configuration> {
  // Add `@angular/platform-server` exports.
  // This is needed so that DI tokens can be referenced and set at runtime outside of the bundle.

  return {
    module: {

View on GitHub (pinned to bb72145f9a)

Solutions

  1. Remove preserveWhitespaces from tsconfig.server.json (and tsconfig.app.json) so both use the default consistently.
  2. If set intentionally, set the exact same value in both tsconfig.server.json and tsconfig.app.json.
  3. After changing, verify hydration by comparing server-rendered HTML with client-rendered DOM.

Example fix

// tsconfig.server.json
// before
"angularCompilerOptions": { "preserveWhitespaces": false }
// after: remove the option or mirror it identically in tsconfig.app.json
"angularCompilerOptions": {}
Defensive patterns

Strategy: validation

Validate before calling

const { readFileSync } = require('fs');
const { parse } = require('jsonc-parser');
const s = parse(readFileSync('tsconfig.server.json','utf8'), [], { allowTrailingComma: true });
const a = parse(readFileSync('tsconfig.app.json','utf8'), [], { allowTrailingComma: true });
const sv = s.angularCompilerOptions?.preserveWhitespaces;
const av = a.angularCompilerOptions?.preserveWhitespaces;
if (sv !== undefined && sv !== av) throw new Error('preserveWhitespaces mismatch between server and app tsconfig');

Prevention

When it happens

Trigger: Building a server target where the parsed tsconfig (jsonc) has `angularCompilerOptions.preserveWhitespaces` defined; the builder warns regardless of the value.

Common situations: Projects that set preserveWhitespaces in one tsconfig but not the other; SSR hydration errors (missing/extra text nodes) in production.

Related errors


AI-assisted analysis of angular/angular-cli@bb72145f9a (2026-08-30). Data as JSON: /api/errors/afc8375a50c66fde. Report an issue: GitHub.