Registro completo de los pasos sobre cómo actualizar un proyecto Angular a Angular6
Prólogo
Hace algún tiempo, actualicé el proyecto Angular2 del que era responsable a la versión Angular5 y, en los últimos dos días, intenté actualizar a Angular6. En general, los dos procesos de actualización son relativamente similares y no demasiado complicados.
El 4 de mayo de 2018, se lanzó oficialmente la versión 6.0.0 de Angular. La nueva versión se centra principalmente en el marco subyacente y la cadena de herramientas, con el propósito de hacerlo más pequeño y más rápido.
Pequeños cambios en las funciones:
animaciones: solo se pueden usar WA-polyfill y AnimationBuilder
animaciones: expone elementos y parámetros en comparadores de transición
común: mejores mensajes de error al usar elementos que no son de plantilla en NgIf
común: funciones de exportación para formatear números, porcentajes, monedas y fechas
compilador: implementación de la opción de compilación "enableIvy"
core: Agregar nombre de enlace al error de cambio de contenido
0. Características del proyecto
Este proyecto tiene las siguientes características:
Tiene una larga historia, grandes proyectos y casi mil archivos de código fuente
Principalmente código comercial, rara vez usa funciones avanzadas de Angular (fácil de actualizar)
Use pug para escribir estructura html p> p>
Utilice Less para escribir estilos CSS
Utilice Express y podoc para generar documentos
Utilice @lzwme/simple-mock de desarrollo propio para implementar API simulada p>
Compilado con Fis3, algunas características de referencia de archivos de fis3 se utilizan profundamente en el código fuente del proyecto
Utilice webpack, karma y jasmine para configurar y ejecutar pruebas unitarias
Use styleLint, tsLint, husky y prettier para la ejecución Verificación de estilo de codificación y procesamiento de formato
Después de actualizar el proyecto, no se usó @angular/cli y se continuó usando fis3 como herramienta de compilación. Esto se debe a que muchos estilos de código establecidos desde hace mucho tiempo no pueden pasar la verificación tslint y ng build no se puede ejecutar en absoluto; en segundo lugar, parte de los procesos de escritura, construcción y lanzamiento del código del proyecto utilizan algunas características de fis3 y el costo de transformación es relativamente alto. Y después de la comparación, el proceso de compilación de @angular/cli no es mucho mejor que el de fis3.
La siguiente es una breve introducción al proceso y método de actualización.
1. Actualice las dependencias de package.json
Cambie la biblioteca de dependencias de Angular a la versión ^6.1.0 y preste atención a la actualización de la versión compatible de la biblioteca de componentes de Angular de la que depende el proyecto. en. Por ejemplo, las dependencias de nuestro proyecto tienen los siguientes cambios:
@ngx-translate/core debe actualizarse a la versión ^10.0.2
angular-tree-component debe ser; actualizado a la versión 7.x ;
@ngrx/store debe actualizarse a la versión ^6.1.0;
Nota: algunas API de bibliotecas de componentes también tendrán actualizaciones incompatibles y las Se debe mejorar la lógica del código relevante (una vez completada la actualización, se puede depurar y modificar de acuerdo con la documentación y las indicaciones de error).
Referencia de dependencia del proyecto actualizada:
{
"devDependencies": {
"@compodoc/compodoc": "^ 1.1. 5",
"@lzwme/simple-mock": "~0.0.8",
"@types/core-js": "^0.9.46",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@ tipos/nodo": "~8.9.4",
"@types/webpack": "~2.2.14",
"angular2-template-loader": "~ 0.6.2",
"awesome-typescript-loader": "~3.2.3",
"body-parser": "1.17.0", p>
"cookie-parser": "1.4.3",
"cross-env": "^5.1.6",
"debug": "2.6 .1 ",
"ejs": "2.5.6",
"express": "4.15.0",
"fis-optimizer- htmlmin" : "0.1.2",
"fis-optimizer-png-compressor": "0.2.0",
"fis-parser-less": "0.1.3" ,
"fis-parser-pug": "0.0.1",
"fis-postpackager-replace": "0.0.3",
"fis3": "3.4.39",
"fis3-deploy-local-supply": "0.0.2",
"fis3-hook-commonjs": "0.1 .27",
"fis3-hook-node_modules": "2.3.1",
"fis3-hook-relative": "2.0.3", p>
"fis3-packager-deps-pack": "0.1.2",
"fis3-parser-typescript": "^1.2.2",
"fis3 -postpackager-loader": "2.1.11",
"fis3-preprocessor-cssprefixer": "0.0.2",
"fis3-preprocessor-js-require -css ": "0.1.3",
"fis3-preprocessor-js-require-file": "0.1.3",
"fis3-preprocessor-ng2-inline ": "0.0.1",
"fs-extra": "^6.0.1",
"mon": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms ": "^6.1.0",
"@angular/ponent": "^7.2.1",
"b
uffer": "4.9.1",
"core-js": "^2.5.7",
"fis-mod": "1.0.1", p>
"is-buffer": "1.1.4",
"jquery": "1.12.4",
"momento": "2.18.1" ,
"ngrx-store-freeze": "0.2.4",
"ngrx-store-logger": "0.2.2",
"process": "0.11.9",
"reflect-metadata": "0.1.12",
"rxjs": "^6.0.0",
"rxjs-compat": "^6.2.2",
"throttle-debounce": "^2.0.1",
"zone.js": "0.8.26"
}
}
2. Agregar dependencia rxjs-compat
Para que sea compatible con rxjs 5 uso, debe Introducir rxjs-compat
Agregar dependencias:
yarn add rxjs-compat
Luego introdúzcalo en el archivo de entrada del proyecto main.ts:
importar 'rxjs-compat';
Tenga en cuenta que el desarrollo posterior debe utilizar conscientemente el nuevo método de escritura de rxjs6 para codificar
Por supuesto, si decide Cambie el método de escritura anterior de rxjs5, puede eliminar la introducción de rxjs-compat y modificarlo uno por uno de acuerdo con el mensaje de error del navegador.
3 Ábralo selectivamente de acuerdo con las pautas oficiales y las reales. situación del proyecto
Sitio web de la guía de actualización oficial de Angular https://update.angular.io Siga las indicaciones y la situación real del proyecto
De hecho, el proyecto lo hace. No tiene muchos usos avanzados y no hay muchas cosas que deban modificarse. Algunos puntos:
Si se usa extends OnInit, debe estar en el método implements OnInit. > Si se usa la etiqueta en la plantilla, cámbiela a
HttpModule y Http deben reemplazarse con HttpClientModule y HttpClient respectivamente. HttpClient admite interceptores, que se pueden inyectar durante el proceso de solicitud http para implementar una lógica más libre, como la verificación de permisos de roles, etc. Las solicitudes http en el proyecto se han encapsulado según el módulo Http, por lo que este paso puede ignorarse. Sin embargo, debería considerar mejorar la encapsulación http globalmente o adoptar HttpClient en el desarrollo posterior.
Instale rxjs-tslint globalmente y realice actualizaciones a nivel de código fuente, principalmente para modificar el uso obsoleto de rxjs@6. Esta operación modificará muchos archivos.
npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json
Después de las operaciones anteriores están completos, intente habilitar la creación y compilación del proyecto. Si no se informan errores, la actualización se realizó correctamente.
Resumen: