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>

Utilice Less para escribir estilos CSS

Utilice Express y podoc para generar documentos

Utilice @lzwme/simple-mock de desarrollo propio para implementar API simulada

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",

"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",

"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",

"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