想要将项目从 Angular v5 升级到 Angular v6 [英] Want to upgrade project from Angular v5 to Angular v6

问题描述

由于 Angular 6 在这里，我想将我的 angular 5 客户端应用程序升级或移动到 angular 6，但我没有得到任何教程或任何可以指导我完成的东西.

As Angular 6 is here, I want to upgrade or move my angular 5 client application to angular 6, but I'm not getting any tutorial or anything which can guide me through.

据我说，我只需要运行一个新的 Angular CLI，然后必须将我的旧源移动到新项目中.我读到 Angular 6 正在使用一个名为 Ivy 的新渲染器.我是否必须根据 Ivy 更改我的项目?

According to me I just need to run a new Angular CLI and then have to move my older source to new project. I read the Angular 6 is using a new renderer called Ivy. Will I have to change my project according to Ivy?

推荐答案

从 Angular v6 升级到 Angular v7

第 7 版 Angular 已经发布Angular 官方博客链接.有关详细信息，请访问官方 Angular 更新指南 https://update.angular.io.这些步骤适用于使用 Angular Material 的基本 angular 6 应用.

Upgrade from Angular v6 to Angular v7

Version 7 of Angular has been released Official Angular blog link. Visit official angular update guide https://update.angular.io for detailed information. These steps will work for basic angular 6 apps using Angular Material.

ng update @angular/cli 
ng update @angular/core
ng update @angular/material

从 Angular v5 升级到 Angular v6

第 6 版 Angular 已经发布Angular 官方博客链接.我在下面提到了一般的升级步骤，但是在更新之前和之后，您需要更改代码以使其在 v6 中可用，有关详细信息，请访问官方网站 https://update.angular.io .

Upgrade from Angular v5 to Angular v6

Version 6 of Angular has been released Official Angular blog link. I have mentioned general upgrade steps below, but before and after the update you need to make changes in your code to make it workable in v6, for that detailed information visit official website https://update.angular.io .

升级步骤(主要取自官方Angular 更新指南使用 Angular Material 的 Angular 应用):

Upgrade Steps (largely taken from the official Angular Update Guide for a basic Angular app using Angular Material):

1. 如果不更新，请确保 NodeJS 版本为 8.9+.

1. Make sure NodeJS version is 8.9+ if not update it.

在全局和本地更新 Angular cli，并通过运行以下命令将旧配置 .angular-cli.json 迁移到新的 angular.json 格式:

Update Angular cli globally and locally, and migrate the old configuration .angular-cli.json to the new angular.json format by running the following:

npm install -g @angular/cli  
npm install @angular/cli  
ng update @angular/cli

将您所有的 Angular 框架包更新到 v6 和正确的版本通过运行以下命令来获取 RxJS 和 TypeScript:

Update all of your Angular framework packages to v6,and the correct version of RxJS and TypeScript by running the following:

ng update @angular/core

通过运行以下命令将 Angular Material 更新到最新版本:

Update Angular Material to the latest version by running the following:

ng update @angular/material

RxJS v6 与 v5 相比有重大变化，v6 带来了向后兼容包 rxjs-compat，这将使您的应用程序继续工作，但您应该重构 TypeScript 代码，使其不依赖于 rxjs-compat.要重构 TypeScript 代码，请运行以下代码:

RxJS v6 has major changes from v5, v6 brings backwards compatibility package rxjs-compat that will keep your applications working, but you should refactor TypeScript code so that it doesn't depend on rxjs-compat. To refactor TypeScript code run following:

npm install -g rxjs-tslint   
rxjs-5-to-6-migrate -p src/tsconfig.app.json

注意:一旦您的所有依赖项都更新到 RxJS 6，请删除 rxjs-兼容，因为它增加了包的大小.请参阅此 RxJS 升级指南更多信息.

Note: Once all of your dependencies have updated to RxJS 6, remove rxjs- compat as it increases bundle size. please see this RxJS Upgrade Guide for more info.

npm uninstall rxjs-compat

完成运行 ng serve 以检查它.
如果您在构建中遇到错误，请参阅 https://update.angular.io 了解详细信息.

Done run ng serve to check it.
If you get errors in build refer https://update.angular.io for detailed info.

