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

Question

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

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

score 274 · Accepted Answer

从 Angular v6 升级到 Angular v7

Angular 7 版本已经发布官方 Angular 博客链接。有关详细信息，请访问官方 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 Material 的基本 Angular 应用程序的官方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-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 v6 发生了重大变化，因此首先使您的代码与最新的 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 配置格式已从 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 和 <2.8.0 但找到了 2.8.3”。运行以下命令：

npm install typescript@2.7.2

score 20 · Accepted Answer

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
服务

您可能需要更新 package.json 中的运行脚本，例如。如果您使用“应用程序”和“环境”等标志，这些标志已分别更新为“项目”和“配置”。

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

score 16 · Accepted Answer

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

https://update.angular.io/

score 8 · Accepted Answer

检查从 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 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';

Observable 创建方法移至 rxjs

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

你都准备好了。欢迎使用 Angular 6 :) 在此处查看我的博客文章，了解如何升级

score 4 · Accepted Answer

4

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

于 2018-06-02T22:24:24.137 回答

score 2 · Accepted Answer

完整指南

-----------------使用 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/

--------------------没有角-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

score 2 · Accepted Answer

请运行以下评论以从 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（最后删除）

score 1 · Accepted Answer

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

score 0 · Accepted Answer

0

只需运行以下命令：

ng update

注意：这不会全局更新。

于 2018-05-04T07:43:01.780 回答

score 0 · Accepted Answer

这就是我让它工作的方式。

我的环境：

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

score 0 · Accepted Answer

将 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-c hanged/

希望这会帮助你:)

score 0 · Accepted Answer

先试试这个

ng update @angular/cli @angular/core

如果有错误试试这个

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

看这里