想要将项目从Angular v5升级到Angular v6

114

正如Angular 6在这里一样，我想将我的angular 5客户端应用程序升级或移动到angular 6，但是我没有任何教程或任何可以指导我的教程。

据我说，我只需要运行一个新的Angular CLI，然后将旧的源代码移到新项目中即可。我读到Angular 6正在使用一个名为Ivy的新渲染器。我是否需要根据常春藤更改项目？

angular  migration  upgrade  angular-ivy 
— 阿比舍克·乔克拉（Abhishek Chokra）
source
7
— lealceldeiro

Answers:

272

从Angular v6升级到Angular v7

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

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

从Angular v5升级到Angular v6

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

升级步骤（主要取自官方Angular更新指南，适用于使用Angular Material的基本Angular应用程序）：

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

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

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

  3. 通过运行以下命令，将所有Angular框架软件包更新到v6，以及正确版本的RxJS和TypeScript：

    ng update @angular/core

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

    ng update @angular/material

  5. RxJS v6与v5相比有重大变化，v6带来了向后兼容的软件包rxjs-compat，可使您的应用程序正常运行，但是您应该重构TypeScript代码，以使其不依赖于rxjs-compat。要重构TypeScript代码，请运行以下命令：

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

    注意：一旦所有依赖项都更新到RxJS 6，请删除rxjs-compat，因为它会增加包的大小。请参阅此RxJS升级指南以获取更多信息。

    npm uninstall rxjs-compat

  6. 做完ng serve检查。
    如果您在构建时遇到错误，请参阅https://update.angular.io以获取详细信息。

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

  1. 将rxjs升级到6.0.0-beta.0，请参阅此RxJS升级指南以获取更多信息。RxJS v6具有重大变化，因此请首先使您的代码与最新RxJS版本兼容。

  2. 将NodeJS版本更新为8.9+（Angular CLI 6版本需要此功能）

  3. 将Angular cli全局软件包更新为下一版本。

    npm uninstall -g @angular/cli
npm cache verify

    如果npm版本小于5，则使用 npm cache clean

    npm install -g @angular/cli@next

  4. 将package.json文件中的角度软件包版本更改为 ^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"
}

  5. 下次将Angular cli本地软件包更新为下一版本，并安装上述软件包。

    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

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

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

注意：-如果出现以下错误“ Angular Compiler需要TypeScript> = 2.7.2和<2.8.0，但是找到了2.8.3”。运行以下命令：

npm install typescript@2.7.2
— 艾希什·贾恩（Ashish Jain）
source
update.angular.io目前无法在Edge中使用。它加载正常，但是一旦您开始使用它，它会导致某种问题，导致页面无法响应，浏览器会询问您是否要恢复页面。
— 德文·霍尔科姆
3
步骤5 bash: rxjs-5-to-6-migrate: command not found。有什么想法吗？
— 威廉汉普郡
当我ng update @angular/core在离子项目文件夹中运行时，出现错误Invalid range: "*"
— smk
1
完成上述所有步骤后，我遇到了一个愚蠢的问题：无法"@angular-devkit/build-angular"从...中找到模块，因此已通过解决npm install @angular-devkit/build-angular --save-dev。除此之外，我不得不更新使用以前rxjs-compat的，图书馆，喜欢ng update @ngx-translate/core，ng update @ng-bootstrap/ng-bootstrap因为他们几个没有被正确地更新。
— Arsen Khachaturyan
2
如果收到“您的全局Angular CLI版本（6.0.8）大于本地版本（1.6.8）。将使用本地Angular CLI版本。” 使用npm install @ angular / cli @ latest
— Nakres
19

Angular 6刚刚发布。

https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4

这是我的一个较小项目的工作原理

  1. npm install -g @ angular / cli
  2. npm安装@ angular / cli
  3. ng update @ angular / cli --migrate-only --from = 1.7.0
  4. ng更新@ angular / core
  5. npm安装rxjs-compat
  6. ng服务

您可能需要在package.json中更新运行脚本，例如。如果您使用诸如“ app”和“ environment”之类的标记，则这些标记已分别更新为“ project”和“ configuration”。

请参阅https://update.angular.io/了解更多详细指南。

— Arjun Shankar
source
步骤2之后，我不得不将以下.json文件（tsconfig，angular-cli.json，tslint）转换为UTF8，而没有BOM。在这一步，我收到了无效的JSON字符错误。
— 本杰明
8

检查从Angular 5到Angular 6的逐步升级详细信息。这些详细信息提供了有关升级期间遇到的问题以及如何解决这些问题的详细信息。

  • 将节点版本更新为8或更高版本，并通过npm i -g @ angular / cli @ latest在全球范围内最新安装Angular cli。
  • Angular 6使用angular.json作为配置文件，而不是.anguar-cli.json。tslint也已更改。检查https://github.com/angular/angular-cli/wiki/angular-workspace了解最新的配置详细信息。您必须将任何现有配置移动到新的配置文件。
  • 为此，请使用ng new'your-project'和您先前在项目中使用的默认值（例如前缀，样式等）创建另一个具有最新cli的虚拟项目。使用CLI创建新项目 https://github.com/angular/angular-cli/wiki/new
  • 使用 https://update.angular.io/检查从当前版本的Angular→Angular 6所做的更改。它提供了如何更改/修复它们的用法。
  • 请按照上述步骤操作，然后复制/更新在步骤2中创建的angular.json文件。在您的项目中执行npm i以获取所有依赖项并进行npm更新
  • 现在是重要的部分。RxJS升级和解决冲突。RxJS在此版本中标准化了操作员和可观察的创建者的导入。做npm i -g rxjs-tslint并在tslint.json中添加以下lint配置
{
  "rulesDirectory": [
    "node_modules/rxjs-tslint"
  ],
  "rules": {
    "rxjs-collapse-imports": true,
    "rxjs-pipeable-operators-only": true,
    "rxjs-no-static-observable-methods": true,
    "rxjs-proper-imports": true
  }
}
  • 现在运行ng lint --fix。这可以解决一些问题，但是大多数其余问题将突出显示，您必须手动修复。

