---
title: "Angular 19 and ZoneLess"
date: "2024-12-05"
slug: "angular-19-and-zoneless"
author: "Dany Paredes"
canonical: "https://danywalls.com/angular-19-and-zoneless"
description: "Don't care if you use Angular 14, 15...19; your apps are still under the Zone.js umbrella. Maybe you feel your Angular apps work well, but under the hood, with Zone.js, Angular needs to iterate over the entire DOM tree, impacting app performance. Thi..."
---

Don't care if you use Angular 14, 15...19; your apps are still under the Zone.js umbrella. Maybe you feel your Angular apps work well, but under the hood, with Zone.js, Angular needs to iterate over the entire DOM tree, impacting app performance. This happens because Zone.js uses mocking patches to listen to DOM events and notify Angular when an event is triggered in the app, because Zone.js doesn't know the state of your application or what caused changes, Angular has to check every node in the app.

After moving to a zoneless approach, we can use `ChangeDetectorRef.markForCheck` (`AsyncPipe`), `ComponentRef.setInput`, or even a `Signal` to react to changes or new lifecycle hooks like `afterNextRender`, or `` `afterRender` ``.

## **Moving To ZoneLess**

First, create a new project using Angular 19 CLI `ng new my-zoneless-app` :

```typescript
ng new my-zoneless-app
✔ Which stylesheet format would you like to use? Sass (SCSS)     [ https://sass-lang.com/documentation/syntax#scss        
        ]
✔ Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? no
CREATE my-zoneless-app/README.md (1476 bytes)
CREATE my-zoneless-app/.editorconfig (314 bytes)
CREATE my-zoneless-app/.gitignore (587 bytes)
CREATE my-zoneless-app/angular.json (2800 bytes)
CREATE my-zoneless-app/package.json (1046 bytes)
CREATE my-zoneless-app/tsconfig.json (915 bytes)
```

Remove `Zone.js` from your project by running `npm uninstall zone.js` command.

```typescript
npm uninstall zone.js
```

Edit your `angular.json` file to remove `zone.js` and `zone.js/testing` from both to remove it from the build. Projects that use explicit `polyfills.ts` file should remove `import 'zone.js';` and `import 'zone.js/testing';` from the file.

To activate our angular without `zonejs,` open `app.config.ts` file, in the providers sections, remove `provideZoneChangeDetection({ eventCoalescing: true })` and add `provideExperimentalZonelessChangeDetection()`

> Note `provideExperimentalZonelessChangeDetection` is [experimental](https://angular.dev/api/core/provideExperimentalZonelessChangeDetection)

The `app.config` looks like:

```typescript
import {ApplicationConfig, provideExperimentalZonelessChangeDetection, provideZoneChangeDetection} from '@angular/core';
import { provideRouter } from '@angular/router';
​
import { routes } from './app.routes';
​
export const appConfig: ApplicationConfig = {
  providers: [
    provideExperimentalZonelessChangeDetection(),
    provideRouter(routes)]
};
```

Save your changes run `ng serve` tada!! our app works just like before but without `NgZone`! 🎉

![](/images/posts/angular-19-and-zoneless/aca85752-bde1-4_64407.gif)

That is perfect, but maybe I want to create zoneless by default. No worries; the Angular CLI allows you to do it with a flag.

**UN SEGUNDO ?!**  
***Quieres aprender Angular Moderno en español con Signals***, ***Functional Interceptor***, ***Defer Block***, ***Control Flow***, SSR ademas de ***Jest***, ***NgrxSignals*** *y mas…este es tu curso!*

[![](/images/posts/angular-19-and-zoneless/9da19254-069d-4_64407.jpeg)](https://www.udemy.com/course/angular-moderno/?referralCode=24FEC8EAEAE078ADBF45)

### Create a Zone-Less App by Default?

Create a zone-less app directly using the Angular CLI, create a new project with the `--experimental-zoneless` flag:

```typescript
ng new fastweb --experimental-zoneless
```

The `--experimental-zoneless` flag sets up a zone-less project out of the box, configuring it to work without Angular Zones.

![](/images/posts/angular-19-and-zoneless/7fd50f5d-1abd-4_64407.png)

Sadly but in. Angular 19.0.1 we need to remove "zone.js" package manually by run `npm uninstall zonejs`

![](/images/posts/angular-19-and-zoneless/0a3b3415-99af-4_64407.png)

After that, we are ready to build zoneless apps in Angular 19!

## Recap

We learned how to remove `zone.js` existing applications or create by default using the CLI flag, I hope you start to build your apps without ZoneJS. 😎

SourceCode: [https://github.com/danywalls/zoneless-angular-app](https://github.com/danywalls/zoneless-angular-app)

_Photo by [Ad Lh](https://unsplash.com/@moroccanboy?utm_source=unsplashx&utm_medium=referral) on [Unsplash](https://unsplash.com/?utm_source=unsplashx&utm_medium=referral)_