Writing an Angular project with strict check enabled is always fun but enabling the strict flag in your existing typescript/Angular project is still a nightmare, especially when you have a very large project.
In OnceHub, our Angular project was initially created without the strict flag enabled. Gradually the project continued to grow in size with addition of many interesting features to automate your meeting scheduling or even chat-bots to interact with your customers. Since our Angular project didn't start with strict flags, there are many places where types or null reference checks were missing.
As we learnt about the significance of the types in development and in reducing unwanted exceptions, we thought of enabling the strict flag. We enabled it in our tsconfig file and boom, we got thousands of errors in just one go! We missed null checks which could have saved us many null reference errors. Fixing all these errors was an uphill battle as we could not have invested a lot of time just in fixing our existing code, leaving aside all the new features we had planned.
Unfortunately, there were many errors which could break the code in different scenarios and create problems in the future. We realized that if we do not enable the strict flag, these errors will keep increasing. Therefore it was critical for us to migrate our code into a complete strict code. We started searching for ways to do it, but couldn't find a way to achieve it for the Angular project.
Our main requirements were:
Since we could not find any ready-made solution,we started building our own solution and that is how the @oncehub/ng-strictify came into life.
This is a custom Angular CLI builder, which can be used to check Angular projects with a different tsconfig file and can assist enabling any tsconfig rules incrementally. You can add this to your package and start using this with little configuration.
You must have a tsconfig.strict.json file present in your project folder which can be used by ng-strictify. Ng-strictify will use this file as a base configuration.
Initially you can use the listFilesOnly option of this custom builder to know the files with errors and list them in the exclude list. After this you can start changing your files to support strict flags and remove them from this list.
You need to pass the app-name/project-name and the build command for ng-strictify that you specified in the angular.json file.
If you are using any automated build scripts for your project, you should add this new npm script in that CI/CD job as well to run these strict checks for each new build.
Now you need to keep track of the files which are being fixed and keep removing these files from the exclude list under tsconfig.strict.json file.
Once this exclude list is empty, you can merge these configurations from tsconfig.strict.json file to the main tsconfig.json file and remove this tool from your project.
Github Repo: https://github.com/scheduleonce/ng-strictify
Happy coding!
Prakash started his career as an Angular Developer in January 2017. From the very beginning, he was crazy about Angular and worked on various Angular versions, starting from Angular 2. He joined OnceHub as a software engineer in June 2019. At work, he is in love with good quality code and at home, he loves listening to music and reading/writing poetry.