AbsoluteJS

absolute/no-nondeterministic-render

Disallow nondeterministic values in Angular render paths that can cause SSR hydration mismatches.

AngularProblem
View on GitHub

#Rule Details

Disallows nondeterministic values in Angular render paths, because they produce different output on the server and the client and therefore cause SSR hydration mismatches. It targets @Component classes specifically.

Two positions are checked: inline template strings (scanned for Math.random(, Date.now(, new Date(), crypto.randomUUID(, and performance.now(), and class field initializers using those same expressions. The same calls inside methods or event handlers are fine, new Date(...) with an explicit argument is deterministic, and templateUrl external templates are not inspected.

Inject a deterministic token (so the server and client agree on a value) or compute the value before render instead of generating it during render.

#Examples

Incorrect
TS
@Component({ template: '<p>{{ Math.random() }}</p>' })
export class Dashboard {} // nondeterministicTemplate
TS
@Component({ template: '<p>Hello</p>' })
export class Dashboard {
	readonly id = crypto.randomUUID(); // nondeterministicField
	readonly createdAt = new Date();   // nondeterministicField
}
Correct

Nondeterminism inside methods is allowed

TS
@Component({ template: '<button (click)="shuffle()">Shuffle</button>' })
export class Dashboard {
	shuffle() {
		return Math.random(); // inside a method/event handler — fine
	}
}
TS
@Component({ template: '<p>Created</p>' })
export class Dashboard {
	// Explicit argument makes it deterministic
	readonly createdAt = new Date('2026-04-29T12:00:00.000Z');
}

#Configuration

Enable this rule in your ESLint configuration:

JS
{
	rules: {
		'absolute/no-nondeterministic-render': 'error'
	}
}

#When Not To Use It

If a given Angular app is rendered purely client-side and never server-rendered, hydration mismatches are not a concern — disable the rule for that project.

#Resources