从Angular 6迁移到Angular 7

Question

I have recently upgraded my Angular 4 app to Angular 6 and now want to upgrade to Angular 7. According to the below article , running command the following command shouldn't take more than 10 mins to upgrade.

ng update @angular/cli @angular/core

https://blog.angular.io/version-7-of-angular-cli-prompts-virtual-scroll-drag-and-drop-and-more-c594e22e7b8c

I dont see anything happening on the command prompt after running this command. No errors. Could somebody tell me why this is happening

Answer 1

I've updated 6 to 7 using:

Angular dependencies

   npm install @angular/animations@latest @angular/common@latest @angular/compiler@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest --save

Angular dev dependencies

  npm install @angular-devkit/build-angular@latest @angular/compiler-cli@latest @angular/cli@latest @angular/language-service@latest --save-dev

Dependencies; Core-js and Zone.js

npm install core-js@latest zone.js@latest --save

Dev dependencies; Types, codelyzer, karma tools, jasmine, protractor and tslint

npm install @types/jasmine@latest @types/node@latest codelyzer@latest karma@latest karma-chrome-launcher@latest karma-cli@latest karma-jasmine@latest karma-jasmine-html-reporter@latest jasmine-core@latest jasmine-spec-reporter@latest protractor@latest tslint@latest --save-dev

The new version 3+ of TypeScript

npm install typescript@latest --save-dev

Latest version 6+ of RxJS

npm install rxjs@latest rxjs-compat@latest --save

And:

npm install rxjs-tslint@latest --save-dev

Latest version 4+ of Webpack

npm install webpack@latest --save-dev

source

Answer 2

here,you can find guide related to update from any version to angular 7

https://update.angular.io/

Or you can simply run a command into your CLI

  ng update --all

Answer 3

ANGULAR 6.1 to 7 MIGRATION PROCEDURE

In order to upgrade properly from Angular 6.1 to angular 7, you have to follow the next steps:

WARNING: Please check if all your imported modules are compatible with angular 7, upgrade them if necessary.

Before upgrade to Angular 7:

1. Change the HttpModule import to HttpClientModule (import {HttpClientModule} from '@angular/common/http';)

2. Change the Http imports (if you have any) to import {HttpClient} from '@angular/common/http';

Don´t forget to remove all JSON.parse(response), since you don´t need to do that anymore with HttpClient

3. If you are using RXjs, you have to remove RXjs 6 old dependencies. No worries, you can do that running the following scripts:

   npm install -g rxjs-tslint

   rxjs-5-to-6-migrate -p src/tsconfig.app.json

You may have to update typescript in order to migrate rxjs successfully: npm i -g typescript

4. Uninstall rxjs-compat module (npm uninstall rxjs-compat)

5. If you use the Angular Service worker, migrate any versionedFiles to the files array.

6. Update angular cli to v7:

   ng update @angular/cli

7. Update angular Core to v7:

   ng update @angular/core

8. Finally you have to upgrade Angular material:

   ng update @angular/material

Answer 4

ng-update也不适合我-我通过使用npm-check更新所有软件包并整理出手动后遇到的一些错误来解决该问题。

Answer 5

If you are looking like me for just updating your project to the latest these is what works form me since Angular 6:

Open the console on your project folder: If you type: ng update then you will get the below message:

        We analyzed your package.json, there are some packages to update:

          Name                               Version                  Command to update
         --------------------------------------------------------------------------------
          @angular/cli                       7.0.7 -> 7.2.2           ng update @angular/cli
          @angular/core                      7.0.4 -> 7.2.1           ng update @angular/core

There might be additional packages that are outdated.
    Run "ng update --all" to try to update all at the same time.

So I usually go straight and do:

ng update --all

Finally you can check your new version:

 ng version 

Angular CLI: 7.2.2
Node: 8.12.0
OS: win32 x64
Angular: 7.2.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.12.2
@angular-devkit/build-angular     0.12.2
@angular-devkit/build-optimizer   0.12.2
@angular-devkit/build-webpack     0.12.2
@angular-devkit/core              7.2.2
@angular-devkit/schematics        7.2.2
@angular/cli                      7.2.2
@ngtools/webpack                  7.2.2
@schematics/angular               7.2.2
@schematics/update                0.12.2
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.28.4

Answer 6

You can use this:

https://update.angular.io

Select the version you're using and it will give you a step by step guide.