A guide on converting your current Angular app into a "fully strict" application – follow these steps!

Question

A guide on converting your current Angular app into a "fully strict" application – follow these steps!

I started developing an Angular Application back in Angular 4 and now it has been upgraded to Angular 12. However, during the initial development phase, the strict mode was not enabled. Now that the application is stable and live in production, I am looking for the best way to gradually enable strict mode instead of turning on all strict options at once.

I came across a helpful answer on enabling strict mode in Angular 10 here, which gives a general overview of enabling strict mode.

My specific question is about how to enable strict mode in stages. Considering the medium size and complexity of the application, testing all the changes at once would be a significant challenge. There are various options in Angular strict config such as some that can be manually configured and some that are turned on by strict:true:

noImplicitAny
strictInjectionParameters
strictTemplates
strictNullChecks
Enable in tslint.json by setting "no-any": true

What is the most effective way to enable these settings gradually, in a specific order, to ensure thorough testing before deploying to production? I would appreciate any guidance, especially from someone who has successfully updated an existing project incrementally rather than all at once.

angular typescript strict

Answer 1

Answer №1

Here is a helpful strategy:

Start by defining all your models - interfaces/types/classes - as the ultimate source of truth for types. Avoid using the any type whenever possible during this process.
Ensure to type your functions - While the language service/compiler might infer types for functions, explicitly adding types will notify you of any incorrect function usage.
Take advantage of Generics - Angular offers functions that accept generic types to ensure the expected type. For instance, when expecting a number from an api call, specify that type in the function invocation like so:
```
this.http.get<number>(someAPIUrl)
```
. Libraries usually have detailed documentation on typings.
Enable tsconfig flags like noImplicitAny to pinpoint areas needing more typing that may have been overlooked. You can also consider enabling strict mode.
Activate template type checking - Refer to Angular docs for guidance. It's incredibly beneficial to navigate from a template object property directly to its class/interface/type definition.

Be prepared for some trial and error as you work towards your goal. Expect some things to break before they get fixed. Take it one step at a time.

Notably, the Angular Team continues to enhance typing with initiatives like Typed Forms.

Answer 2

Here is a helpful strategy:

Start by defining all your models - interfaces/types/classes - as the ultimate source of truth for types. Avoid using the any type whenever possible during this process.
Ensure to type your functions - While the language service/compiler might infer types for functions, explicitly adding types will notify you of any incorrect function usage.
Take advantage of Generics - Angular offers functions that accept generic types to ensure the expected type. For instance, when expecting a number from an api call, specify that type in the function invocation like so:
```
this.http.get<number>(someAPIUrl)
```
. Libraries usually have detailed documentation on typings.
Enable tsconfig flags like noImplicitAny to pinpoint areas needing more typing that may have been overlooked. You can also consider enabling strict mode.
Activate template type checking - Refer to Angular docs for guidance. It's incredibly beneficial to navigate from a template object property directly to its class/interface/type definition.

Be prepared for some trial and error as you work towards your goal. Expect some things to break before they get fixed. Take it one step at a time.

Notably, the Angular Team continues to enhance typing with initiatives like Typed Forms.

Answer 3

Answer №2

Currently, I am in the process of developing an application that has made the transition from Angular 1 to Angular 12. Working within a team environment on a project of medium to large size, utilizing incremental tooling has proven to be essential in ensuring that we are on the right path.

Implement eslint rules such as explicit-module-boundary-types.
Enable
```
angularCompilerOptions.strictTemplates
```
in your tsconfig.json file (or a subset of it).
Develop a tsconfig.strict.json file that compiles a portion of your application using the files and includes options. Then, incorporate
```
tsc -project src/tsconfig.strict.json --noEmit --incremental
```
into our automated testing process. This will ensure that new files are added and that any important existing files are accounted for.

Answer 4

Currently, I am in the process of developing an application that has made the transition from Angular 1 to Angular 12. Working within a team environment on a project of medium to large size, utilizing incremental tooling has proven to be essential in ensuring that we are on the right path.

Implement eslint rules such as explicit-module-boundary-types.
Enable
```
angularCompilerOptions.strictTemplates
```
in your tsconfig.json file (or a subset of it).
Develop a tsconfig.strict.json file that compiles a portion of your application using the files and includes options. Then, incorporate
```
tsc -project src/tsconfig.strict.json --noEmit --incremental
```
into our automated testing process. This will ensure that new files are added and that any important existing files are accounted for.

A guide on converting your current Angular app into a "fully strict" application – follow these steps!

Answer №1

Answer №2

Similar questions

Encountering difficulty invoking a component method from d3's call() function

The property you are trying to access is not found within the declared type of 'IntrinsicAttributes & { children?: ReactNode; }'

The date format being sent by Angular to Java is incorrect, resulting in the inability to create an object in the

What is the most effective way to split time into two separate parts?

Delay in Updating Nativescript Slider Value

Content obscuring dropdown menu

What is the reason for the return of undefined with getElementsByClassName() in puppeteer?

How can I integrate a timer into an Angular carousel feature?

Using TypeScript to Verify the Existence of Words in a String

Issue arising with data exchange between components using data service in Angular 5

Ways to initiate an HTTP request within switchMap upon emission of a BehaviorSubject value

Understanding Multiple Type Scenarios in React with Typescript

What distinguishes ES6 from ES2015 in the TypeScript compiler option `--libs`?

I'm encountering an issue where the 'switchMap' property is not recognized on the 'Observable<User>' type

What is the reason behind the error Generic indexed type in Typescript?

Changing a particular field value within an array of objects in Angular 4

The Angular translation service may encounter issues when used on different routes within the application

Is OnPush Change Detection failing to detect state changes?

Uploading files in Angular application

NPM displaying an error message