10 - Migrare da Angular 17 ad Angular 21: Guida Pratica

# 1. Verifica la versione corrente di Angular
ng version

# 2. Controlla la versione di Node.js
node --version

# 3. Assicurati che il repository sia pulito
git status

# 4. Crea un branch dedicato alla migrazione
git checkout -b feat/angular-21-migration

# 5. Esegui i test correnti per avere una baseline
npm test -- --watch=false

# 6. Build di produzione per verifica baseline
npm run build

# 7. Verifica le dipendenze obsolete
npm outdated

# 8. Controlla vulnerabilità
npm audit
    

# Aggiorna Angular CLI e Core
ng update @angular/core@18 @angular/cli@18

# Se usi Angular Material
ng update @angular/material@18

# Se usi Angular CDK
ng update @angular/cdk@18

# Risolvi eventuali conflitti peer dependencies
npm install --legacy-peer-deps
    

# Migrazione automatica del control flow
ng generate @angular/core:control-flow

# Oppure, per un singolo progetto in un workspace
ng generate @angular/core:control-flow --project=my-app

# Dopo la migrazione, verifica i cambiamenti
git diff
    

<!-- *ngIf con else -->
<div *ngIf="user; else noUser">
  Benvenuto, {{ user.name }}
</div>
<ng-template #noUser>
  <p>Effettua il login</p>
</ng-template>

<!-- *ngFor con trackBy -->
<ul>
  <li *ngFor="let item of items; trackBy: trackById">
    {{ item.name }}
  </li>
</ul>

<!-- *ngSwitch -->
<div [ngSwitch]="status">
  <p *ngSwitchCase="'active'">Attivo</p>
  <p *ngSwitchCase="'inactive'">Inattivo</p>
  <p *ngSwitchDefault>Sconosciuto</p>
</div>
    

<!-- @if con @else -->
@if (user) {
  <div>Benvenuto, {{ user.name }}</div>
} @else {
  <p>Effettua il login</p>
}

<!-- @for con track -->
<ul>
  @for (item of items; track item.id) {
    <li>{{ item.name }}</li>
  } @empty {
    <li>Nessun elemento</li>
  }
</ul>

<!-- @switch -->
@switch (status) {
  @case ('active') { <p>Attivo</p> }
  @case ('inactive') { <p>Inattivo</p> }
  @default { <p>Sconosciuto</p> }
}
    

// PRIMA (Angular 17) - decoratori classici
@Component({ selector: 'app-user-card' })
export class UserCardComponent {
  @Input() name: string = '';
  @Input() age: number = 0;
  @Output() selected = new EventEmitter<string>();

  onClick(): void {
    this.selected.emit(this.name);
  }
}

// DOPO (Angular 18) - signal inputs/outputs
import { input, output } from '@angular/core';

@Component({ selector: 'app-user-card' })
export class UserCardComponent {
  name = input<string>('');
  age = input<number>(0);
  selected = output<string>();

  onClick(): void {
    this.selected.emit(this.name());
  }
}
    

# Aggiorna Angular CLI e Core
ng update @angular/core@19 @angular/cli@19

# Se usi Angular Material
ng update @angular/material@19

# Verifica e correggi i warning di deprecazione
ng build 2>&1 | grep -i "deprecated"
    

// PRIMA (Angular 18) - standalone esplicito
@Component({
  standalone: true,      // Richiesto esplicitamente
  selector: 'app-header',
  imports: [RouterLink, NgOptimizedImage],
  templateUrl: './header.component.html',
})
export class HeaderComponent {}

// DOPO (Angular 19) - standalone per default
@Component({
  // standalone: true è implicito, rimosso dalla schematica
  selector: 'app-header',
  imports: [RouterLink, NgOptimizedImage],
  templateUrl: './header.component.html',
})
export class HeaderComponent {}
    

import { signal, linkedSignal, resource } from '@angular/core';

@Component({ selector: 'app-product-list' })
export class ProductListComponent {
  // linkedSignal: signal derivato con possibilità di override
  selectedCategory = signal('electronics');
  currentPage = linkedSignal(() => {
    // Resetta a pagina 1 quando cambia la categoria
    this.selectedCategory();
    return 1;
  });

  // resource API: caricamento dati asincrono reattivo
  products = resource({
    request: () => ({
      category: this.selectedCategory(),
      page: this.currentPage()
    }),
    loader: async ({ request }) => {
      const response = await fetch(
        `/api/products?cat=${request.category}&page=${request.page}`
      );
      return response.json();
    }
  });

  changePage(page: number): void {
    this.currentPage.set(page);
  }
}
    

# Aggiorna Angular CLI e Core
ng update @angular/core@20 @angular/cli@20

# Se usi Angular Material
ng update @angular/material@20

# Dopo l'aggiornamento, avvia il server di sviluppo
ng serve
    

// app.config.ts - Abilitare zoneless
import { ApplicationConfig, provideZonelessChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideClientHydration } from '@angular/platform-browser';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    // Sostituisce provideZoneChangeDetection()
    provideZonelessChangeDetection(),
    provideRouter(routes),
    provideClientHydration(),
  ]
};
    

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

