Cómo actualizar / actualizar de Angular 4 a Angular 5+

Necesito actualizar mi proyecto de Angular 4 a Angular 5+,

Necesito cambiar todas las siguientes dependencias a Angular 5+.

También actualicé CLI angular a 1.5.0.

Traté de crear un nuevo proyecto, pero parece crear solo el proyecto Angular 4.

ng nuevo NG5_Project

"dependencies": { "@angular/animations": "^4.2.4", "@angular/common": "^4.2.4", "@angular/compiler": "^4.2.4", "@angular/core": "^4.2.4", "@angular/forms": "^4.2.4", "@angular/http": "^4.2.4", "@angular/platform-browser": "^4.2.4", "@angular/platform-browser-dynamic": "^4.2.4", "@angular/router": "^4.2.4", "core-js": "^2.4.1", "rxjs": "^5.4.2", "zone.js": "^0.8.14" } 

Qué estoy haciendo mal.

Configuración CLI:

Configuración de CLI

Esta solución es para visual studio 2017 usando la plantilla angular

Use el símbolo del sistema Node.js o abra PowerShell. Navegue hasta el directorio del proyecto y use el comando dir para verificar si existe el archivo package.json .

Cierre la instancia de Visual Studio y ejecute el comando npm install -g npm-check-updates para que aparezca la siguiente salida

salida

Luego use el comando ncu -u El siguiente paquete debería actualizarse a la última versión

actualización de pakage

Si los paquetes todavía apuntan a Angular 4, elimine el package-lock.json y siga los pasos anteriores.

Web Studio utiliza el paquete web como paquete de módulos. Webpack utiliza AotPlugin para comstackr las aplicaciones de Angular 4, ahora Webpack ya no usa Aotplugin para Angular 5. Ahora usa AngularCompilerPlugin.So abra webpack.config.js y reemplace todas las apariciones de AotPlugin con AngularCompilerPlugin.

Abra el archivo ClientApp / boot.server.ts y reemplace la siguiente línea de código (línea no.22).

const zone = moduleRef.injector.get(NgZone);

con,

const zone: NgZone = moduleRef.injector.get(NgZone);

Enlace de origen

Problema solucionado con la actualización de la versión del nodo.

Tuve que actualizar la versión del nodo,

 sudo apt-get install nodejs npm uninstall -g @angular/cli npm cache clean npm install -g @angular/cli@latest ng new ProjectName 

nodo –version ==> 8.9.0

ng –version ==> 1.5.0

 "dependencies": { "@angular/animations": "^5.0.0", "@angular/common": "^5.0.0", "@angular/compiler": "^5.0.0", "@angular/core": "^5.0.0", "@angular/forms": "^5.0.0", "@angular/http": "^5.0.0", "@angular/platform-browser": "^5.0.0", "@angular/platform-browser-dynamic": "^5.0.0", "@angular/router": "^5.0.0", "rxjs": "^5.5.2", "zone.js": "^0.8.14" } 

Verifique el blog angular

https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced

En el artículo, se menciona una guía de actualización.

Puede encontrarlo aquí: https://angular-update-guide.firebaseapp.com/

Además, puede actualizar su angular-CLI a 1.5.0 lo que creará un proyecto v5 angular. Puedes comparar las diferencias con las tuyas.

Si simplemente desea actualizar su proyecto angular4 a angular 5, haga lo siguiente.

  1. Ve a tu directorio de proyectos.
  2. Abra un símbolo del sistema y ejecute los siguientes comandos
  3. npm install -g npm-check-updates
  4. ncu -u

Esto funcionó para mí.

http://www.talkingdotnet.com/upgrade-angular-4-app-angular-5-visual-studio-2017/

Aquí está la respuesta correcta, y es súper simple.

Siga la guía oficial de actualización angular.

Completará un breve formulario seleccionando en qué versión de Angular se encuentra y a qué versión desea actualizar. Luego, le muestra la lista de pasos necesarios para llevar a cabo la actualización. Debe seguir esta guía para todas las actualizaciones. (Por favor vote antes de navegar fuera) 🙂

https://update.angular.io/

enter image description here

Para actualizar su Angular 4 a Angular 5

Abra su webpack.config.js

Agregue el código siguiente dentro de ContextReplacementPlugin

  /angular(\\|\/)core(\\|\/)(@angular|esm5)/ 

Al elaborar un poco más, esto me ayudó tanto con la actualización global PROJECT LOCAL como con la global .

Las líneas de guía exactas son (por supuesto) en https://update.angular.io/ .

Global :

 $ npm uninstall -g angular-cli (to be sure) $ npm uninstall -g @angular/cli $ npm cache clean $ npm install -g @angular-cli@1 $ ng -v ... this will show you the current CLI version. 

Proyecto local :

 $ cd to/your/project/folder $ remove the folder node_modules $ npm install --save-dev @angular/cli@1 $ npm install 

Entonces :

 npm install @angular/animations@^5.0.0 @angular/common@^5.0.0 @angular/compiler@^5.0.0 @angular/compiler-cli@^5.0.0 @angular/core@^5.0.0 @angular/forms@^5.0.0 @angular/http@^5.0.0 @angular/platform-browser@^5.0.0 @angular/platform-browser-dynamic@^5.0.0 @angular/platform-server@^5.0.0 @angular/router@^5.0.0 typescript@2.4.2 rxjs@^5.5.2 

Esto puede ser necesario (y no hará daño): revisión de auditoría $ npm

$ npm install typescript@2.4.2 –save-exact

Fuente:

https://update.angular.io/ le mostrará la mejor ruta.

La principal diferencia es cuando todavía usa el módulo ‘http’. Puede (o necesita) migrar de http al módulo httpclient. En la mayoría de los casos, esto es bastante fácil.

    Intereting Posts