Angular Extended Diagnostics Demo

This is a demo of Angular extended diagnostics. In v13.2, Angular added extended diagnostics which flag possible mistakes in Angular templates as warnings. The app.component.ts file demos the two diagnostics introduced in 13.2 (invalid banana in box and nullish coalescing not nullable).

These diagnostics are warnings by default but can be configured in the tsconfig.json.

Angular configurations can be combined with extended diagnostics to present multiple build types with different strictness. A developer build could treat all diagnostics as informational warnings to avoid impeding the edit/refresh workflow while a continuous integration (CI) build could treat all diagnostics as hard errors. This is done in this repository with the ci configuration.

# Developer builds, extended diagnostics are warnings.
ng serve
ng build -c development

# Build for CI, extended diagnostics are errors.
ng build -c ci

This is implemented by defining a custom ci configuration in angular.json which uses tsconfig.ci.json and sets all extended diagnostics to errors.

Angular-Extended-Diagnostics-Demo/angular.json

Lines 64 to 66 in 277ab3b

	"ci": {
	"tsConfig": "tsconfig.ci.json"
	}

Angular-Extended-Diagnostics-Demo/tsconfig.ci.json

Lines 4 to 6 in 277ab3b

	"extendedDiagnostics": {
	"defaultCategory": "error"
	}

Fore more information about extended diagnostics, check out the Angular blog post on the topic!