A medida que se lanzan nuevas versiones de Angular, Order Hub se actualiza a menudo a la última versión. Estos cambios aportan mejoras como instalaciones más rápidas y tiempos de inicio y construcción más cortos. Si está en versiones anteriores de Angular, para aprovechar las nuevas funciones, debe migrar sus aplicaciones personalizadas a la última versión de Angular. Estas nuevas aplicaciones se pueden almacenar en un repositorio monorepo o en un repositorio Angular estándar.
Acerca de esta tarea
Para asegurarse de que sus personalizaciones funcionen correctamente, debe actualizarlas como un proceso secuencial (actualice a v16, v17, v18 y, a continuación, v20 ) por etapas. Para cada actualización de la versión de Angular, elimine del comando paquetes como @angular/material o @angular/cdk si no forman parte del package.json , pero incluyen dependencias que deben formar parte de la actualización.
Los pasos de migración pueden variar si el proyecto no es un proyecto Lerna. En este caso, actualice primero las versiones de Angular y, a continuación, actualice el material y otras dependencias.
- Actualizaciones de dependencia del entorno
- Node.js Actualización: Angular v20 requiere actualizar Node.js a la versión 24.
- Actualización de ESLint: Actualiza la dependencia
"eslint-plugin-jsdoc" a la versión "^62.0.0".
- Requisitos de las funciones
- Autónomo (obligatorio): Debe declarar esta función a nivel de componente para que funcione correctamente. Asegúrese de que los componentes pertinentes se actualicen adecuadamente.
- Bloque de flujo de control (opcional): para mejorar la funcionalidad y la flexibilidad, puede utilizar la sintaxis del bloque de flujo de control en lugar de ngIf.
Procedimiento
- Actualización a Angular v16, de la siguiente manera.
Debido a las dependencias entre pares y a la incompatibilidad del paquete de componentes comunes, se fuerza la actualización a Angular v16.
- Para un proyecto independiente de Angular
- Especifique los mandatos siguientes.
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 : No incluya @angular-builders/custom-webpack@16 en la actualización para proyectos independientes. El comando se divide en dos comandos.
- Para un monorepo
- Introduzca el siguiente 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
Verifique sus actualizaciones con
la guía de actualización de Angular.
- Actualización a Angular v17, de la siguiente manera.
Si el paquete
@angular-devkit/build-ng-packagr existe en su archivo
package.json , desinstálelo.
- Para un proyecto independiente de Angular
- Especifique los mandatos siguientes.
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 un monorepo
- Introduzca el siguiente 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 tus actualizaciones con la
guía de actualización de Angular.
- Actualización a Angular v18, de la siguiente manera.
- Para un proyecto independiente de Angular
- Especifique los mandatos siguientes.
yarn ng update @angular/core@18 @angular/cli@18 --force
yarn ng @angular/cdk@18 @angular-eslint/schematics@18 @angular/material@18 --force
- Para un monorepo
- Introduzca el siguiente 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 : Cuando ejecute este comando, verá un mensaje de migración para utilizar el generador de aplicaciones (use-application-builder). Si está actualizando un morepo, haga clic en Intro para continuar. No utilices los @angular-devkit/build-angular:browser-esbuild constructores @angular-devkit/build-angular:browser ni.
Verifica tus actualizaciones con la
guía de actualización de Angular.
- Actualiza Angular v19 de la siguiente manera.
- Para un proyecto independiente de Angular
- Especifique los mandatos siguientes.
yarn ng update @angular/core@19 @angular/cli@19 --force
yarn ng @angular/cdk@19 @angular-eslint/schematics@1 @angular/material@19 --force
- Para un monorepo
- Introduzca el siguiente 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 : Cuando ejecute este comando, verá un mensaje de migración para utilizar el generador de aplicaciones (use-application-builder). Si está actualizando un morepo, haga clic en Intro para continuar. No utilices los @angular-devkit/build-angular:browser-esbuild constructores @angular-devkit/build-angular:browser ni.
Verifica tus actualizaciones con la
guía de actualización de Angular.
- Actualiza Angular v20 de la siguiente manera.
- Para un proyecto independiente de Angular
- Especifique los mandatos siguientes.
yarn ng update @angular/core@20 @angular/cli@20 --force
yarn ng @angular/cdk@20 @angular-eslint/schematics@20 @angular/material@20 --force
- Para un monorepo
- Introduzca el siguiente 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 : Cuando ejecute este comando, verá un mensaje de migración para utilizar el generador de aplicaciones (use-application-builder). Si está actualizando un morepo, haga clic en Intro para continuar. No utilices los @angular-devkit/build-angular:browser-esbuild constructores @angular-devkit/build-angular:browser ni.
Verifica tus actualizaciones con la
guía de actualización de Angular.
Qué hacer a continuación
Después de completar la actualización a la última versión de Angular, haga lo siguiente.
- Asegúrese de limpiar los archivos del módulo que haya cambiado. Si los esquemas no los eliminaron correctamente, elimine manualmente HttpClientModule.
- Actualice sus archivos de .eslintrc.json . Quite dos de las extensiones de plug-in y añada una extensión 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
],
Actualiza las siguientes reglas 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"
Elimine el siguiente parámetro."jsdoc/newline-after-description": "error"
- Instale la dependencia de @types/topojson-specification introduciendo el siguiente comando.
yarn add -D @types/topojson-specification ## (include `-W` for lerna monorepo)
- Para utilizar las últimas versiones disponibles, cambie todos los paquetes de espacio de nombres de @buc en el archivo package.json de su proyecto. Cambie las versiones a la más reciente de acuerdo con lo que se encuentra en el archivo orderhub-code/lib .