How to update / upgrade from Angular 4 to Angular

问题:

I need to update my project from Angular 4 to Angular 5+ ,

I need to change all following dependencies to Angular 5+.

I also updated Angular CLI to 1.5.0.

I tried to create new project but it seems to create only Angular 4 project.

ng new 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"
}

What am I doing wrong.

CLI Config :

回答1:

This solution is for visual studio 2017 using angular template

Use Node.js command prompt or Open PowerShell. Navigate to project directory and use the command dir to check if the package.json file exists.

Close the Visual Studio instance and run the command npm install -g npm-check-updates then following output should appear

Then use the command ncu -u The following package should update to the latest version

If the packages are still pointing to Angular 4, then delete the package-lock.json and follow the above-given steps again.

Webpack is used as module bundler by Visual Studio. Webpack uses AotPlugin to compile the Angular 4 apps, now Webpack no longer uses Aotplugin for Angular 5. It now uses AngularCompilerPlugin.So open webpack.config.js and replace all occurrences of AotPlugin with AngularCompilerPlugin.

Open ClientApp/boot.server.ts file and replace the following line of code (line no.22).

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

with,

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

Source link

回答2:

Problem fixed with node version update.

I had to update Node version,

sudo apt-get install nodejs

npm uninstall -g @angular/cli

npm cache clean

npm install -g @angular/cli@latest

ng new ProjectName

node --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"
}

回答3:

Check Angular blog out

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

In the article, an update guide is mentioned.

You can find it here: https://angular-update-guide.firebaseapp.com/

Also, you can update your angular-CLI to 1.5.0 which will create angular v5 project. You can compare the differences with yours.

回答4:

If you want to simply upgrade your angular4 project to angular 5 do the following.

1. Go to your project directory.
2. Open a command prompt and run the following commands
3. npm install -g npm-check-updates
4. ncu -u

This worked for me.

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

回答5:

Here's the correct answer, and it's super simple.

Follow the official Angular upgrade guide.

You'll fill out a short form selecting which version of Angular you are on and which version you want to upgrade to. It then shows you the list of necessary steps to take to perform the upgrade. You should follow this guide for all upgrades. (Please upvote before navigating away) :)

https://update.angular.io/

回答6:

To upgrade your Angular 4 to Angular 5

Open your webpack.config.js

Add the below code inside ContextReplacementPlugin

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

回答7:

Elaborating a bit more, this helped me with BOTH the global as the PROJECT LOCAL upgrade.

The exact guide lines are (of course) in 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. 

Project local:

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

Then:

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

This may be needed (and won't hurt): $npm audit fix

$ npm install typescript@2.4.2 --save-exact

Source:

https://update.angular.io/ will show you the best route.

The major difference is when you still use the 'http' module. You can (or need) to migrate from http to the httpclient module. In most cases, this is quite easy.