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

Question

因为 Angular 6 在这里，我想升级或移动我的 angular 5 客户端应用程序到 angular 6，但我没有得到任何教程或任何可以引导我通过。

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

Answer 1

从 Angular v6 升级到 Angular v7

Angular 的第 7 版 已发布 Official Angular blog link. Visit official angular update guide 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 版 已发布 Official Angular blog link。我在下面提到了一般的升级步骤，但是在更新之前和之后，您需要更改代码以使其在 v6 中可用，有关详细信息，请访问官方网站 https://update.angular.io。

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

如果不更新请确保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 版本 < 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版本更改，您现有的配置可以通过[=148自动更新=]宁以下命令。它将删除旧的配置文件 .angular-cli.json 并写入新的 angular.json 文件。

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

注意：- 如果出现以下错误 "The Angular Compiler requires TypeScript >=2.7.2 and <2.8.0 but 2.8.3 was found instead"。运行以下命令：

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 安装@angular/cli
ng update @angular/cli --migrate-only --from=1.7.0
ng 更新@angular/core
npm 安装 rxjs-compat
服务

您可能需要在 package.json 中更新您的运行脚本例如。如果你使用像 "app" 和 "environment" 这样的标志这些已分别更新为 "project" 和 "configuration"。

请参阅 https://update.angular.io/ 以获得更详细的指南。

Answer 3

只需运行以下命令：

ng update

注意：这不会在全球范围内更新。

Answer 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

我写了一篇关于 installation/updating Angular CLI http://bmnteam.com/angular-cli-installation/

的好文章

Answer 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

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

2.Update 依赖项

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

参考这个linkhttps://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 6

这就是我的工作方式。

我的环境：

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

Note: To enable ng Update you need to install Angular CLI 6.0 first 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

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 7

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

https://update.angular.io/

Answer 8

请运行以下评论从Angular5

更新到Angular6

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

Answer 9

我不得不重新运行 ng update @angular/cli for angular-cli.json 改为angular.json

Answer 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. 它提供了如何使用 change/fix 他们。
按照上述步骤 copy/update angular.json 在步骤 2 中创建的文件。在您的项目中执行 npm i 以获取所有依赖项并执行 npm update
现在是重要的部分。接收脚本升级和解决冲突。 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
  }
}

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

运营商名称更改：

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

Answer 11

将 2/4/5 升级到 Angular6 的步骤很少。

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

Want to upgrade project from Angular v5 to Angular v6

migration

upgrade

angular

angular-ivy