Resolving issues with zone-flags after upgrading to Ionic 5 with Angular 9

Just the other day, I encountered a weird issue while upgrading an existing Ionic 4 project with Angular 8 to Ionic 5 and Angular 9. After about an hour of searching high and low across the web, I gave in and started to figure it out myself.

I got into this predicament after performing the standard upgrade process for Angular 8 to 9 (Angular has a great utility to help you through upgrades between versions over at: update.angular.io), and doing a quick upgrade to Ionic per the instructions over at the Ionic 5 announcement post.

After that was done, and I performed ‘ionic serve’ to run the app, a compilation error in zone-flags.ts began popping up.

ERROR in ./src/zone-flags.ts
Module build failed(from ./node_modules/@ngtools/webpack/src/index.js):
Error /my/path/src/zone-flags.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

What was going on? I hadn’t changed anything, and this wasn’t in the breaking changes log.

• I tried modifying my tsconfig per the error message, no dice.
• Out of desperation, and what is probably very bad practice, I updated almost every library in package.json to @latest using npm. No luck.
• Finally, I found the issue sitting inside src/polyfills.ts

The troublesome entry (for me at least) was near line 55.

import './zone-flags.ts';

Why was the typescript extension on the end of that import? That’s awfully odd I thought. Being the type of person that challenges things, I changed it and removed the .ts so the entry now looked like:

import './zone-flags';

Saving this file and re-running ‘ionic serve’ dropped this issue like a bad habit, and everything worked just fine after that!

So if you’re upgrading an Ionic 4 project with Angular, take a quick look at the polyfills file, and make sure there’s no funny business!