Aggiornamento delle personalizzazioni all'ultima versione di Angular

Man mano che vengono rilasciate nuove versioni di Angular, Order Hub viene spesso aggiornato all'ultima versione. Questi cambiamenti apportano miglioramenti quali tempi di installazione, avvio e costruzione più rapidi. Se si utilizzano versioni precedenti di Angular, per sfruttare le nuove funzionalità è necessario migrare le applicazioni personalizzate alla versione più recente di Angular. Queste nuove applicazioni possono essere memorizzate in un repository monorepo o in un repository Angular standard.

Informazioni su quest'attività

Per assicurarti che le tue personalizzazioni funzionino correttamente, devi aggiornarle come un processo in sequenza (aggiornamento a v16, v17 e poi v18 ) in più fasi. Per ogni aggiornamento della versione di Angular, rimuovi dal comando pacchetti come @angular/material o @angular/cdk se non fanno parte dell' package.json , ma includono dipendenze che devono far parte dell'aggiornamento.

I passaggi della migrazione possono variare se il progetto non è un progetto Lerna. In questo caso, aggiornare prima le versioni di Angular, poi aggiornare il materiale e le altre dipendenze.

Procedura

Aggiornamento ad Angular v16 come segue.
A causa delle dipendenze tra pari e dell'incompatibilità del pacchetto di componenti comuni, l'aggiornamento ad Angular v16 è obbligatorio.
Per un progetto indipendente Angular
Immettere i seguenti comandi.
```
yarn ng update @angular/core@16 @angular/cli@16 --force
yarn ng update @angular/cdk@16 @angular-eslint/schematics@16 @angular/material@16 --force
```
Nota : non includere @angular-builders/custom-webpack@16 nell'aggiornamento per i progetti indipendenti. Il comando è suddiviso in due comandi.
Per un monorepo
Immetti il seguente comando.
```
yarn ng update @angular/core@16 @angular/cli@16 @angular-builders/custom-webpack@16 @angular/cdk@16 @angular-eslint/schematics@16 @angular/material@16 --force
```
Verifica gli aggiornamenti con la guida agli aggiornamenti di Angular.
Aggiornamento ad Angular v17 come segue.
Se il pacchetto " @angular-devkit/build-ng-packagr " è presente nel file " package.json ", disinstallarlo.
Per un progetto indipendente Angular
Immettere i seguenti comandi.
```
yarn ng update @angular/core@17 @angular/cli@17 --force
yarn ng update @angular/cdk@17 @angular-eslint/schematics@17 @angular/material@17 --force
```
Per un monorepo
Immetti il seguente comando.
```
yarn ng update @angular/core@17 @angular/cli@17 @angular-builders/custom-webpack@17 @angular/cdk@17 @angular-eslint/schematics@17 @angular/material@17 --force
```
Verifica gli aggiornamenti con la guida agli aggiornamenti di Angular.
Aggiornamento ad Angular v18 come segue.
Per un progetto indipendente Angular
Immettere i seguenti comandi.
```
yarn ng update @angular/core@18 @angular/cli@18 --force
yarn ng @angular/cdk@18 @angular-eslint/schematics@18 @angular/material@18 --force
```
Per un monorepo
Immetti il seguente comando.
```
yarn ng update @angular/core@18 @angular/cli@18 @angular-builders/custom-webpack@18 @angular/cdk@18 @angular-eslint/schematics@18 @angular/material@18 --force
```
Nota : quando si esegue questo comando, viene visualizzato un prompt di migrazione per utilizzare l'application builder (use-application-builder). Se si sta aggiornando un morepo, fare clic su Invio per procedere. Non utilizzare l' @angular-devkit/build-angular:browser-esbuild , né i costruttori dell' @angular-devkit/build-angular:browser .
Verifica gli aggiornamenti con la guida agli aggiornamenti di Angular.

Cosa fare successivamente

Dopo aver completato l'aggiornamento all'ultima versione di Angular, procedere come segue.

Assicurati di eliminare i file del modulo modificato. Se gli schemi non li hanno rimossi correttamente, rimuovere manualmente HttpClientModule.

Aggiorna i tuoi file di configurazione dell' .eslintrc.json . Rimuovere due prolunghe innestabili e aggiungerne una.

"extends": [
  "plugin:@angular-eslint/ng-cli-compat",                      // - Remove
  "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",   // - Remove
  "plugin:@angular-eslint/recommended",                        // + Add
  "plugin:@angular-eslint/template/process-inline-templates"   // No Change
],

Installa la dipendenza di @types/topojson-specification inserendo il seguente comando.
```
yarn add -D @types/topojson-specification ## (include `-W` for lerna monorepo)
```
Per utilizzare le ultime versioni disponibili, modificare tutti i pacchetti dello spazio dei nomi di @buc nel file package.json del progetto. Cambiare le versioni con quelle più recenti in base a quanto contenuto nel file orderhub-code/lib .