Angular 17에서 Angular 21로 마이그레이션: 실용 가이드
네 가지 주요 버전에 걸쳐 Angular 애플리케이션을 마이그레이션하는 것은 엄청난 일처럼 보일 수 있습니다. 하지만 Angular 팀은 막대한 투자를 했습니다. 이전 버전과의 호환성 그리고 자동 마이그레이션 도구. 17부터 21까지의 모든 버전에는 개선 사항이 도입되었습니다. 중요: 현대적인 제어 흐름에서 안정적인 신호까지, 영역 없는 변경 감지부터 TypeScript 5.9 지원.
이 시리즈의 열 번째이자 마지막 기사에서 현대적인 각도 우리는 직면하게 될 것이다 Angular 17부터 버전 21까지의 모든 단계를 다루는 단계별 마이그레이션입니다. 종속성을 업데이트하는 것이 중요합니다. 각 릴리스에는 새로운 API, 지원 중단 및 프레임워크를 최대한 활용하기 위해 이해하는 데 필수적인 모범 사례입니다.
이 기사에서 배울 내용
- Angular 18, 19, 20, 21의 새로운 기능에 대한 로드맵
- 마이그레이션을 시작하기 전에 프로젝트를 준비하는 방법
- 버전별 점프별 단계별 절차 (17→18→19→20→21)
- 명령
ng update주요 변경 사항 관리 - 타사 종속성 업데이트(Angular Material, NgRx 등)
- 각 마이그레이션 단계 후에 테스트하는 방법
- 마이그레이션 검증을 위한 전체 체크리스트
최신 Angular 시리즈 개요
| # | Articolo | 집중하다 |
|---|---|---|
| 1 | 각도 신호 | 세분화된 응답성 |
| 2 | 영역 없는 변경 감지 | Zone.js 삭제 |
| 3 | 새로운 템플릿 @if, @for, @defer | 현대적인 제어 흐름 |
| 4 | 독립형 구성 요소 | NgModule이 없는 아키텍처 |
| 5 | 신호 형태 | 신호가 포함된 반응형 양식 |
| 6 | SSR 및 증분 수화 | 서버 측 렌더링 |
| 7 | Angular의 핵심 웹 바이탈 | 성능 및 지표 |
| 8 | 각도 PWA | 프로그레시브 웹 앱 |
| 9 | 고급 종속성 주입 | DI 트리 셰이크 가능 |
| 10 | 현재 위치 → Angular 17에서 21로 마이그레이션 | 마이그레이션 가이드 |
1. 버전 개요: Angular 17~21
마이그레이션을 진행하기 전에 도입된 주요 변경 사항을 이해하는 것이 중요합니다. 각 버전. Angular는 반기별 릴리스를 따릅니다. 각 주요 버전은 새로운 기능을 제공합니다. 실험적 API의 안정화 및 간헐적인 주요 변경 사항.
출시 일정 및 주요 뉴스
| 버전 | 풀어 주다 | 타입스크립트 | 주요뉴스 |
|---|---|---|---|
| 각도 17 | 2023년 11월 | 5.2 - 5.3 | 제어 흐름(@if, @for, @switch), @defer, 신호 개발자 미리 보기, 새 브랜딩 |
| 각도 18 | 2024년 5월 | 5.4 - 5.5 | 영역 없는 개발자 미리보기, 안정적인 신호 입력/출력, 안정적인 연기 가능한 보기 |
| 각도 19 | 2024년 11월 | 5.6 - 5.7 | 독립형 기본값, 증분 하이드레이션, linkedSignal, 리소스 API |
| 각도 20 | 2025년 5월 | 5.8 | 안정적인 zoneless, 신호 형태 미리보기, 향상된 효과(), 저작 형식 |
| 각도 21 | 2025년 11월 | 5.9 | 새 프로젝트의 영역 없는 기본값, TypeScript 5.9, 성능 런타임 |
보시다시피, 마지막 네 버전의 공통 스레드는 분명합니다. 중앙 반응 프리미티브로서의 신호, Zone.js 삭제 e 아키텍처의 단순화 독립형 구성 요소를 통해. 모든 마이그레이션 이전 항목을 기반으로 구축됩니다.
2. 이주 준비
성공적인 마이그레이션은 첫 번째 마이그레이션보다 오래 전에 시작됩니다. ng update. 단계
예상치 못한 문제를 방지하고 가동 중지 시간을 줄이려면 준비가 중요합니다. 다음은
기본적인 단계.
호환성 검증
우선, 프로젝트의 현재 버전과 설치된 종속성을 확인하세요. 매 Angular 버전에는 최소 버전의 Node.js 및 TypeScript가 필요합니다.
버전별 시스템 요구 사항
| 모난 | Node.js 최소 | Node.js 권장 | 타입스크립트 | RxJS |
|---|---|---|---|---|
| 17.x | 18.13 | 20.x | 5.2 - 5.3 | 7.x |
| 18.x | 18.19 | 20.x / 22.x | 5.4 - 5.5 | 7.x |
| 19.x | 18.19 | 22.x | 5.6 - 5.7 | 7.x |
| 20.x | 20.x | 22.x | 5.8 | 7.x |
| 21.x | 20.x | 22.x | 5.9 | 7.x |
마이그레이션 전 체크리스트
# 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
각도 마이그레이션의 황금률
버전을 건너뛰지 마세요. Angular는 하나의 주요 마이그레이션만 지원합니다. 버전을 한번에. Angular 17을 사용하고 있다면 18단계, 19단계, 20단계, 마지막으로 21단계를 거쳐야 합니다. 각 단계에는 코드를 업데이트하는 자동 회로도가 포함되어 있으며 이는 다음과 같습니다. 연속 릴리스 사이에서만 작동하도록 설계되었습니다.
3. Angular 17 → 18: 제어 흐름 및 신호 입력
첫 번째 도약은 코드 리팩토링 측면에서 가장 중요한 경우가 많습니다. 각도 18 안정시켰다 현대적인 제어 흐름 (@if, @for, @switch) 도입 Angular 17의 개발자 미리보기로 신호 입력 그들 신호 출력 안정성에.
업데이트 명령
# 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
자동 제어 흐름 마이그레이션
Angular 18에는 구조 지시문을 자동으로 변환하는 회로도가 포함되어 있습니다.
(*ngIf, *ngFor, *ngSwitch) 새로운 구문에서
블록으로.
# 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());
}
}
Angular 18의 주요 기능
- 안정적인 제어 흐름: @if, @for, @switch 및 @defer는 완전히 안정적입니다.
- 신호 입력/출력: 아피스
input()eoutput()안정적인 - 영역 없는 개발자 미리보기: Zone.js가 없는 애플리케이션에 대한 첫 번째 지원
- ng-content의 대체 콘텐츠: 프로젝션의 기본 콘텐츠
- 기능을 사용한 경로 리디렉션: 논리 기반 동적 리디렉션
- Firebase 앱 호스팅: Angular에 최적화된 새로운 호스팅 서비스
4. Angular 18 → 19: 독립형 기본값 및 수화
Angular 19는 주요 아키텍처 변경을 나타냅니다. 독립형 구성 요소
기본값이 되다. 깃발 standalone: true 더 이상 필요하지 않기 때문에
모든 구성요소는 기본적으로 독립형입니다. 더욱이,점진적인 수분공급
안정성을 달성하고 다음과 같은 새로운 반응성 프리미티브를 제공합니다. linkedSignal 그리고
resource API 그들이 모습을 드러냅니다.
업데이트 명령
# 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"
기본적으로 독립형
Angular 19 회로도가 자동으로 제거됩니다. standalone: true 모두로부터
기본 동작이 됩니다. 구성 요소가 독립형이 아닌 경우 다음을 수행해야 합니다.
이제 명시적으로 선언하세요 standalone: false.
// 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 {}
linkedSignal 및 리소스 API
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);
}
}
Angular 19의 주요 기능
- 독립형 기본값: 모든 구성요소는 기본적으로 독립형입니다.
- 안정적인 증분 수화: 트리거 기반 점진적 수분 공급(뷰포트, 호버, 타이머)
- 연결된 신호: 덮어쓸 수 있는 값으로 파생된 신호(개발자 미리보기)
- API 리소스: 신호와 통합된 비동기 로딩
- 엄격한 독립 실행형 시행: 가져오기 누락으로 인한 컴파일 오류
- SSR 개선: 수화 중 상호작용을 위한 이벤트 재생
5. Angular 19 → 20: 영역 없는 안정 및 신호 형태
Angular 20은 역사적인 이정표를 세웠습니다. 존리스 변화 감지가 안정됨. 약 2년간의 개발자 프리뷰 이후 Angular 애플리케이션이 공식적으로 출시될 수 있습니다. 완전한 안정성을 보장하는 Zone.js. 더욱이, 신호 형태 그들은 그들의 일을 한다 개발자 프리뷰로 등장하여 완전히 기반으로 양식을 관리하는 새로운 방법을 제안했습니다. 신호에.
업데이트 명령
# 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
영역 없는 변경 감지 채택
Angular 20을 사용하면 Zone.js를 안전하게 제거할 수 있습니다. 회로도에서는 이 작업을 자동으로 수행하지 않습니다. 파손을 방지하려면 아직 구역 없는 채택을 채택하지 않았다면 지금이 적절한 시기입니다.
// 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/
경고: 코드가 Zoneless와 호환되지 않음
일부 일반적인 패턴은 Zone.js가 없으면 작동하지 않습니다. 비동기 API의 원숭이 패치. 코드에서 다음 패턴을 찾아 수정하세요.
- 나중에 구성요소 속성을 직접 변경합니다.
setTimeoutosetInterval: 미국signal()그 자리에 - 사용
Promise.then()UI 상태를 업데이트하려면 다음으로 변환하세요.resource()또는 사용signal.set() - Angular 외부에서 상태를 변경하는 타사 라이브러리: 사용
inject(ChangeDetectorRef)임시 해결 방법으로 - 테스트
fakeAsync/tick:로 대체await fixture.whenStable()
Angular 20의 주요 기능
- 안정적인 영역 없는 변경 감지:
provideZonelessChangeDetection()완전히 안정됨 - 신호 형식(개발자 미리보기): 새로운 신호 기반 양식 API
- 향상된 효과(): 선택적 동기 실행, 더 나은 수명주기 통합
- 안정적인 linkedSignal: 이제 재정의를 통해 파생된 신호가 완전히 안정되었습니다.
- 실험적인 저작 형식: 구성요소 정의를 위한 새로운 형식(.ng 파일)
- 더 이상 사용되지 않는 API 제거: Angular 16-17에서 더 이상 사용되지 않는 것으로 표시된 API 정리
6. Angular 20 → 21: TypeScript 5.9 및 기본적으로 Zoneless
Angular 21은 이전 버전의 모든 작업을 통합한 버전입니다. 새로운 것들
다음으로 생성된 프로젝트 ng new 그래요 기본적으로 구역 없음, 타입스크립트
5.9에서는 유형 검사, 개발자 경험 및 성능이 향상되었습니다.
런타임이 추가로 최적화됩니다.
업데이트 명령
# 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
TypeScript 5.9: Angular 관련 뉴스
// 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;
}
Angular 21의 주요 기능
- 기본적으로 구역 없음:
ng newZone.js 없이 프로젝트 생성 - 타입스크립트 5.9: 유형 검사 개선으로 완벽한 지원
- 런타임 성능: 감지 및 렌더링 변경을 위한 최적화
- 향상된 신호 형태: 더욱 성숙하고 완전한 API
- 안정적인 API 리소스: 완전히 안정적인 비동기 데이터 로딩
- NgModule 기반 코드 제거: 양식 기반 API의 추가 지원 중단
7. 단계별 업데이트: 전체 절차
이제 관리를 포함하여 버전 17에서 21로 마이그레이션하는 전체 절차를 살펴보겠습니다. 종속성에서 주요 변경 사항과 충돌이 발생합니다. 각 단계를 완료해야 하며 다음으로 진행하기 전에 확인하세요.
#!/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
주요 변경 사항 관리
언제 ng update 주요 변경 사항이 발생하면 프로세스가 중지됩니다.
오류 메시지. 가장 일반적인 문제를 해결하기 위한 전략은 다음과 같습니다.
획기적인 변화 지방자치단체 및 솔루션
| 버전 | 획기적인 변화 | 해결책 |
|---|---|---|
| 17→18 | 제거 ViewEngine 잔여 API |
Ivy와 동등한 제품으로 교체 |
| 18→19 | standalone: true 기본값이 됨 |
추가하다 standalone: false 비독립형 구성요소에 |
| 18→19 | 제거 @angular/http 유산 |
미국 @angular/common/http |
| 19→20 | 일부 내부 서비스에 대한 관찰 가능 기반 패턴 지원 중단 | 신호 기반 등가물로 마이그레이션 |
| 20→21 | TypeScript 5.9 필요 | TypeScript 업데이트 및 유형 오류 수정 |
| 20→21 | v17에서 더 이상 사용되지 않는 API 제거 | Angular 지원 중단 가이드를 참조하세요. |
피어 종속성 충돌 해결
# 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
8. 제3자 종속성 마이그레이션
타사 종속성은 종종 주요 병목 현상이 됩니다. 마이그레이션. 모든 라이브러리가 Angular의 새 버전을 즉시 지원하는 것은 아닙니다. 일부는 상당한 업데이트가 필요합니다. 다음은 가장 일반적인 라이브러리에 대한 안내입니다.
주요 라이브러리의 호환성 매트릭스
| 책장 | 각도 18 | 각도 19 | 각도 20 | 각도 21 |
|---|---|---|---|---|
| @각도/재료 | 18.x | 19.x | 20.x | 21.x |
| @ngrx/스토어 | 18.x | 19.x | 20.x | 21.x |
| @각도/불 | 18.x | 19.x | 18.x+ | 19.x+ |
| ng-부트스트랩 | 16.x | 17.x | 18.x | 19.x |
| ngx-번역 | 15.x | 16.x | 16.x+ | 16.x+ |
| 애벌칠 | 17.x | 18.x | 19.x | 19.x+ |
| @ng-아이콘 | 27.x | 28.x | 29.x | 30.x+ |
중독 전략
# 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
아직 업데이트되지 않은 종속성
타사 라이브러리가 아직 대상 버전의 Angular를 지원하지 않는 경우 다음이 있습니다. 옵션:
- 기다리다: 라이브러리 릴리스를 추적하고 해당 종속성의 마이그레이션을 연기합니다.
- 임시 포크: 필요한 경우 최소한의 변경만으로 포크합니다.
- --레거시-피어-뎁스: 어쨌든 라이브러리가 작동하면 충돌을 무시하십시오(테스트로 확인).
- 바꾸다: 호환 가능한 대안을 평가합니다. 예를 들어,
ngx-translateAngular의 기본 i18n에 - 기여하다: 새 버전에 대한 지원을 추가하려면 라이브러리에서 PR을 엽니다.
9. 마이그레이션 후 테스트
각 마이그레이션 단계 후에는 애플리케이션이 작동하는지 확인하는 것이 중요합니다. 올바르게. 자동화된 테스트는 안전망이지만 마이그레이션 자체는 기존 테스트를 중단합니다. 이 단계를 처리하는 방법은 다음과 같습니다.
테스트 스위트 실행
# 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()
});
마이그레이션 후 자주 발생하는 테스트 오류
| 실수 | 원인 | 해결책 |
|---|---|---|
NullInjectorError: No provider for HttpClient |
HttpClientTestingModule이 더 이상 사용되지 않음 | 미국 provideHttpClientTesting() |
Component is not a known element |
독립형 구성요소를 가져오지 않음 | 구성요소 추가 imports 테스트베드에서 |
Cannot read property of signal |
함수로 호출되지 않은 신호 | 변화 component.value in component.value() |
fakeAsync timer not cleared |
Zone.js가 제거되었습니다. | 다음으로 변환 async/await |
Expression has changed |
영역 없는 변경 감지 | 미국 fixture.detectChanges() 각 변경 후 |
10. 최종 마이그레이션 체크리스트
마이그레이션이 완료되었고 잊어버린 것이 없는지 확인하려면 다음을 따르십시오. 마이그레이션 전, 마이그레이션 중, 세 단계로 구분된 세부 체크리스트 마이그레이션 후.
1단계: 마이그레이션 전
- 저장소 정리: 커밋되지 않은 변경 사항 없음
- 생성된 전용 브랜치:
feat/angular-21-migration - 친환경 테스트 모음: 현재 버전에서 모든 테스트를 통과합니다.
- 작업 중인 프로덕션 빌드:
ng build오류 없이 완료됨 - Node.js가 필요한 최소 수준으로 업데이트되었습니다(Angular 20/21의 경우 20.x).
- 백업
package.jsonepackage-lock.json - 타사 종속성 및 해당 버전에 대한 문서
- 각 대상 버전에 대한 주요 변경 사항 검토
update.angular.io
2단계: 마이그레이션 중
- 한 번에 하나의 버전 마이그레이션: 17→18→19→20→21
- 각 단계에 대해 다음을 수행합니다.
ng update,npm install,ng build,npm test - 마이그레이션이 성공할 때마다 커밋
- 자동 마이그레이션 회로도 수행(제어 흐름, 독립 실행형 등)
- 다음 단계로 진행하기 전에 지원 중단 경고를 해결하세요.
- Angular Material 및 기타 Angular 종속성을 동일한 주요 버전으로 업그레이드
- AOT 컴파일을 확인합니다.
ng build --configuration=production - 브라우저 콘솔에서 런타임 오류를 확인하세요.
3단계: 마이그레이션 후
- 모든 테스트(단위 + e2e) 통과
- 오류나 경고 없이 프로덕션 빌드가 완료되었습니다.
- 작동 중인 SSR: 다음으로 확인하세요.
npm run serve:ssr - 검증된 성능: 모든 카테고리에서 Lighthouse 점수 ≥ 90
- 빌드 로그에 지원 중단 경고 없음
- 타사 종속성이 모두 호환되고 최신 상태입니다.
- 영역 없는 변경 감지 채택(권장)
- 구조적 지시문 대신 최신 제어 흐름(@if, @for)
- @Input/@Output 데코레이터 대신 신호 입력/출력
- 새로운 API에 대한 테스트 업데이트(HttpClientTesting 제공 등)
package-lock.json헌신적이고 깨끗하다- 프로덕션 전 수동 테스트를 위해 스테이징 환경에 배포
시리즈 요약 및 결론
Angular 17에서 21로 마이그레이션하는 것은 단순한 버전 업그레이드가 아니라 진화입니다. 애플리케이션의 전체 아키텍처를 살펴봅니다. 다음을 기반으로 이전 모델에서 전환합니다. Zone.js 및 NgModules는 새로운 신호 우선 및 기본 독립 실행형 패러다임을 나타냅니다. 성능, 유지 관리성 및 개발자 경험 측면에서 상당한 개선이 이루어졌습니다.
성공의 열쇠는 점진성: 한 번에 하나의 버전을 마이그레이션합니다. 각 단계에서 테스트하고, 새로운 API를 점진적으로 채택하세요. 각도가 디자인되었습니다. 자동 회로도 덕분에 이 프로세스를 최대한 쉽게 만들 수 있습니다. 이전 버전과의 호환성이 뛰어납니다.
이 기사의 주요 개념
- 점진적 마이그레이션: 항상 한 번에 하나의 주요 버전(17→18→19→20→21)
- 업데이트: 종속성을 업데이트하고 자동 회로도를 적용하는 주요 도구
- 최신 제어 흐름: @if, @for, @switch는 *ngIf, *ngFor, *ngSwitch를 대체합니다.
- 신호 입력/출력:
input()eoutput()@Input 및 @Output 교체 - 독립형 기본값: Angular 19부터 모든 구성요소는 기본적으로 독립형입니다.
- 안정적인 존리스: Angular 20에서는 Zone.js를 안전하게 삭제할 수 있습니다
- 타입스크립트 5.9: Angular 21에는 새로운 기능을 위해 TypeScript 5.9가 필요합니다.
- 테스트: NgModule 스타일에서 독립형으로, fakeAsync에서 async/await로 테스트를 업그레이드하세요.
- 종속성: Angular Material, NgRx 및 타사 라이브러리를 동일한 주요로 업데이트
Modern Angular 시리즈의 전체 요약
| # | Articolo | 주요 컨셉 |
|---|---|---|
| 1 | 각도 신호 | signal(), Computed(), effect()를 통한 세분화된 응답성 |
| 2 | 영역 없는 변경 감지 | 성능 향상을 위해 Zone.js 삭제 |
| 3 | 템플릿 @if, @for, @defer | 최신 제어 흐름 및 선언적 지연 로딩 |
| 4 | 독립형 구성 요소 | NgModule이 없는 아키텍처, 트리 셰이크 가능 |
| 5 | 신호 형태 | 신호 기반의 반응형 양식 |
| 6 | SSR 및 증분 수화 | 점진적인 수화를 통한 서버 측 렌더링 |
| 7 | 핵심 웹 바이탈 | Google 순위를 위한 LCP, INP, CLS 최적화 |
| 8 | 각도 PWA | 서비스 워커가 포함된 프로그레시브 웹 앱 |
| 9 | 고급 종속성 주입 | DI 트리 셰이크 가능, 토큰 주입, 다중 제공자 |
| 10 | Angular 17에서 21로 마이그레이션 | 완전한 단계별 마이그레이션 가이드 |
이 기사로 시리즈를 마무리합니다 현대적인 각도. 우리는 모두를 보호했습니다 반응성 프리미티브(신호)부터 관리에 이르기까지 프레임워크의 기본 측면 상태(신호 형태), 렌더링 전략(SSR, 수화)부터 최적화까지 성능(Core Web Vitals, PWA), 아키텍처(독립형, 고급 DI)부터 마이그레이션까지 연습. 이 시리즈가 Angular를 마스터하는 데 도움이 되기를 바랍니다. 보다 현대적이고 고성능의 화신.