Taking advantage of strict mode and other new configurations

Angular has always been big on tooling. Ivy adds and enables additional configurations that help us catch errors early and output smaller bundles.

Strict mode

When we create an Angular workspace using the ng new command, the --strict parameter flag is on by default as of Angular version 12. Using the strict workspace preset enables additional static analysis. The --strict parameter flag is also supported for project generation schematics such as ng generate application and ng generate library.

The strict preset sets the following TypeScript compiler options to true:

• forceConsistentCasingInFileNames
• noImplicitReturns
• noFallthroughCasesInSwitch
• strict

These options help us catch a lot of potential errors at compile time. Refer to the TypeScript documentation for details about the individual compiler options. The strict TypeScript compiler option is a shorthand for enabling all the following compiler options as of TypeScript version 4.2:

• alwaysStrict
• noImplicitAny
• noImplicitThis
• strictBindCallApply
• strictFunctionTypes
• strictNullChecks
• strictPropertyInitialization

Additionally, future strict TypeScript compiler options will be enabled automatically when using the strict shorthand.

Bundle budgets are reduced in strict mode. The initial bundle warns at 500 kilobytes (KB) and errs at 1 megabyte (MB), while component styles warn at 2 KB and err at 4 KB.

Strict mode further enables strict template type checking, which we will cover later in this chapter.

Angular compiler options

Only a few Angular compiler option defaults have changed in Ivy. In Angular version 9, the default value of the enableIvy option was set to true for applications but false for libraries. This changed in Angular version 12, where the enableIvy option was removed entirely when View Engine support was disabled for Angular applications and the "partial" value for the compilationMode option was added for partial Ivy compilation of Angular libraries.

The strictTemplates option is introduced with Ivy. Its default value is false, but it is set to true when generating an Angular workspace by using the ng new command, which enables the --strict parameter flag. The same applies to the fullTemplateTypeCheck option, which is implicitly set by the strictTemplates option.

The default value of the strictInjectionParameters and strictInputAccessModifiers options is still false, but it is set to true when generating an Angular workspace by using the ng new command.

Now that you are aware of the many helpful configuration options introduced by Angular Ivy, you can gain more confidence about how your Angular application will behave in production runtime.

Next up is a favorite topic of ours: testing. Both Ivy and its related TypeScript versions introduce substantial improvements to the Angular testing experience.