想要升级项目从角5版本到角6版本

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

据我所说，我只需要运行一个新的角 CLI，然后必须移动我的老来源到新的项目。我听说 Angular 6用了一种叫 Ivy 的渲染器。我必须根据艾薇改变我的项目吗？

113611 次浏览
小开
最佳答案

从角 V6升级到角 V7

Version 7 of Angular has been released 官方角度博客链接. Visit official angular update guide https://update.angular.io for detailed information. These steps will work for basic angular 6 apps using Angular Material.

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

从 Angular v5升级到 Angular v6

版本6 的 Angular 已经发布了 官方角度博客链接。 I have mentioned general upgrade steps below, but before and after the update you need to make changes in your code to make it workable in v6, for that detailed information visit official website https://update.angular.io .

升级步骤(主要取自 官方网站 < em > 角度更新指南 的基本角度应用程序使用角度材料) :

  1. 如果没有更新，请确保 NodeJS 版本是8.9 + 。

  2. 在全球和本地更新角点，并通过运行以下命令将旧配置 .angular-cli.json迁移到新的 Angular Json格式:

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

  3. Update all of your Angular framework packages to v6,and the correct version of RxJS and TypeScript by running the following:

    ng update @angular/core

  4. Update Angular Material to the latest version by running the following:

    ng update @angular/material

  5. RxJS v6 has major changes from v5, v6 brings backwards compatibility package rxjs-compat that will keep your applications working, but you should refactor TypeScript code so that it doesn't depend on rxjs-compat. To refactor TypeScript code run following:

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

    注意: 一旦所有的依赖项都更新到 RxJS6，删除 RxJS- Compat 因为它增加了捆绑包的大小。请参阅这个 升级指南了解更多信息。

    npm uninstall rxjs-compat

  6. Done run ng serve to check it.
    If you get errors in build refer https://update.angular.io for detailed info.

Upgrade from Angular v5 to Angular 6.0.0-rc.5

  1. Upgrade rxjs to 6.0.0-beta.0, please see this RxJS Upgrade Guide for more info. RxJS v6 has breaking change hence first make your code compatible to latest RxJS version.

  2. Update NodeJS version to 8.9+ (this is required by angular cli 6 version)

  3. Update Angular cli global package to next version.

    npm uninstall -g @angular/cli
npm cache verify

    如果 npm 版本 < 5，则使用 npm cache clean

    npm install -g @angular/cli@next

  4. Change angular packages versions in package.json file to ^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"
}

  5. Next update Angular cli local package to next version and install above mentioned packages.

    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

  6. The Angular CLI configuration format has been changed from angular cli 6.0.0-rc.2 version, and your existing configuration can be updated automatically by running the following command. It will remove old config file .angular-cli.json and will write new angular.json file.

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

Note :- If you get following error "The Angular Compiler requires TypeScript >=2.7.2 and <2.8.0 but 2.8.3 was found instead". run following command :

npm install typescript@2.7.2
小开

Angular 6 has just been released.

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

这是我的一个小项目的成果

  1. Npm install-g@angle/cli
  2. Npm install@angle/cli
  3. ng update @angular/cli --migrate-only --from=1.7.0
  4. Ng update@angle/core
  5. npm install rxjs-compat
  6. ng serve

您可能需要更新 package.json 中的运行脚本 例如，如果你使用“应用程序”和“环境”这样的标志 这些已经分别更新为“ project”和“ configuration”。

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

小开

只需运行以下命令:

ng update

注意: 这不会全局更新。

小开

正如维奈库马尔指出，它不会更新全球安装角 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

I wrote a good article about installation/updating Angular CLI http://bmnteam.com/angular-cli-installation/

小开

完整的指南

-----------------With angular-cli--------------------------

1. 在全球和本地更新 CLI

  1. 使用 NPM (确保节点版本8 +)

    Npm uninstall-g@angle/cli Npm 缓存清空 Npm install-g@angle/cli@last Npm i@angle/cli —— save

  2. Using Yarn

    纱线去角 纱线整体加@棱/角 纱线加@棱/角

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-shift

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/

————————————没有角——立————————————

因此必须手动更新 package.json文件。

package.json screenshoot of upgrade packages

那就快跑

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

我就是这么做的。

我的环境:

角度 CLI 全局: 6.0.0，局部: 1.7.4，角度: 5.2，类型脚本2.5.3

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

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

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

optional if you have angular-material 5.4.2, ngx-translate 9.1.1, ng-bootstrap/ng-bootstrap 1.1.1:

  1. ng update @angular/material //upgrade to 6.0.1

  2. 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

If you use Observable and get the error:

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'.

更改: < code > import { Obable } from“ rxjs/Observer”; import { of } from‘ rxjs/Observer/of’;

敬

import { Observable, of } from "rxjs";

角度 CLI 问题: https://github.com/angular/angular-cli/issues/10621

小开

Just use the official upgrade guide which will tell you what you need to do for your own particular needs:

Upgrade angular

https://update.angular.io/

小开

请运行下面的评论，从角度5更新到角度6

  1. 更新@angle/cli
  2. Ng update@angle/core
  3. Npm 安装 rxjs-compat (为了支持旧版本的 rxjs 5.6)
  4. Npm install-g rxjs-tslint (在代码中从 rxjs 5更改为 rxjs 6格式。全局安装，然后才会工作)
  5. Rxjs-5-to-6-shift-p src/tsconfig.app.json (安装之后，我们必须在源代码中将其更改为 rxjs6格式)
  6. Npm 卸载 rxjs-compat (最后删除它)
小开

I had to re-run 更新@angle/cli for angular-cli.json to be changed to angular.json

小开

检查一步一步的升级细节，从角5到角6。它们提供了有关升级过程中遇到的问题以及如何解决这些问题的详细信息。

{
"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
}
}
  • 现在运行线头-修复。这修复了一些项目，但大多数剩余的问题将突出显示，您必须手动修复它。

更改名称:

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

所有运算符都转移到 rxjs/运算符

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

可观察的创建方法被移动到 rxjs

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

都准备好了，欢迎来到角度6:)点击这里查看我的博客文章，看看如何升级

小开

There are few steps to upgrade 2/4/5 to 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/

希望这能帮到你:)

小开

先试试这个

ng update @angular/cli @angular/core

如果得到错误尝试这一点

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

看这里


提交答案