iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Angular compiler options belong under angularCompilerOptions in a TypeScript configuration file such as tsconfig.json. TypeScript settings go under compilerOptions, while Angular CLI build settings—such as whether a build uses AOT—belong in the workspace configuration, usually angular.json. Keeping those layers distinct helps you choose the right setting and avoid putting it in the wrong file.
Where Angular compiler options go
Angular’s compiler-options reference says the Angular compiler is primarily configured through tsconfig.json, while Angular CLI is primarily configured through angular.json. Angular compiler options live in the top-level angularCompilerOptions object, alongside TypeScript’s compilerOptions; they are not nested inside it.
{
"compilerOptions": {
"strict": true
},
"angularCompilerOptions": {
"strictTemplates": true
}
}In a CLI workspace, a project may use a base tsconfig.json plus a configuration such as tsconfig.app.json. TypeScript configuration supports extends: the base configuration loads first, and the extending file can override inherited values. This lets a workspace keep common compiler settings in one place and put app-specific settings in the app configuration. Angular’s file-structure guide describes the workspace’s configuration files.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsFor most projects, use the Angular CLI rather than invoking the compiler directly. The Angular compiler can also be run through ngc from @angular/compiler-cli. The compiler-options reference documents the compiler settings; the ng build reference documents the CLI build command.
#1 Best Overall
Angular compiler options, TypeScript options, and CLI build settings
These configuration layers affect different parts of the build. A setting’s name alone does not tell you where to put it; use the setting’s documented scope.
| Configuration layer | Where it belongs | What it controls |
|---|---|---|
| Angular compiler | angularCompilerOptions in a TypeScript configuration file |
Angular-specific compilation, including template checking and compilation mode |
| TypeScript compiler | compilerOptions in a TypeScript configuration file |
TypeScript compiler behavior |
| Angular CLI workspace/build | Project build configuration in angular.json |
CLI build behavior, including the aot build option and output optimizations |
The CLI’s workspace configuration covers output optimizations such as minification, tree-shaking, dead-code elimination, critical CSS, and font inlining. Those are build settings, not Angular compiler options. See Workspace configuration and ng build.
Choosing AOT or JIT
Ahead-of-time (AOT) compilation compiles Angular templates and TypeScript during the build. Just-in-time (JIT) compilation compiles in the browser at runtime. Angular’s guide lists AOT’s benefits as faster rendering, fewer asynchronous requests, no need to download the compiler as part of the framework, earlier template-error detection, and fewer opportunities for injection attacks. These are the guide’s stated reasons for AOT, not quantified guarantees for every application. Read Angular’s AOT guide.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
The aot option is a CLI build setting, not a member of angularCompilerOptions. The ng build reference lists it as a boolean with a default of true. Angular’s guide says AOT has been the default starting with Angular 9 and that new CLI applications use it by default. Because behavior can depend on Angular version and builder, check the project’s actual configuration rather than assuming a default applies unchanged. See the current ng build options.
Rank #3
Choosing full or partial compilation
The compilationMode option controls the form of Angular compiler output. The right choice depends primarily on whether the code is an application or a library distributed for use with other Angular versions.
| Mode | Best fit | Reason |
|---|---|---|
full |
Most applications, and libraries built in a monorepo for an app using the same Angular version | Produces code for the Angular version currently in use; there is no consumer-version skew in the same-version monorepo case. |
partial |
Independently published libraries | Emits a stable intermediate form intended to support consumers using a different Angular version. |
For an application, use the normal full-compilation path unless a specific packaging requirement says otherwise. For a library that is published independently, partial compilation is the compatibility-oriented choice. Angular’s compiler options reference explains the modes, and its Angular Package Format guide covers library packaging.
Template checking and strictness
strictTemplates enables strict type checking for Angular templates. Template checking uses TypeScript to validate bindings, allowing errors to surface during compilation rather than later at runtime. The compiler-options reference lists strictTemplates as enabled by default, but a project’s inherited or local configuration may override it. Inspect the effective TypeScript configuration before changing the setting. See the option reference.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Strict checking can also improve the editor experience: Angular Language Service reads tsconfig.json and provides completions, errors, hints, and navigation for templates. Its guide recommends strictTemplates: true for the latest language-service features. Read the Language Service guide.
strictInjectionParameters checks whether Angular can determine injection parameter types. Angular recommends enabling it; the compiler-options reference identifies false as its default. If you want this check, set it explicitly rather than assuming that template strictness enables it.
{
"angularCompilerOptions": {
"strictTemplates": true,
"strictInjectionParameters": true
}
}Other compiler options to change only for a reason
annotationsAs: The default,static fields, can help advanced tree-shakers remove unused classes. Choosingdecoratorsmay compile faster but can inhibit tree-shaking.enableI18nLegacyMessageIdFormat: The documented default istrue. Angular recommendsfalseunless the project relies on translations created with legacy message IDs. Support varies by builder, so verify compatibility for the builder in use.preserveWhitespaces: The default isfalse. Angular recommends keeping that default for hydration because whitespace preservation is not fully supported for hydration. If you enable it, keep the server and client configurations consistent.disableTypeScriptVersionCheck: This suppresses errors for unsupported TypeScript versions. Angular does not recommend it: using an unsupported version can lead to undefined behavior.
These defaults and qualifications are documented in Angular compiler options. A listed default is a starting point, not proof that a workspace has not overridden it.
Library-only and legacy options
Options such as flatModuleOutFile, skipMetadataEmit, skipTemplateCodegen, and strictMetadataEmit concern library packaging or legacy metadata output. They are not routine settings for an application. Before adding one, confirm that the library workflow you use requires it and that it is supported by your Angular version and builder.
Quick Recap
A practical way to configure a project
- Identify the active TypeScript configuration. Check the workspace’s
tsconfig.jsonand any app-specific file, such astsconfig.app.json, to see which file is used and what it extends. - Put Angular-specific settings in the right object. Add them under the top-level
angularCompilerOptions; keep TypeScript settings undercompilerOptions. - Set only the options tied to your goal. For stricter template diagnostics, inspect and configure
strictTemplatesand, if needed,strictInjectionParameters. For a published library, choose the compilation mode based on whether consumers may use a different Angular version. - Check CLI build settings separately. Review the project’s build configuration in
angular.jsonfor options such asaotand output optimizations; do not move these intoangularCompilerOptions. - Build with the project’s installed Angular version and builder. Confirm that the option is supported and review any compilation errors. Angular’s documentation describes current behavior, but releases and builders can differ.
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.
