Міграція з Angular 13 на Angular 19: Повний посібник

переклад

Поступова міграція проектів Angular з версії 13 на 19 є важливою для використання нових можливостей і забезпечення сумісності, при цьому забезпечуючи плавний перехід. Процес вимагає поетапного оновлення версій, перевірки функціональності після кожної міграції та впровадження сучасних практик Angular, таких як автономні API. Використання таких інструментів, як Nx Console, спрощує цей процес.

Основні відмінності між версіями Angular

Кожна версія Angular вводить нові функції та знецінює старі. Ось основні зміни:

1. Автономні API:

Angular 14 представив автономні компоненти, директиви та пайпи, що дозволяє позбутися жорсткої залежності від NgModules.

1. Сумісність з TypeScript:

Кожна версія Angular підтримує конкретні версії TypeScript. Переконайтесь, що ваш проект відповідає версії TypeScript, яка вимагається для версії Angular, до якої ви мігруєте.

1. Зміни в конфігурації проекту Nx:

Конфігурація nx.json зазнала змін, включаючи зміни в структурі робочих просторів і завданнях. Це впливає на те, як управляються бібліотеки та додатки в монорепо.

1. Оновлення залежностей:

Бібліотеки, такі як RxJS і Zone.js, вимагають оновлення версій для збереження сумісності.

Крок за кроком: Посібник з міграції

1. Поступове оновлення версій

Поступове оновлення допомагає керувати критичними змінами між версіями. Виконуйте наступні команди по черзі, перевіряючи, чи правильно працює ваш додаток після кожного кроку:

ng update @angular/core@14 @angular/cli@14  
ng update @angular/core@15 @angular/cli@15  
ng update @angular/core@16 @angular/cli@16  
ng update @angular/core@17 @angular/cli@17  
ng update @angular/core@18 @angular/cli@18  
ng update @angular/core@19 @angular/cli@19

• Перевірка між кроками: Після кожного кроку запускайте ваші тести (ng test), компілюйте проект (ng build) і перевіряйте додаток у вашому середовищі.

2. Використання Nx Console для міграції

Nx Console — потужний інструмент для керування проектами Angular в монорепо. Для спрощення міграцій:

1. Встановіть розширення Nx Console у вашій IDE.

2. Використовуйте його для запуску команд оновлення Angular.

3. Перевірте наявні бібліотеки та додатки, переконавшись, що вони оновлені та сумісні з новою версією Angular.

Міграція до автономних API

Автономні API спрощують розробку в Angular, усуваючи необхідність у NgModules у багатьох випадках.

Команди міграції

Виконуйте наступні команди по черзі:

1. Перетворіть компоненти, директиви та пайпи на автономні:

ng generate @angular/core:standalone --convertAll

1. Видаліть непотрібні класи NgModule:

ng generate @angular/core:standalone --removeNgModules

1. Ініціалізуйте проект, використовуючи автономні API:

ng generate @angular/core:standalone --bootstrap

Після міграції

1. Запустіть перевірки лінтингу та форматування:

ng lint

1. Виправте будь-які помилки або невідповідності.

2. Зафіксуйте результати в системі контролю версій.

Оновлення для TypeScript і компілятора Angular

Сумісність з TypeScript

Angular 19 вимагає TypeScript 5.2 або новішої версії. Оновіть ваш tsconfig.json:

{  
 "compilerOptions": {  
 "target": "es2022",  
 "module": "es2022",  
 "strict": true  
 },  
 "angularCompilerOptions": {  
 "strictInjectionParameters": true,  
 "strictTemplates": true,  
 "compilationMode": "partial"  
 }  
}

Зміни в компіляторі Angular

1. Переконайтесь, що режим часткової компіляції увімкнений у бібліотеках.

2.
переклад

Перевірте сумісність залежностей з новим компілятором.

Переваги автономних API

До міграції (Angular 13):

@NgModule({  
 declarations: [AppComponent],  
 imports: [BrowserModule, HttpClientModule],  
 bootstrap: [AppComponent],  
})  
export class AppModule {}

Після міграції (Angular 19):

import { bootstrapApplication } from '@angular/platform-browser';  
import { AppComponent } from './app.component';  

bootstrapApplication(AppComponent, {  
 providers: [HttpClientModule],  
});

• Спрощене завантаження: Зменшує кількість шаблонного коду та покращує підтримуваність.

• Покращена продуктивність: Швидший час завантаження завдяки меншій кількості рівнів абстракції.

• Краща модульність: Дозволяє окремо оголошувати компоненти та директиви як автономні.

Виклики та поради

Типові проблеми

• Помилки компілятора: Переконайтесь, що всі бібліотеки використовують сумісні версії Angular.

• Застарілі API: Замість застарілих API, таких як setSortModel, використовуйте сучасні еквіваленти (наприклад, applyColumnState).

• Великі монорепо: Використовуйте інструменти, такі як Nx Console, для виявлення впливових бібліотек та поступового оновлення залежностей.

Поради

• Тестування: Запускайте кінцеві тести після кожного кроку міграції.

• Резервне копіювання: Завжди фіксуйте свої зміни перед переходом до наступного кроку міграції.

• Документація: Ознайомтесь з посібниками з міграції Angular і Nx для змін, специфічних для версії.

Висновок

Міграція з Angular 13 на Angular 19 вимагає ретельного планування та виконання. Поступове оновлення, впровадження автономних API та інструменти, такі як Nx Console, роблять процес керованим. Використовуючи ці практики, ваш проект отримає переваги від останніх можливостей Angular, покращеної продуктивності та довгострокової підтримуваності.

Перекладено з: Migrating Angular 13 to Angular 19: A Comprehensive Guide