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
- Remove preserveWhitespaces from tsconfig.server.json (and tsconfig.app.json) so both use the default consistently.
- If set intentionally, set the exact same value in both tsconfig.server.json and tsconfig.app.json.
- 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
- Keep preserveWhitespaces unset in both tsconfigs unless explicitly required.
- Add a config-lint step comparing angularCompilerOptions across tsconfig files.
- Test hydration locally whenever compiler options change.
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
- A module or bootstrap option must be provided.
- 'handleSSGRoute' was called for a route which rendering mode
- The 'getPrerenderParams' function defined for the '${stripLe
- Configuration error: found 'withAppShell()' without 'withRou
- Error(s) occurred while extracting routes:\n${errors.map((er
AI-assisted analysis of angular/angular-cli@bb72145f9a (2026-08-30).
Data as JSON: /api/errors/afc8375a50c66fde.
Report an issue: GitHub.