从 Angular v5 升级到 Angular 6.0.0-rc.5

1. 将 rxjs 升级到 6.0.0-beta.0，请看这个 RxJS 升级指南 了解更多信息.RxJS v6 有重大变化，因此首先使您的代码兼容最新的 RxJS 版本.

1. Upgrade rxjs to 6.0.0-beta.0, please see this RxJS Upgrade Guide for more info. RxJS v6 has breaking change hence first make your code compatible to latest RxJS version.

将 NodeJS 版本更新到 8.9+(这是 angular cli 6 版本所必需的)

Update NodeJS version to 8.9+ (this is required by angular cli 6 version)

将 Angular cli 全局包更新到下一个版本.

Update Angular cli global package to next version.

npm uninstall -g @angular/cli
npm cache verify

如果 npm 版本是 <5 然后使用npm cache clean

if npm version is < 5 then use npm cache clean

npm install -g @angular/cli@next

将 package.json 文件中的 angular 包版本更改为 ^6.0.0-rc.5

"dependencies": {
  "@angular/animations": "^6.0.0-rc.5",
  "@angular/cdk": "^6.0.0-rc.12",
  "@angular/common": "^6.0.0-rc.5",
  "@angular/compiler": "^6.0.0-rc.5",
  "@angular/core": "^6.0.0-rc.5",
  "@angular/forms": "^6.0.0-rc.5",
  "@angular/http": "^6.0.0-rc.5",
  "@angular/material": "^6.0.0-rc.12",
  "@angular/platform-browser": "^6.0.0-rc.5",
  "@angular/platform-browser-dynamic": "^6.0.0-rc.5",
  "@angular/router": "^6.0.0-rc.5",
  "core-js": "^2.5.5",
  "karma-jasmine": "^1.1.1",
  "rxjs": "^6.0.0-uncanny-rc.7",
  "rxjs-compat": "^6.0.0-uncanny-rc.7",
  "zone.js": "^0.8.26"
},
"devDependencies": {
  "@angular-devkit/build-angular": "~0.5.0",
  "@angular/cli": "^6.0.0-rc.5",
  "@angular/compiler-cli": "^6.0.0-rc.5",
  "@types/jasmine": "2.5.38",
  "@types/node": "~8.9.4",
  "codelyzer": "~4.1.0",
  "jasmine-core": "~2.5.2",
  "jasmine-spec-reporter": "~3.2.0",
  "karma": "~1.4.1",
  "karma-chrome-launcher": "~2.0.0",
  "karma-cli": "~1.0.1",
  "karma-coverage-istanbul-reporter": "^0.2.0",
  "karma-jasmine": "~1.1.0",
  "karma-jasmine-html-reporter": "^0.2.2",
  "postcss-loader": "^2.1.4",
  "protractor": "~5.1.0",
  "ts-node": "~5.0.0",
  "tslint": "~5.9.1",
  "typescript": "^2.7.2"
}

接下来将 Angular cli 本地包更新到下一个版本并安装上述包.

Next update Angular cli local package to next version and install above mentioned packages.

rm -rf node_modules dist # use rmdir /S/Q node_modules dist in Windows 
Command Prompt; use rm -r -fo node_modules,dist in Windows PowerShell
npm install --save-dev @angular/cli@next
npm install 

Angular CLI 配置格式已从 angular cli 6.0.0-rc.2 版本更改，您现有的配置可以通过运行以下命令自动更新.它将删除旧的配置文件 .angular-cli.json 并写入新的 angular.json 文件.

The Angular CLI configuration format has been changed from angular cli 6.0.0-rc.2 version, and your existing configuration can be updated automatically by running the following command. It will remove old config file .angular-cli.json and will write new angular.json file.

ng update @angular/cli --migrate-only --from=1.7.4

注意:- 如果您收到以下错误Angular Compiler requires TypeScript >=2.7.2 and <2.8.0 but 2.8.3 was found 相反".运行以下命令:

Note :- If you get following error "The Angular Compiler requires TypeScript >=2.7.2 and <2.8.0 but 2.8.3 was found instead". run following command :

npm install typescript@2.7.2

这篇关于想要将项目从 Angular v5 升级到 Angular v6的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！