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

Posted 2023-03-13

【中文标题】想要将项目从 Angular v5 升级到 Angular v6

【英文标题】：Want to upgrade project from Angular v5 to Angular v6

【发布时间】：2018-08-04 20:23:48

【问题描述】：

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

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

【问题讨论】：

update.angular.io

【参考方案1】：

从 Angular v6 升级到 Angular v7

第 7 版 Angular 已发布 Official Angular blog link。访问官方角度更新指南https://update.angular.io 了解详细信息。这些步骤适用于使用 Angular Material 的基本 Angular 6 应用程序。

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

从 Angular v5 升级到 Angular v6

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

升级步骤（主要取自official Angular Update Guide，用于使用 Angular Material 的基本 Angular 应用程序）：

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

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

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

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

ng update @angular/core

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

ng update @angular/material

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- 兼容，因为它增加了捆绑包的大小。请参阅此RxJS Upgrade Guide 了解更多信息。

npm uninstall rxjs-compat

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

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

将 rxjs 升级到 6.0.0-beta.0，请参阅RxJS Upgrade Guide 了解更多信息。 RxJS v6 有重大变化，因此首先要使您的代码与最新的 RxJS 版本兼容。

将 NodeJS 版本更新到 8.9+（这是 angular cli 6 版本要求的）

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

npm uninstall -g @angular/cli
npm cache verify

如果 npm 版本 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 本地包更新到下一个版本并安装上述包。

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 文件。

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

注意：- 如果您收到以下错误“Angular 编译器需要 TypeScript >=2.7.2 和

npm install typescript@2.7.2

【讨论】：

update.angular.io 目前在 Edge 中不起作用。它加载正常，但一旦你开始使用它，它会导致某种问题，导致页面没有响应并且浏览器询问你是否要恢复页面。

第 5 步我收到了bash: rxjs-5-to-6-migrate: command not found。有什么想法吗？

当我在我的 ionic 项目文件夹中运行 ng update @angular/core 时，我收到错误 Invalid range: "*"

经过上述所有步骤后，我遇到了这个愚蠢的问题：找不到模块 "@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，因为其中很少有没有正确更新。

如果您收到“您的全局 Angular CLI 版本 (6.0.8) 高于本地版本 (1.6.8)。使用本地 Angular CLI 版本。”使用 npm install @angular/cli@latest

【参考方案2】：

Angular 6 刚刚发布。

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

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

npm install -g @angular/cli npm install @angular/cli ng update @angular/cli --migrate-only --from=1.7.0 ng 更新@angular/core npm install rxjs-compat ng 服务

您可能需要更新 package.json 中的运行脚本 例如。如果你使用像“app”和“environment”这样的标志 这些已分别更新为“项目”和“配置”。

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

【讨论】：

在第 2 步之后，我必须将以下 .json 文件（tsconfig、angular-cli.json、tslint）转换为 UTF8，而无需 BOM。我在这一步遇到了无效的 JSON 字符错误。

【参考方案3】：

只需运行以下命令：

ng update

注意：这不会全局更新。

【参考方案4】：

正如 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/的好文章

【参考方案5】：

完整指南

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

1。全局和本地更新 CLI

使用 NPM（确保您的节点版本为 8+）

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

使用纱线

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 文件。

然后运行

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

【讨论】：

我在尝试运行 rxjs-5-to-6-migrate 命令时收到bash: rxjs-5-to-6-migrate: command not found。有什么想法吗？

@WilliamHampshire 你运行 npm install -g rxjs-tslint

是的，不知道它是什么@Joe

也许你没有最新的 tslint？

你知道如何在不使用 Angular cli 的情况下做到这一点吗？在我的项目中，我手动完成所有操作

【参考方案6】：

这就是我的工作方式。

我的环境：

Angular CLI 全局：6.0.0，本地：1.7.4，Angular：5.2，Typescript 2.5.3

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

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

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

如果您有 angular-material 5.4.2、ngx-translate 9.1.1、ng-bootstrap/ng-bootstrap 1.1.1，则可选：

ng update @angular/material //upgrade to 6.0.1

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

5npm 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

【参考方案7】：

只需使用官方升级指南，它会告诉您需要做什么以满足您自己的特殊需求：

https://update.angular.io/

【讨论】：

这应该是公认的答案，因为它回答了所有其他升级问题

【参考方案8】：

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

ng 更新@angular/cli ng 更新@angular/core npm install rxjs-compat (为了支持旧版本 rxjs 5.6 ) npm install -g rxjs-tslint（在代码中从 rxjs 5 更改为 rxjs 6 格式。全局安装，然后才可以使用） rxjs-5-to-6-migrate -p src/tsconfig.app.json （安装后我们必须在源代码中将其更改为rxjs6格式） npm uninstall rxjs-compat（最终删除）

【参考方案9】：

我必须重新运行 ng update @angular/cli 才能将 angular-cli.json 更改为 angular.json

【参考方案10】：

查看从 Angular 5 到 Angular 6 的分步升级详细信息。这些详细说明了您在升级过程中遇到的问题以及如何解决这些问题。

将您的节点版本更新到 8 或更高版本并安装最新的 Angular cli 通过 npm i -g @angular/cli@latest 在全球范围内使用。 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';

Observable 创建方法移至 rxjs

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

你准备好了。欢迎使用 Angular 6 :) Check my blog post here on how to upgrade

【参考方案11】：

只需几个步骤即可将 2/4/5 升级到 Angular 6。

npm uninstall --save-dev angular-cli
npm install --save-dev @angular/cli@latest
npm install

解决与“angular.json”相关的问题：-

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

商店迁移https://github.com/ngrx/platform/blob/master/MIGRATION.md#ngrxstore

RXJS 迁移https://www.academind.com/learn/javascript/rxjs-6-what-changed/

希望这对你有帮助:)

【参考方案12】：

先试试这个

ng update @angular/cli @angular/core

如果出错，试试这个

ng update @angular/cli @angular/core --allow-dirty

See here