从Angular v6升级到Angular v7

Question

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

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

Answer 1

从Angular v6升级到Angular v7

Angular的

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

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

从Angular v5升级到Angular v6

Angular的

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

升级步骤（主要取自使用Angular Material的基本Angular应用程序的official 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 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版本是＆lt; 5然后使用npm cache clean
```
npm install -g @angular/cli@next
```

将package.json文件中的angular packages版本更改为^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 Compiler需要TypeScript＆gt; = 2.7.2和＆lt; 2.8.0，而是找到2.8.3”。运行以下命令：

npm install typescript@2.7.2

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

您可能需要在package.json中更新运行脚本例如。如果你使用像＃34; app＆＃34;和＆＃34;环境＆＃34; 这些已更新为＆＃34; project＆＃34;和＆＃34;配置＆＃34;分别

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

Answer 3

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

https://update.angular.io/

Answer 4

检查从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 最新配置细节。你必须移动任何现有的配置到新配置文件。
要做到这一点，请创建另一个使用新的'你的项目'和同样的最新cli虚拟项目您之前为项目使用的默认值，例如前缀，样式等。使用cli创建新项目 https://github.com/angular/angular-cli/wiki/new
使用 https://update.angular.io/检查您的更改内容当前版本的Angular→Angular 6.它提供了如何使用的方法改变/修复它们。
按照上述步骤复制/更新在step2中创建的angular.json文件。在你的项目中，我要做到了所有依赖项并执行npm update
现在很重要。 RxJS 升级和解决冲突。 RxJS已标准化进口此版本的运算符和Observable创建者。做npm i -g rxjs-tslint并在tslint.json

{
  "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
  }
}

现在运行lint --fix。这修复了一些项目，但大多数剩余的问题将突出显示，您必须手动修复它。

运营商名称更改：

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

所有运营商都转移到了rxjs /运营商

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

可观察的创建方法移至rxjs

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

你们都已经准备好了。欢迎来到Angular 6：） Check my blog post here on how to upgrade

Answer 5

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

Answer 6

请运行以下评论以更新Angular 5中的Angular 6

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（最后删除）

Answer 7

正如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/

的好文章

Answer 8

完整指南

-----------------使用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.Update dependencies

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

Answer 9

只需运行以下命令：

ng update

注意：这不会全局更新。

Answer 10

这就是我的工作方式。

我的环境：

Angular CLI Global：6.0.0，Local：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

如果您有角度材料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

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

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

希望这对您有帮助：）

Answer 12

先试试这个

ng update @angular/cli @angular/core

如果有错误试试这个

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

See here

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

12 个答案:

从Angular v6升级到Angular v7

从Angular v5升级到Angular v6

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

完整指南

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

1。全局和本地更新CLI

2.Update dependencies

Angular 6现在依赖于TypeScript 2.7和RxJS 6

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