À medida que novas versões do Angular são lançadas, o Order Hub é frequentemente atualizado para a versão mais recente. Essas alterações trazem melhorias, como instalações, início e tempos de compilação mais rápidos. Se estiver usando versões anteriores do Angular, para aproveitar os novos recursos, você deverá migrar seus aplicativos personalizados para a versão mais recente do Angular. Esses novos aplicativos podem ser armazenados em um monorepo ou em um repositório Angular padrão.
Sobre esta tarefa
Para garantir que suas personalizações funcionem corretamente, você precisa atualizá-las como um processo sequencial (atualize para v16, v17, v18 e, em seguida, v20 ) em etapas. Para cada atualização de versão do Angular, remova pacotes como @angular/material ou @angular/cdk do comando se eles não fizerem parte do package.json , mas incluírem dependências que precisam fazer parte da atualização.
As etapas de migração podem variar se o projeto não for um projeto Lerna. Nesse caso, atualize as versões do Angular primeiro e, em seguida, atualize o material e outras dependências.
- Atualizações de dependência do ambiente
- Node.js atualização: Angular v20 requer a atualização do Node.js para a versão 24.
- Atualização do ESLint: Atualize a dependência
"eslint-plugin-jsdoc" para a versão "^62.0.0".
- Requisitos de recursos
- Autônomo (obrigatório): você deve declarar esse recurso no nível do componente para que ele funcione corretamente. Certifique-se de que os componentes relevantes sejam atualizados adequadamente.
- Bloco de fluxo de controle (opcional): para melhorar a funcionalidade e a flexibilidade, você pode usar a sintaxe do bloco de fluxo de controle em vez de ngIf.
Procedimento
- Atualize para o Angular v16 da seguinte forma.
Devido às dependências de pares e à incompatibilidade do pacote de componentes comuns, a atualização para o Angular v16 é forçada.
- Para um projeto Angular autônomo
- Digite os comandos a seguir.
yarn ng update @angular/core@16 @angular/cli@16 --force
yarn ng update @angular/cdk@16 @angular-eslint/schematics@16 @angular/material@16 --force
Observação: não inclua o site @angular-builders/custom-webpack@16 no upgrade para projetos autônomos. O comando é dividido em dois comandos.
- Para um monorepresentante
- Insira o comando a seguir.
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
Verifique suas atualizações com o
guia de atualização do Angular.
- Atualize para o Angular v17 da seguinte forma.
Se o pacote
@angular-devkit/build-ng-packagr existir em seu arquivo
package.json , desinstale-o.
- Para um projeto Angular autônomo
- Digite os comandos a seguir.
yarn ng update @angular/core@17 @angular/cli@17 --force
yarn ng update @angular/cdk@17 @angular-eslint/schematics@17 @angular/material@17 --force
- Para um monorepresentante
- Insira o comando a seguir.
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
Verifique suas atualizações com o
guia de atualização do Angular.
- Atualize para o Angular v18 da seguinte forma.
- Para um projeto Angular autônomo
- Digite os comandos a seguir.
yarn ng update @angular/core@18 @angular/cli@18 --force
yarn ng @angular/cdk@18 @angular-eslint/schematics@18 @angular/material@18 --force
- Para um monorepresentante
- Insira o comando a seguir.
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
Observação: Ao executar esse comando, você verá um prompt de migração para usar o construtor de aplicativos (use-application-builder). Se você estiver atualizando um morepo, clique em Enter para continuar. Não utilize os @angular-devkit/build-angular:browser construtores @angular-devkit/build-angular:browser-esbuild ou.
Verifique suas atualizações com o
guia de atualização do Angular.
- Atualize o Angular v19 da seguinte forma.
- Para um projeto Angular autônomo
- Digite os comandos a seguir.
yarn ng update @angular/core@19 @angular/cli@19 --force
yarn ng @angular/cdk@19 @angular-eslint/schematics@1 @angular/material@19 --force
- Para um monorepresentante
- Insira o comando a seguir.
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
Observação: Ao executar esse comando, você verá um prompt de migração para usar o construtor de aplicativos (use-application-builder). Se você estiver atualizando um morepo, clique em Enter para continuar. Não utilize os @angular-devkit/build-angular:browser construtores @angular-devkit/build-angular:browser-esbuild ou.
Verifique suas atualizações com o
guia de atualização do Angular.
- Atualize o Angular v20 da seguinte forma.
- Para um projeto Angular autônomo
- Digite os comandos a seguir.
yarn ng update @angular/core@20 @angular/cli@20 --force
yarn ng @angular/cdk@20 @angular-eslint/schematics@20 @angular/material@20 --force
- Para um monorepresentante
- Insira o comando a seguir.
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
Observação: Ao executar esse comando, você verá um prompt de migração para usar o construtor de aplicativos (use-application-builder). Se você estiver atualizando um morepo, clique em Enter para continuar. Não utilize os @angular-devkit/build-angular:browser construtores @angular-devkit/build-angular:browser-esbuild ou.
Verifique suas atualizações com o
guia de atualização do Angular.
O que fazer depois
Depois de concluir a atualização para a versão mais recente do Angular, faça o seguinte.
- Certifique-se de aplicar o lint nos arquivos de módulo alterados. Se os esquemas não os removeram corretamente, remova manualmente HttpClientModule.
- Atualize seus arquivos .eslintrc.json . Remova duas das extensões de plug-in e adicione uma extensão de plug-in.
"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
],
Atualize as seguintes regras de 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"
Remova o seguinte parâmetro."jsdoc/newline-after-description": "error"
- Instale a dependência de @types/topojson-specification digitando o seguinte comando.
yarn add -D @types/topojson-specification ## (include `-W` for lerna monorepo)
- Para usar as versões mais recentes disponíveis, altere todos os pacotes do namespace @buc no arquivo package.json do seu projeto. Altere as versões para a mais recente de acordo com o que está no arquivo orderhub-code/lib .