4 min read

Incremental migration of Angular project for strict mode

Featured Image

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:

  1. To do this migration incrementally
  2. Maintaining the strictness for already fixed files (no regression)
  3. Allowing only strict code in newly added files

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.

@oncehub/ng-strictify

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.

Configuration steps

  1. Installation
  2. Adding to the project architect
  3. Adding a tsconfig.strict.json file
  4. Update your build scripts
  5. Observe the progress

1. Installation


2. Adding to the project architect - (angular.json)


Architect configuration explained
  • Build command: strictify: To use with ng cli.
  • Builder: @oncehub/ng-strictify:strictify: Name of the CLI builder and its command to execute.
  • Options:
    • command: name of the command - Same as mentioned in builder.
    • buildScript: Specify the build script mentioned in your package file. This script will be executed from within the ng-strictify builder.
    • listFilesOnly: (optional) If true, ng-strictify will print the list of files with errors. You can use this to find out all the files that need to be excluded when you start the incremental migration.

3. Adding a tsconfig.strict.json file

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.

4. Update your build scripts - (package.json)

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.

5. Observe the progress

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 Verma, Software Engineer

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.