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

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

Use Nodo.símbolo del sistema js o Abrir PowerShell. Vaya al directorio del proyecto y use el comando dir para comprobar si el archivo package.json existe.

Cierre la instancia de Visual Studio y ejecute el comando npm install -g npm-check-updates a continuación, la siguiente salida debe aparecer

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

Si los paquetes siguen apuntando a Angular 4, borre el package-lock.json y siga los pasos anteriores de nuevo.

Webpack es utilizado como paquete de módulos por Visual Studio. Webpack usa AotPlugin para compilar las aplicaciones de Angular 4, ahora Webpack ya no usa Aotplugin para Angular 5. Ahora utiliza AngularCompilerPlugin.So abra webpack.config.js y reemplace todas las ocurrencias de AotPlugin con AngularCompilerPlugin.

Abra ClientApp/boot.servidor.archivo ts y sustitúyase el siguiente renglón del código (renglón no.22).

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

Con

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

Enlace de la fuente

Compruebe Angular blog hacia fuera

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.

Lo puedes encontrar aquí: https://angular-update-guide.firebaseapp.com /

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

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

1. Vaya al directorio de su proyecto.
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 de Angular.

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

Https://update.angular.io/

Para actualizar su Angular 4 a Angular 5

Abre tu webpack.config.js

Agregue el siguiente código dentro de ContextReplacementPlugin

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

Elaborando un poco más, esto me ayudó con TANTO el global como el PROYECTO de actualización LOCAL.

Las líneas guía exactas están (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 [email protected] rxjs@^5.5.2

Esto puede ser necesario (y no dolerá): fix npm audit fix

Install npm install [email protected] save save-exact

Fuente:

Https://update.angular.io / te mostrará la mejor ruta.

La principal diferencia es cuando todavía se utiliza 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.