I was recently updating a very large enterprise project from Angular 11 to 12 using nx migrate. There were the expected changes from eslint to tslint, and the linting issues that show up under the new eslint to fix. There were also issues with Storybook, since this project also uses it and it needed updating from version 5 to 6.

The issue however came after all of those chores.

The issue happens at runtime where the running code throw an error that looks similar to the following:

[Insert stack trace example here] (Sorry all, I don’t have the stack trace here. If I run into it again I’ll update this post.)

While debugging this, I found that one library we are using was on Angular 11 and had a different (newer) version of rxjs in it. My debugging process started at a high level trying to find the source of the error, but eventually got to my commenting out large portions of the app so that I could narrow down the scope of where the error occurred. Eventually, once I had removed most of the app from running, the library that was causing the issue showed up in the stack trace. It took a while longer to confirm this was the culprit.

Luckily I was able to work with the other team and get the library updated to Angular 12 and update our project to the matching rxjs version. I did need to pull down the repo with that library, update it to Angular 12, and use npm link to test the library locally.

To do this I also needed to set useSymlinks to true in the builder options for the main project in order to use the linked library correctly. Once this was done, the project worked!

I am not sure what about the Angular 11 version of the project caused the issue, since from what I know of the Ivy compiler with the postinstall script, it should work okay. It frustrates me to know how to fix it, but not why it was broken. If anyone reading this has run into the same issue and knows why, I would love to know.