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

Question

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

angularmigrationupgradeangular-ivy

119

随着Angular 6的到来，我想将我的Angular 5客户端应用程序升级或迁移到Angular 6，但是我找不到可以指导我的任何教程或资源。

据我所知，我只需要运行一个新的Angular CLI，然后将旧项目移动到新项目中。我了解到Angular 6正在使用一种名为Ivy的新渲染器。那么我是否需要根据Ivy更改我的项目呢？

- Abhishek Chokra

7

https://update.angular.io/ - lealceldeiro

12个回答

20

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 update @angular/core
npm install rxjs-compat
ng serve

如果您使用如“app”和“environment”等标志，则需要更新package.json中的运行脚本。这些已分别更新为“project”和“configuration”。

有关更详细的指南，请参阅https://update.angular.io/。

- Arjun Shankar

在第二步之后，我必须将以下 .json 文件（tsconfig、angular-cli.json、tslint）转换为UTF8格式，不带BOM。在那一步，我遇到了无效的JSON字符错误。 - Benjamin

16

只需使用官方升级指南，它将告诉您如何满足您自己的特定需求：

https://update.angular.io/

- Valentin Despa

1

这应该是被接受的答案，因为它回答了所有其他升级问题。 - theTechRebel

8

请查看从 Angular 5 升级到 Angular 6 的逐步升级详细信息。其中提供了有关升级过程中遇到的问题以及如何解决这些问题的详细信息。

将您的 node 版本更新到 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 update。
现在是最重要的部分。RxJS 升级和解决冲突。RxJS 在此版本中标准化了运算符和 Observable 创建器的导入。请运行 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 :) 点击此处查看我的博客文章，了解如何进行升级。

- Uday Vunnam

4

我需要重新运行ng update @angular/cli，才能将angular-cli.json更改为angular.json。

- Kris Bonev

2

请运行以下代码以从Angular 5更新到Angular6：

ng update @angular/cli
ng update @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（最终删除此内容）

- user2716958

2

完整指南

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

1. 全局和本地更新CLI

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

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

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

- bereket gebredingle

当我尝试运行rxjs-5-to-6-migrate命令时，出现了bash: rxjs-5-to-6-migrate: command not found的错误提示。有什么想法吗？ - Kyle Krzeski

1

@WilliamHampshire 你运行了 npm install -g rxjs-tslint 吗？ - Joe

也许你没有安装最新的tslint？ - Joe

1

你知道如何在不使用Angular CLI的情况下完成这个吗？在我的项目中，我一切都是手动完成的。 - Daniel

当我运行rxjs-5-to-6-migrate命令时，我得到了“无法找到任何可能的迁移”的错误信息。这句话的意思是什么？ - Karthikeyan Vellingiri

显示剩余3条评论

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/。

- Maksim B.

0

只需运行以下命令：

ng update

注意：这不会全局更新。

- Vinay Kumar

0

这是我让它工作的方法。

我的环境：

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 或 npm install @angular/cli

ng update //更新 Angular Package core/common/complier... 到 6.0.0
ng update @angular/cli //将 angular-cli.json 更改为 angular.json

如果您有 angular-material 5.4.2、ngx-translate 9.1.1、ng-bootstrap/ng-bootstrap 1.1.1，则可选执行以下步骤：

ng update @angular/material //升级到 6.0.1
npm install @ngx-translate/core@10.0.1 --save //将 ngX translate 升级到适用于 Angular 6 的 10.0.1

5 npm install --save @ng-bootstrap/ng-bootstrap@2.0.0 //为了使用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

- Ryan Huang

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ashish Jain · Accepted Answer

从Angular v6升级到Angular v7

Angular的版本7已经发布，官方Angular博客链接：Official Angular blog link。详细信息请访问官方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已经发布，详情请访问官方博客。下面是一般的升级步骤，但在更新之前和之后，您需要更改代码，使其可以在 v6 中正常工作，有关详细信息，请访问官方网站 https://update.angular.io。

升级步骤（主要摘自使用Angular Material的基本Angular应用程序的官方 Angular Update Guide）：

确保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-compat，因为它会增加包大小。有关更多信息，请参见此RxJS升级指南。

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升级指南了解更多信息。RxJS 6有破坏性变化，因此首先要使您的代码兼容最新的RxJS版本。
将NodeJS版本更新至8.9+（这是angular cli 6版本所需）
更新Angular CLI全局包至下一个版本。

npm uninstall -g @angular/cli
npm cache verify

如果 npm 版本小于 5，则使用 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 6.0.0-rc.2版本开始，Angular CLI的配置格式已更改，并且您现有的配置可以通过运行以下命令自动更新。它将删除旧的配置文件.angular-cli.json并将编写新的angular.json文件。

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

注意：如果您收到以下错误“Angular编译器需要TypeScript> = 2.7.2和＆lt; 2.8.0，但实际安装的却是2.8.3”，则运行以下命令：

npm install typescript@2.7.2