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 in modo sequenziale (aggiornamento a v16, v17, v18 e poi v20 ) 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.
- Aggiornamenti relativi alla dipendenza dall'ambiente
- Node.js Aggiornamento: Angular v20 richiede l'aggiornamento di Node.js alla versione 24.
- Aggiornamento ESLint: aggiornare la dipendenza
"eslint-plugin-jsdoc" alla versione "^62.0.0".
- Requisiti funzionali
- Autonomo (obbligatorio): è necessario dichiarare questa funzione a livello di componente affinché funzioni correttamente. Assicurarsi che i componenti pertinenti siano aggiornati di conseguenza.
- Blocco di controllo del flusso (opzionale): per migliorare la funzionalità e la flessibilità, è possibile utilizzare la sintassi del blocco di controllo del flusso invece di ngIf.
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 stai aggiornando un morepo, clicca su Invio per procedere. Non utilizzare i @angular-devkit/build-angular:browser@angular-devkit/build-angular:browser-esbuild builder o.
Verifica gli aggiornamenti con la
guida agli aggiornamenti di Angular.
- Aggiorna Angular v19 come segue.
- Per un progetto indipendente Angular
- Immettere i seguenti comandi.
yarn ng update @angular/core@19 @angular/cli@19 --force
yarn ng @angular/cdk@19 @angular-eslint/schematics@1 @angular/material@19 --force
- Per un monorepo
- Immetti il seguente comando.
yarn ng update @angular/core@19 @angular/cli@19 @angular-builders/custom-webpack@19 @angular/cdk@19 @angular-eslint/schematics@19 @angular/material@19 --force
Nota : quando si esegue questo comando, viene visualizzato un prompt di migrazione per utilizzare l'application builder (use-application-builder). Se stai aggiornando un morepo, clicca su Invio per procedere. Non utilizzare i @angular-devkit/build-angular:browser@angular-devkit/build-angular:browser-esbuild builder o.
Verifica gli aggiornamenti con la
guida agli aggiornamenti di Angular.
- Aggiorna Angular v20 come segue.
- Per un progetto indipendente Angular
- Immettere i seguenti comandi.
yarn ng update @angular/core@20 @angular/cli@20 --force
yarn ng @angular/cdk@20 @angular-eslint/schematics@20 @angular/material@20 --force
- Per un monorepo
- Immetti il seguente comando.
yarn ng update @angular/core@20 @angular/cli@20 @angular-builders/custom-webpack@20 @angular/cdk@20 @angular-eslint/schematics@20 @angular/material@20 --force
Nota : quando si esegue questo comando, viene visualizzato un prompt di migrazione per utilizzare l'application builder (use-application-builder). Se stai aggiornando un morepo, clicca su Invio per procedere. Non utilizzare i @angular-devkit/build-angular:browser@angular-devkit/build-angular:browser-esbuild builder o.
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
],
Aggiorna le seguenti regole di lint."@angular-eslint/no-host-metadata-property": "off"
"@angular-eslint/prefer-standalone": "off"
"@angular-eslint/prefer-inject": "off"
"jsdoc/tag-lines": ["error", "any"
{ "startLines": 1 }]
"@angular-eslint/template/prefer-control-flow": "error"
Rimuovere il seguente parametro."jsdoc/newline-after-description": "error"
- 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 .