2 - Zoneless Change Detection: addio Zone.js

// Questo è ciò che Zone.js fa internamente (semplificato)
const originalSetTimeout = window.setTimeout;

window.setTimeout = function(callback: Function, delay: number) {
  // Notifica la zona corrente che sta iniziando un task asincrono
  const zone = Zone.current;
  zone.onScheduleTask('setTimeout');

  return originalSetTimeout(() => {
    zone.onInvokeTask('setTimeout');
    callback();
    // Dopo l'esecuzione, Angular sa che qualcosa potrebbe essere cambiato
    zone.onHasTask();  // Trigger change detection!
  }, delay);
};

// Lo stesso avviene per Promise, addEventListener,
// fetch, XMLHttpRequest, MutationObserver, ecc.
    

// 1. L'utente clicca un bottone
//    Zone.js intercetta addEventListener
//
// 2. Il callback viene eseguito dentro la NgZone
//    NgZone.onMicrotaskEmpty$.emit()
//
// 3. ApplicationRef ascolta e trigghera il tick
class ApplicationRef {
  tick(): void {
    // Controlla OGNI componente nell'albero
    for (const view of this._views) {
      view.detectChanges();  // Dirty checking top-down
    }
  }
}

// 4. Ogni componente confronta i valori correnti con quelli precedenti
class ComponentView {
  detectChanges(): void {
    // Per OGNI binding nel template:
    // if (currentValue !== previousValue) {
    //   updateDOM();
    // }
    // Poi controlla tutti i componenti figli...
  }
}
    

// Con Zoneless, i Signals notificano direttamente Angular

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <p>Contatore: {{ count() }}</p>
    <button (click)="increment()">+1</button>
  `
})
export class CounterComponent {
  count = signal(0);

  increment() {
    this.count.update(v => v + 1);
    // 1. Il Signal sa che il suo valore è cambiato
    // 2. Angular marca SOLO questo componente come dirty
    // 3. Al prossimo tick, SOLO questo componente viene controllato
    // 4. Il binding {{ count() }} viene aggiornato nel DOM
    // Nessun altro componente viene toccato!
  }
}
    

// app.config.ts
import { ApplicationConfig, provideZonelessChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    // Sostituisce provideZoneChangeDetection()
    provideZonelessChangeDetection(),

    provideRouter(routes),
    provideHttpClient(),
  ]
};
    

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "polyfills": [
              // RIMUOVI questa riga:
              // "zone.js"
            ]
          }
        },
        "test": {
          "options": {
            "polyfills": [
              // RIMUOVI anche qui:
              // "zone.js",
              // "zone.js/testing"
            ]
          }
        }
      }
    }
  }
}
    

# Rimuovi zone.js dalle dipendenze
npm uninstall zone.js

# Verifica che non ci siano import residui
grep -r "zone.js" src/ --include="*.ts"

# Se trovi import come questi, rimuovili:
# import 'zone.js';
# import 'zone.js/testing';
    

// main.ts - Nessun cambiamento necessario nella maggior parte dei casi
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));

// La differenza sta tutta in appConfig:
// provideZonelessChangeDetection() al posto di
// provideZoneChangeDetection()
    

@Component({
  selector: 'app-user-profile',
  standalone: true,
  // ZONELESS: Angular traccia che questo template
  // dipende da firstName(), lastName() e fullAddress()
  template: `
    <h2>{{ firstName() }} {{ lastName() }}</h2>
    <p>{{ fullAddress() }}</p>
    <button (click)="updateName('Marco')">Cambia nome</button>
  `
})
export class UserProfileComponent {
  firstName = signal('Federico');
  lastName = signal('Calo');
  city = signal('Bari');
  street = signal('Via Roma 1');

  // computed: dipende da city() e street()
  fullAddress = computed(() =>
    `${this.street()}, ${this.city()}`
  );

  updateName(name: string) {
    this.firstName.set(name);
    // Solo il binding {{ firstName() }} viene aggiornato
    // lastName() e fullAddress() restano invariati
    // Nessun altro componente nell'albero viene controllato
  }
}
    

@Component({
  selector: 'app-timer',
  standalone: true,
  template: `
    <p>Con Signal: {{ countSignal() }}</p>
    <p>Senza Signal: {{ countPlain }}</p>
  `
})
export class TimerComponent {
  // FUNZIONA: Il Signal notifica Angular automaticamente
  countSignal = signal(0);

  // NON FUNZIONA senza Zone.js: Angular non sa che è cambiato!
  countPlain = 0;

  private cdr = inject(ChangeDetectorRef);

  constructor() {
    // Approccio Signal (consigliato)
    setInterval(() => {
      this.countSignal.update(v => v + 1);
      // Angular aggiorna automaticamente il template
    }, 1000);

    // Approccio senza Signal (richiede intervento manuale)
    setInterval(() => {
      this.countPlain++;
      this.cdr.markForCheck();  // Necessario!
      // Senza markForCheck, il template non si aggiorna
    }, 1000);
  }
}
    

@Component({
  selector: 'app-data-loader',
  standalone: true,
  template: `
    @if (loading()) {
      <div class="spinner">Caricamento...</div>
    } @else {
      <ul>
        @for (user of users(); track user.id) {
          <li>{{ user.name }}</li>
        }
      </ul>
    }
  `
})
export class DataLoaderComponent {
  private http = inject(HttpClient);

  users = signal<User[]>([]);
  loading = signal(true);

  constructor() {
    this.http.get<User[]>('/api/users').subscribe({
      next: (data) => {
        this.users.set(data);     // Signal notifica Angular
        this.loading.set(false);  // Signal notifica Angular
        // Nessun markForCheck necessario!
      },
      error: (err) => {
        console.error('Errore:', err);
        this.loading.set(false);
      }
    });
  }
}
    

@Injectable({ providedIn: 'root' })
export class WebSocketService {
  private messages = signal<Message[]>([]);
  readonly latestMessages = this.messages.asReadonly();

  connect(url: string): void {
    const ws = new WebSocket(url);

    ws.onmessage = (event) => {
      const msg: Message = JSON.parse(event.data);
      // Il Signal notifica tutti i componenti che lo leggono
      this.messages.update(msgs => [...msgs, msg]);
    };
  }
}

// Nel componente, basta leggere il Signal nel template:
@Component({
  template: `
    @for (msg of wsService.latestMessages(); track msg.id) {
      <div class="message">{{ msg.text }}</div>
    }
  `
})
export class ChatComponent {
  wsService = inject(WebSocketService);
}
    

# Migra @Input() a input()
ng generate @angular/core:signal-input-migration

# Migra @Output() a output()
ng generate @angular/core:output-migration

# Migra @ViewChild/@ViewChildren a viewChild()/viewChildren()
ng generate @angular/core:signal-queries-migration

# Verifica la compatibilità zoneless
# (controlla se ci sono pattern incompatibili)
ng generate @angular/core:zoneless-migration
    

@Component({
  selector: 'app-hybrid',
  standalone: true,
  template: `
    <!-- Signal: funziona perfettamente in zoneless -->
    <p>Signal: {{ countSignal() }}</p>

    <!-- Observable con async pipe: funziona in zoneless -->
    <p>Observable: {{ data$ | async }}</p>

    <!-- Proprietà semplice: NON si aggiorna automaticamente -->
    <!-- Richiede markForCheck() per aggiornamenti asincroni -->
    <p>Legacy: {{ legacyCount }}</p>
  `
})
export class HybridComponent {
  // Già migrato
  countSignal = signal(0);

  // Funziona grazie a async pipe
  data$ = inject(HttpClient).get('/api/data');

  // Da migrare: servira markForCheck() in zoneless
  legacyCount = 0;
  private cdr = inject(ChangeDetectorRef);

  updateLegacy() {
    setTimeout(() => {
      this.legacyCount++;
      this.cdr.markForCheck(); // Necessario senza Zone.js
    }, 1000);
  }
}
    

// Strategia 1: Wrapper Component con markForCheck
@Component({
  selector: 'app-legacy-wrapper',
  standalone: true,
  template: `
    <legacy-datepicker
      [value]="selectedDate()"
      (dateChange)="onDateChange($event)">
    </legacy-datepicker>
    <p>Data selezionata: {{ selectedDate() }}</p>
  `
})
export class LegacyWrapperComponent {
  selectedDate = signal('');
  private cdr = inject(ChangeDetectorRef);

  onDateChange(date: string) {
    this.selectedDate.set(date);
    // Forza l'aggiornamento se la libreria non
    // trigghera il change detection automaticamente
    this.cdr.markForCheck();
  }
}

// Strategia 2: Usare afterNextRender per operazioni DOM
@Component({
  selector: 'app-chart-wrapper',
  standalone: true,
  template: `<div #chartContainer></div>`
})
export class ChartWrapperComponent {
  chartContainer = viewChild.required<ElementRef>('chartContainer');
  data = input.required<number[]>();

