Set Angular compiler options in the angularCompilerOptions object of a TypeScript configuration file such as tsconfig.json. Keep them separate from TypeScript’s compilerOptions and from Angular CLI build settings in angular.json. For most applications, start with the defaults, enable strict template checking, and use full compilation; choose partial compilation when publishing a library for consumers on different Angular versions.
Where Angular compiler options belong
Angular’s compiler-options reference says the Angular compiler is primarily configured through tsconfig.json, while Angular CLI is primarily configured through angular.json. In a TypeScript configuration file, put Angular-specific settings at the top level under angularCompilerOptions, alongside (not inside) TypeScript’s compilerOptions.
As an Amazon Associate I earn from qualifying purchases.
{
"compilerOptions": {
"strict": true
},
"angularCompilerOptions": {
"strictTemplates": true,
"strictInjectionParameters": true
}
}See the Angular compiler options reference for supported settings. A configuration can extend another one: the base configuration loads first, and the extending file can override it. This lets a workspace keep shared settings in tsconfig.json while an application-specific file such as tsconfig.app.json supplies or overrides settings for that application. Angular’s file-structure guide describes the role of the workspace’s TypeScript configuration files.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Compiler options versus CLI build settings
Options that control Angular template compilation belong in angularCompilerOptions. Build and workspace behavior belongs in Angular CLI configuration. For example, ng build documents an aot boolean option, with a default of true; workspace optimization settings cover such output steps as minification, tree-shaking, dead-code elimination, critical CSS, and font inlining. See the ng build reference and workspace configuration guide. The exact options and defaults depend on Angular version and builder, so check those used by your project.
#1 Best Overall
AOT or JIT: which compilation model applies?
With ahead-of-time (AOT) compilation, Angular compiles templates and TypeScript during the build. Just-in-time (JIT) compilation instead compiles in the browser at runtime. Angular’s AOT guide describes AOT’s benefits as faster rendering, fewer asynchronous requests, a smaller framework download because the compiler need not be downloaded, earlier template-error detection, and fewer opportunities for injection attacks. These are the guide’s stated reasons for using AOT, not guarantees of a particular measured improvement in every application.
The guide says AOT has been the default starting with Angular 9, and the current CLI build reference lists aot as true by default. Confirm the effective setting in your project’s version, builder, and configuration rather than assuming a default has not been overridden. Most users invoke the compiler through Angular CLI; the Angular compiler can also be invoked through ngc from @angular/compiler-cli.
Full or partial compilation?
The compilationMode setting affects the form of compiled output. Choose according to whether you are building an application for its own Angular version or packaging a library for use by other projects.
| Mode | Best fit | Why |
|---|---|---|
full |
Most applications; also libraries built in a monorepo with an app using the same Angular version | Produces code for the Angular version currently in use. It is the normal choice when the consuming application uses that version. |
partial |
Independently published libraries | Emits a stable intermediate form suited to consumers using a different Angular version, reducing version-skew concerns. |
These uses are described in the compiler-options reference and Angular’s Angular Package Format guide. Partial compilation is not a general-purpose optimization switch for application builds; its value is compatibility for library distribution.
Rank #3
Should you enable strict template and injection checks?
strictTemplates
strictTemplates enables strict type checking for Angular templates. Angular’s AOT guide explains that template checking uses TypeScript to validate bindings and surface errors during the build, before they can become runtime problems. The compiler-options reference lists strict template checking as enabled by default. Check your effective configuration before changing it, especially in an existing project where an extending TypeScript config may override the setting.
The Angular Language Service reads tsconfig.json and provides template completions, errors, hints, and navigation in the editor. Its guide recommends strictTemplates: true for the latest language-service features.
strictInjectionParameters
This option checks whether Angular can determine the types of dependency-injection parameters. The compiler-options reference recommends setting it to true, although it identifies false as the default. Enabling it can reveal parameters whose types Angular cannot infer; address the resulting type or provider issues rather than disabling the check without understanding the cause.
Recommended Free Tools
Other compiler settings worth changing only for a reason
annotationsAs: The default isstatic fields, which the reference says can help advanced tree-shakers remove unused classes. Setting it todecoratorscan make compilation faster but may inhibit tree-shaking.enableI18nLegacyMessageIdFormat: The documented default istrue. Angular recommendsfalseunless the project relies on translations created with legacy message IDs. Support differs by builder, so verify compatibility before changing it.preserveWhitespaces: The default isfalse. Angular recommends keeping that default for hydration and notes that preserving whitespace is not yet fully supported for hydration. If you enable it, keep server and client configurations consistent.disableTypeScriptVersionCheck: This suppresses errors for unsupported TypeScript versions. Angular does not recommend using it: unsupported versions may produce undefined behavior.
Options such as flatModuleOutFile, skipMetadataEmit, skipTemplateCodegen, and strictMetadataEmit concern library packaging or legacy metadata output. Treat them as library-specific settings, not routine additions to an application’s configuration.
How to make a safe configuration change
- Identify the TypeScript configuration file actually used by the target build, and check its
extendschain for inherited settings and overrides. - Put Angular template/compiler settings under
angularCompilerOptions; change CLI build settings in the workspace/build configuration instead. - Choose options for the project’s purpose: full compilation for most apps, partial compilation for independently published libraries, and strict checks when you want earlier diagnostics.
- Build with the project’s normal Angular CLI command and review compiler errors. If a setting is unsupported or behaves differently, check the documentation for the installed Angular version and builder.
Angular’s compiler settings and defaults can change across releases. The current official references explain the configuration model, but the project’s installed Angular version and builder determine what is available and effective.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
