Zone.js not loaded runtime error after Clarity v4 upgrade

Explanation

Clarity v4 removed the IE11 polyfills that previously guaranteed a zone.js global. It now expects a standard, unpolyfilled zone.js to be present before Angular bootstrap. If a custom zone.js bundle (e.g., zone.js/dist/zone-evergreen.js) is not loaded early enough, Angular reports Zone.js not loaded during startup.

Confirmed facts

• The zone-evergreen build provides the necessary patches for Angular 15 change detection and router.
• Clarity v4 does not require ZoneAwarePromise or any special zone.js flags.
• Angular CLI does not need an explicit zone.js option in angular.json when the evergreen script is loaded globally.

Steps to resolve

1. Ensure the evergreen bundle is loaded before Angular bootstrap:
• Option A – via angular.json scripts array:

"scripts": [
  "node_modules/zone.js/dist/zone-evergreen.js"
]

• Option B – explicit import in polyfills.ts (add as the very first line):

import 'zone.js/dist/zone-evergreen.js';

2. Remove any conflicting zone configuration, such as "zone": "legacy" or a custom zoneConfig under the build options in angular.json; leave the option unset or set to "zone": "".
3. Verify that no other zone.js file (e.g., the default zone.js) is being loaded after the evergreen script, as duplicates can overwrite the global.
4. Rebuild and serve the application (ng serve or ng build).

Verification

1. Open the browser console immediately after page load and run typeof Zone; it should return "function".
2. Check the Network tab to confirm zone-evergreen.js is requested and executed before main.js.
3. If the Zone.js not loaded error disappears, the configuration is correct.