  constructor() {
    // afterNextRender e zoneless-compatible
    afterNextRender(() => {
      this.initChart();
    });

    // Reagisci ai cambiamenti dei dati
    effect(() => {
      const newData = this.data();
      const container = this.chartContainer();
      if (container) {
        this.updateChart(container.nativeElement, newData);
      }
    });
  }

  private initChart() { /* ... */ }
  private updateChart(el: HTMLElement, data: number[]) { /* ... */ }
}
    

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { provideZonelessChangeDetection } from '@angular/core';

describe('CounterComponent (Zoneless)', () => {
  let component: CounterComponent;
  let fixture: ComponentFixture<CounterComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [CounterComponent],
      providers: [
        // Usa zoneless anche nei test
        provideZonelessChangeDetection()
      ]
    }).compileComponents();

    fixture = TestBed.createComponent(CounterComponent);
    component = fixture.componentInstance;
  });

  it('should increment the counter', async () => {
    // Verifica stato iniziale
    expect(component.count()).toBe(0);

    // Esegui azione
    component.increment();

    // Attendi che Angular processi i cambiamenti
    await fixture.whenStable();

    // Verifica il DOM aggiornato
    const el = fixture.nativeElement.querySelector('p');
    expect(el.textContent).toContain('1');
  });

  it('should update derived state', async () => {
    component.count.set(5);

    // In zoneless, fixture.detectChanges() funziona ancora
    fixture.detectChanges();

    expect(component.doubleCount()).toBe(10);
  });

  // NOTA: fakeAsync e tick() NON funzionano in zoneless
  // Usa async/await al loro posto
  it('should handle async operations', async () => {
    component.loadData();

    // Attendi il completamento delle operazioni async
    await fixture.whenStable();
    fixture.detectChanges();

    expect(component.data().length).toBeGreaterThan(0);
  });
});