|
| 1 | +# Suggestions for fixing missing `zone.js` error |
| 2 | + |
| 3 | +When running `npm run start` with the original project you might see an error like this: |
| 4 | + |
| 5 | +```text |
| 6 | +Failed to resolve import "zone.js" from ".angular/vite-root/ngx-scroll-top/polyfills.js". Does the file exist? |
| 7 | +``` |
| 8 | + |
| 9 | +Angular 20 no longer adds **Zone.js** by default; however this project still attempted to load it via the `polyfills` array in `angular.json`. When the dependency is not installed this leads to the above Vite error. There are two ways to resolve this: |
| 10 | + |
| 11 | +## ✅ Recommended: Enable zoneless change detection |
| 12 | + |
| 13 | +Angular 20 provides an official **zoneless** mode which removes the need for `zone.js`. It improves bundle size and performance and avoids issues when `zone.js` isn’t available. To enable this in the project: |
| 14 | + |
| 15 | +1. **Remove `zone.js` from the build and test polyfills**. In `angular.json` the `polyfills` arrays were cleared for the `build` and `test` targets. |
| 16 | +2. **Switch to the zoneless provider**. In `src/app/app.config.ts` replace `provideZoneChangeDetection({ eventCoalescing: true })` with `provideZonelessChangeDetection()`. This tells Angular to schedule change detection only after supported notifications such as host/template events, signal updates and `AsyncPipe` emissions. |
| 17 | +3. **Update tests**. The spec file now calls `provideZonelessChangeDetection()` when configuring the `TestBed` so tests run in the same mode as production. |
| 18 | + |
| 19 | +With these changes the project builds and runs without attempting to import `zone.js`. |
| 20 | + |
| 21 | +## 🔧 Alternative: Install `zone.js` |
| 22 | + |
| 23 | +If you don’t want to migrate to zoneless change detection you can simply install the missing dependency: |
| 24 | + |
| 25 | +```bash |
| 26 | +npm install zone.js --save |
| 27 | +``` |
| 28 | + |
| 29 | +After installation you should keep `"zone.js"` in the `polyfills` array and continue using `provideZoneChangeDetection`. However, note that the container environment used here does not have network access to fetch packages from npm, so the zoneless approach was used instead. |
| 30 | + |
| 31 | +## Files updated |
| 32 | + |
| 33 | +The following files were changed to implement the zoneless fix: |
| 34 | + |
| 35 | +- **angular.json** – removed `zone.js` and `zone.js/testing` from the `polyfills` arrays. |
| 36 | +- **src/app/app.config.ts** – replaced `provideZoneChangeDetection` with `provideZonelessChangeDetection()`. |
| 37 | +- **src/app/app.component.spec.ts** – added a provider for `provideZonelessChangeDetection()` to align tests with the production configuration. |
| 38 | + |
| 39 | +A copy of the updated project (including this file) has been provided in the zip archive. |
0 commit comments