运营商名称变更：

do -> tap, 
catch -> catchError, 
switch -> switchAll, 
finally -> finalize

所有运算符都移至rxjs / operators

import { map, filter, reduce } from 'rxjs/operators';

可观察的创建方法已移至rxjs

   import { Observable, Subject, of, from } from 'rxjs';

你们都准备好了。欢迎来到Angular 6 :) 在这里查看我的博客文章有关如何升级

— 乌代·冯南
source
2

请运行以下注释以从Angular 5更新到Angular 6

  1. ng update @ angular / cli
  2. ng更新@ angular / core
  3. npm install rxjs-compat（为了支持旧版本rxjs 5.6）
  4. npm install -g rxjs-tslint（将代码中的rxjs 5更改为rxjs 6格式。全局安装则只能工作）
  5. rxjs-5-to-6-migrate -p src / tsconfig.app.json（安装后，我们必须将其在源代码中更改为rxjs6格式）
  6. npm卸载rxjs-compat（最后删除）
— 用户名
source
2

完整指南

-----------------使用angular-cli --------------------------

1.全局和本地更新CLI

  1. 使用NPM（确保节点版本为8+）

    npm uninstall -g @angular/cli npm cache clean npm install -g @angular/cli@latest npm i @angular/cli --save

  2. 使用纱线

    yarn remove @angular/cli yarn global add @angular/cli yarn add @angular/cli

2，更新依赖

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

Angular 6现在取决于TypeScript 2.7和RxJS 6

通常，这意味着您到处都要使用RxJS导入和运算符来更新代码，但值得庆幸的是，这里有一个软件包可以处理大多数繁重的工作：

npm i -g rxjs-tslint 

//or using yarn

yarn global add rxjs-tslint

然后您可以运行rxjs-5-to-6-migrate

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

最终删除rxjs-compat

npm uninstall rxjs-compat

// or using Yarn

yarn remove rxjs-compat

请参阅此链接https://alligator.io/angular/angular-6/

-------------------没有angular-cli -------------------------

因此，您必须手动更新package.json文件。

升级包的package.json屏幕快照

然后跑 

 npm update
 npm install --save rxjs-compat
 npm i -g rxjs-tslint
 rxjs-5-to-6-migrate -p src/tsconfig.app.json
— 伯雷克
source
我bash: rxjs-5-to-6-migrate: command not found在尝试运行rxjs-5-to-6-migrate命令时遇到问题。有什么想法吗？
— 威廉汉普郡
1
@WilliamHampshire您是否运行过npm install -g rxjs-tslint
— 乔
是的，不知道它是什么@Joe
— 威廉·汉普郡
也许您没有最新的tslint？
— 乔
1
您知道如何不使用角度倾斜吗？在我的项目中，我手动完成所有操作
— Daniel
1

正如Vinay Kumar指出的那样，它将不会更新全局安装的Angular CLI。要全局更新它，只需使用以下命令：

npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest

注意，如果要更新现有项目，则必须修改现有项目，应在项目内部更改package.json。

Angular本身并没有重大变化，但它们在RxJS中，因此不要忘记使用rxjs-compat库来处理遗留代码。

  npm install --save rxjs-compat

我写了一篇有关安装/更新Angular CLI的好文章，网址为http://bmnteam.com/angular-cli-installation/

— 马克西姆·B。
source
0

这就是我的工作方式。

我的环境：

Angular CLI全局：6.0.0，本地：1.7.4，Angular：5.2，打字稿2.5.3

注意：要启用，ng Update您需要先安装Angular CLI 6.0 npm install -g @angular/cli or npm install @angular/cli

  1. ng update //update Angular Package core/common/complier... to 6.0.0

  2. ng update @angular/cli //change angular-cli.json to angular.json

如果您有角材料5.4.2，ngx-translate 9.1.1，ng-bootstrap / ng-bootstrap 1.1.1，则为可选：

  1. ng update @angular/material //upgrade to 6.0.1

  2. npm install @ngx-translate/core@10.0.1 --save //upgrade ngX translate to 10.0.1 for Angular 6

5 npm install --save @ng-bootstrap/ng-bootstrap@2.0.0 //for ng-bootstrap

如果使用Observable并收到错误：

ERROR in node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'. node_modules/rxjs/observable/of.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/observable/of'.

更改： import { Observable } from "rxjs/Observable"; import { of } from 'rxjs/observable/of';

至

import { Observable, of } from "rxjs";

Angular CLI问题：https : //github.com/angular/angular-cli/issues/10621

— 黄瑞恩
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.