# 2. Rimuovi il polyfill da angular.json
# Cerca e rimuovi "zone.js" dall'array "polyfills"

# 3. Verifica che non ci siano import diretti
grep -r "zone.js" src/
    

# Aggiorna Angular CLI e Core
ng update @angular/core@21 @angular/cli@21

# Se usi Angular Material
ng update @angular/material@21

# Aggiorna TypeScript a 5.9
npm install typescript@5.9 --save-dev

# Verifica la build
ng build
    

// 1. Miglioramenti al type narrowing nei template
// TypeScript 5.9 migliora il supporto per il narrowing
// nei blocchi @if dei template Angular

// 2. Import attributes stabili
import data from './config.json' with { type: 'json' };

// 3. Miglioramento delle performance del compiler
// Build più veloci grazie al caching migliorato
// e alla riduzione delle allocazioni di memoria

// 4. Utility types migliorati per i Signals
import { Signal, WritableSignal } from '@angular/core';

// NoInfer<T> previene inferenza indesiderata
function createState<T>(
  initial: T,
  validator: (value: NoInfer<T>) => boolean
): WritableSignal<T> {
  const state = signal(initial);
  // ...logica di validazione
  return state;
}
    

#!/bin/bash
# Script di migrazione Angular 17 -> 21

echo "=== STEP 1: Angular 17 -> 18 ==="
ng update @angular/core@18 @angular/cli@18
npm install
ng build
npm test -- --watch=false
git add -A && git commit -m "chore: migrate to Angular 18"

echo "=== STEP 2: Angular 18 -> 19 ==="
ng update @angular/core@19 @angular/cli@19
npm install
ng build
npm test -- --watch=false
git add -A && git commit -m "chore: migrate to Angular 19"

echo "=== STEP 3: Angular 19 -> 20 ==="
ng update @angular/core@20 @angular/cli@20
npm install
ng build
npm test -- --watch=false
git add -A && git commit -m "chore: migrate to Angular 20"

echo "=== STEP 4: Angular 20 -> 21 ==="
ng update @angular/core@21 @angular/cli@21
npm install
ng build
npm test -- --watch=false
git add -A && git commit -m "chore: migrate to Angular 21"

echo "=== Migrazione completata! ==="
ng version
    

# Se ng update fallisce per peer dependencies
# Strategia 1: Forza l'aggiornamento
ng update @angular/core@21 @angular/cli@21 --force

# Strategia 2: Aggiorna manualmente le dipendenze in conflitto
npm install @angular/core@21 @angular/cli@21 --legacy-peer-deps
npm install

# Strategia 3: Usa --allow-dirty se hai modifiche non committate
ng update @angular/core@21 --allow-dirty

# Strategia 4: Pulisci e reinstalla da zero
rm -rf node_modules package-lock.json
npm install

# Verifica lo stato delle dipendenze
npm ls @angular/core
    

# 1. Lista tutte le dipendenze Angular-related
npm ls | grep angular

# 2. Controlla le versioni disponibili
npm view @angular/material versions --json | tail -20
npm view @ngrx/store versions --json | tail -20

# 3. Aggiorna le dipendenze principali
ng update @angular/material@21
ng update @ngrx/store@21

# 4. Per librerie senza ng update schematic
npm install ngx-translate@latest
npm install primeng@latest

# 5. Verifica compatibilità dopo l'aggiornamento
ng build
npm test -- --watch=false
    

# 1. Esegui tutti gli unit test
npm test -- --watch=false --browsers=ChromeHeadless

# 2. Esegui i test e2e (se presenti)
npm run e2e

# 3. Build di produzione (cattura errori AOT)
ng build --configuration=production

# 4. Avvia il server SSR e verifica manualmente
npm run serve:ssr:portfolio

# 5. Controlla che non ci siano warning di deprecazione
ng build 2>&1 | grep -i "warning\|deprecated"

# 6. Verifica le performance con Lighthouse
npx lighthouse http://localhost:4200 --output=json --output-path=./lighthouse-report.json
    

// PRIMA: TestBed con NgModule-style
beforeEach(async () => {
  await TestBed.configureTestingModule({
    declarations: [MyComponent],   // deprecato con standalone
    imports: [HttpClientTestingModule],
    providers: [MyService]
  }).compileComponents();
});

// DOPO: TestBed con standalone components
beforeEach(async () => {
  await TestBed.configureTestingModule({
    imports: [MyComponent],   // standalone component va in imports
    providers: [
      provideHttpClientTesting(),  // nuovo provider-based testing
      MyService
    ]
  }).compileComponents();
});

// PRIMA: fakeAsync con Zone.js
it('should load data', fakeAsync(() => {
  component.loadData();
  tick(1000);
  expect(component.data).toBeTruthy();
}));

// DOPO: async/await senza Zone.js
it('should load data', async () => {
  component.loadData();
  await fixture.whenStable();
  fixture.detectChanges();
  expect(component.data()).toBeTruthy();  // signal()
});