How to make existing angular application "fully strict" step by step?

Question

I have an existing Angular Application that started development at the time of Angular 4, now it's on Angular 12. But at the time of development, the strict mode was not enabled. Now after the application is stable and also deployed on production, what's the best way to enable strict mode stey by step i.e. in phases instead of turning every strict option on.

I have already read the answer here Angular 10 Stricter Settings --strict , which is for generally enabling strict mode.

My question is related to how to enable it in phases. As the application size/complexity is medium level, therefore it will be a major challenge to test all of the changes at once. There are a few options I see in angular strict config such as, some of them can be configured manually as well some are turn on by strict:true:

1. noImplicitAny
2. strictInjectionParameters
3. strictTemplates
4. strictNullChecks
5. Enabling in tslint.json "no-any": true

What's the best way to enable these settings, step by step, in a specific order which is better? So that it can be tested and deployed to production in phases instead of one whole chunk which has changes of bug/issue going unnoticed. Any help would be appreciated especially by someone who has gone through updating an already existing project, in a bits by bits manner instead of one whole push.

Answer 1

One good approach:

1. Begin by typing all your models - interfaces/types/classes - as this should be the source of truth for types. While doing this, avoid (where possible) to use the any type.
2. Type your functions - Although most times, the language service/compiler may infer what types come in and out of the function, adding types will ensure your compiler tells you when you're not using your functions correctly
3. Use Generics to your advantage - Angular has many functions that accept generic types that you can leverage to ensure you're getting the expected type. One good example is the HttpClient's functions: get, put, post, delete. Say, you're expecting a number type from an api call, then you'd add they type to the function invocation: this.http.get<number>(someAPIUrl). Most of the libraries have good documentation on their typings.
4. You can start turning on the tsconfig flags such as noImplicitAny - this will help narrow down the places where you need to add more typing that you may have overlooked. At this point, you can even turn on strict mode as well.
5. Turn on template type checking - The Angular docs are super helpful for this - I can't tell you enough how easy it is to click on an object's property in the template and it takes me straight to the class/interface/type definition.

Of course, it may take some time before you get to where you want and expect some things to break before you fix them. So working through it bit by bit my help.

Just to note, there's more work that the Angular Team is doing to improve typing such as Typed Forms.

Answer 2

I'm also working on an app that went from Angular 1 to Angular 12. When you're doing it as part of a team on a medium or large app, incremental tooling helps make sure you're moving in the right direction.

1. Enable eslint rules like explicit-moudle-boundary-types.
2. Enable angularCompilerOptions.strictTemplates in your tsconfig.json file (or a subset of it).
3. Create a tsconfig.strict.ts file that compiles a subset of your app via files and includes. Then, run tsc -project src/tsconfig.strict.json --noEmit --incremental as part of our automated tests. Require that new files are added and start adding old, important ones.