随着Angular 6的到来,我想将我的Angular 5客户端应用程序升级或迁移到Angular 6,但是我找不到可以指导我的任何教程或资源。
据我所知,我只需要运行一个新的Angular CLI,然后将旧项目移动到新项目中。我了解到Angular 6正在使用一种名为Ivy的新渲染器。那么我是否需要根据Ivy更改我的项目呢?
随着Angular 6的到来,我想将我的Angular 5客户端应用程序升级或迁移到Angular 6,但是我找不到可以指导我的任何教程或资源。
据我所知,我只需要运行一个新的Angular CLI,然后将旧项目移动到新项目中。我了解到Angular 6正在使用一种名为Ivy的新渲染器。那么我是否需要根据Ivy更改我的项目呢?
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 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获取详细信息。
将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和< 2.8.0,但实际安装的却是2.8.3”,则运行以下命令:
npm install typescript@2.7.2
bash: rxjs-5-to-6-migrate: command not found
的错误提示。你有什么想法吗? - Kyle Krzesking update @angular/core
时,我会收到错误消息Invalid range: "*"
。 - smknpm install @angular-devkit/build-angular --save-dev
来解决它。除此之外,我还必须更新使用先前rxjs-compat的库,例如ng update @ngx-translate/core
、ng update @ng-bootstrap/ng-bootstrap
,因为其中一些没有得到正确的更新。 - Arsen KhachaturyanAngular 6刚刚发布。
https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4
以下是适用于我其中一个较小项目的操作步骤:
如果您使用如“app”和“environment”等标志,则需要更新package.json中的运行脚本。 这些已分别更新为“project”和“configuration”。
有关更详细的指南,请参阅https://update.angular.io/。
请查看从 Angular 5 升级到 Angular 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 / operators
import { map, filter, reduce } from 'rxjs/operators';
可观察对象创建方法已移至rxjs
import { Observable, Subject, of, from } from 'rxjs';
你已经准备就绪。欢迎使用Angular 6 :) 点击此处查看我的博客文章,了解如何进行升级。
我需要重新运行ng update @angular/cli,才能将angular-cli.json更改为angular.json。
使用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
ng update @angular/cli
ng update @angular/core
ng update @angular/material
ng update rxjs
通常这意味着您必须更新使用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/
因此,您需要手动更新package.json
文件。
然后运行
npm update
npm install --save rxjs-compat
npm i -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json
bash: rxjs-5-to-6-migrate: command not found
的错误提示。有什么想法吗? - Kyle Krzeskinpm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest
npm install --save rxjs-compat
我写了一篇关于安装/更新Angular CLI的好文章http://bmnteam.com/angular-cli-installation/。只需运行以下命令:
ng update
注意:这不会全局更新。
这是我让它工作的方法。
我的环境:
Angular CLI 全局版本:6.0.0,本地版本:1.7.4,Angular 版本:5.2,Typescript 版本:2.5.3
注意:要启用
ng Update
,您需要先安装 Angular CLI 6.0npm 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