想要将项目从Angular v5升级到Angular v6 [英] Want to upgrade project from Angular v5 to Angular v6
问题描述
由于Angular 6在这里，我想将我的angular 5客户端应用程序升级或移动到angular 6，但是我没有任何可以指导我的教程或任何东西.
As Angular 6 is here, I want to upgrade or move my angular 5 client application to angular 6, but I'm not getting any tutorial or anything which can guide me through.
据我说，我只需要运行一个新的Angular CLI，然后将我的旧源代码移到新项目中即可.我读到Angular 6正在使用一个名为Ivy的新渲染器.我是否必须根据常春藤更改我的项目?
According to me I just need to run a new Angular CLI and then have to move my older source to new project. I read the Angular 6 is using a new renderer called Ivy. Will I have to change my project according to Ivy?
推荐答案
从Angular v6升级到Angular v7
版本7 的Angular已发布 https://update.angular.io .这些步骤将适用于使用Angular Material的基本angular 6应用程序.
Upgrade from Angular v6 to Angular v7
Version 7 of Angular has been released Official Angular blog link. 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
Upgrade from Angular v5 to Angular v6
Version 6 of Angular has been released Official Angular blog link. 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 .
升级步骤(主要从官方 Angular更新指南 获取)使用Angular Material的Angular应用程序):
Upgrade Steps (largely taken from the official Angular Update Guide for a basic Angular app using Angular Material):
-
如果未更新，请确保NodeJS版本为8.9 +.
Make sure NodeJS version is 8.9+ if not update it.
在全局和本地更新Angular cli，并通过运行以下命令将旧配置 .angular-cli.json 迁移到新的 angular.json 格式:
Update Angular cli globally and locally, and migrate the old configuration .angular-cli.json to the new angular.json format by running the following:
npm install -g @angular/cli
npm install @angular/cli
ng update @angular/cli
将所有Angular框架程序包更新到v6，以及正确的版本 运行以下命令，对RxJS和TypeScript进行操作:
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
通过运行以下命令将Angular材质更新为最新版本:
Update Angular Material to the latest version by running the following:
ng update @angular/material
RxJS v6对v5进行了重大更改，v6带来了向后兼容软件包rxjs-compat，该软件包将使您的应用程序正常运行，但是您应该重构TypeScript代码，以使其不依赖于rxjs-compat.要重构TypeScript代码，请运行以下命令:
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
注意:一旦所有依赖项都更新到RxJS 6，请删除rxjs- 兼容，因为它增加了包的大小.请参阅此 RxJS升级指南更多信息.
Note: Once all of your dependencies have updated to RxJS 6, remove rxjs- compat as it increases bundle size. please see this RxJS Upgrade Guide for more info.
npm uninstall rxjs-compat
运行ng serve进行检查.
如果您在构建时遇到错误，请参考 https://update.angular.io 了解详细信息.
Done run ng serve to check it.
If you get errors in build refer https://update.angular.io for detailed info.
从Angular v5升级到Angular 6.0.0-rc.5
-
将rxjs升级到6.0.0-beta.0，请参见此 RxJS升级指南以获取更多信息. RxJS v6发生了重大变化，因此请首先使您的代码与最新RxJS版本兼容.
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.
将NodeJS版本更新为8.9+(Angular cli 6版本需要此版本)
Update NodeJS version to 8.9+ (this is required by angular cli 6 version)
将Angular cli全局软件包更新为下一个版本.
Update Angular cli global package to next version.
npm uninstall -g @angular/cli
npm cache verify
如果npm版本是< 5然后使用npm cache clean
if npm version is < 5 then use npm cache clean
npm install -g @angular/cli@next
将package.json文件中的角度软件包版本更改为^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本地软件包更新为下一版本，并安装上述软件包.
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
Angular CLI配置格式已从angular cli 6.0.0-rc.2版本更改，并且可以通过运行以下命令来自动更新现有配置.它将删除旧的配置文件 .angular-cli.json ，并将写入新的 angular.json 文件.
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
注意:-如果出现以下错误"Angular Compiler需要TypeScript> = 2.7.2和< 2.8.0，但发现的是2.8.3".运行以下命令:
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 v5升级到Angular v6的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
