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

Question

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

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

Answer 1

从Angular v6升级到Angular v7

Angular的第7版已经发布官方Angular博客链接.有关详细信息,请访问官方角度更新指南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版已经发布官方Angular博客链接.我已经提到了下面的一般升级步骤,但是在更新之前和之后,您需要对代码进行更改以使其在v6中可行,有关详细信息,请访问官方网站https://update.angular.io.

升级步骤(主要取自使用Angular Material的基本Angular应用程序的官方Angular更新指南):

1. 如果没有更新,请确保NodeJS版本为8.9+.

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

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

3. 通过运行以下命令,将所有Angular框架包更新到v6,以及正确版本的RxJS和TypeScript:

   ng update @angular/core
   

4. 通过运行以下命令将Angular Material更新为最新版本:

   ng update @angular/material
   

5. 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,因为它会增加bundle大小.有关详细信息,请参阅此RxJS升级指南.

   npm uninstall rxjs-compat
   

6. 完成运行ng serve以检查它.
   如果您在构建中遇到错误,请参阅https://update.angular.io以获取详细信息.

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

1. 将rxjs升级到6.0.0-beta.0,请参阅此RxJS升级指南以获取更多信息.RxJS v6有重大变化,因此首先使您的代码与最新的RxJS版本兼容.

2. 将NodeJS版本更新为8.9+(这是angular cli 6版本所必需的)

3. 将Angular cli全局包更新到下一版本.

   npm uninstall -g @angular/cli
   npm cache verify
   

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

   npm install -g @angular/cli@next
   

4. 将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"
   }
   

5. 接下来将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 
   

6. 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> = 2.7.2且<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

这对我的一个小项目有用

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

您可能需要在package.json中更新运行脚本.例如.如果您使用"app"和"environment"等标志,则分别更新为"project"和"configuration".

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

Answer 3

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

https://update.angular.io/

Answer 4

检查从Angular 5到Angular 6的逐步升级详细信息.这些提供了有关升级期间遇到的问题以及解决方法的详细信息.

• 将节点版本更新为8或更高版本并通过npm i -g @ angular/cli @ latest在全球范围内安装最新的Angular cli.
• Angular 6使用angular.json作为配置文件而不是.anguar-cli.json.tslint也被改变了.有关最新配置详细信息,请访问https://github.com/angular/angular-cli/wiki/angular-workspace.您必须将任何现有配置移动到新配置文件.
• 为此,使用新的'your-project'创建另一个带有最新cli的虚拟项目,并使用您之前为项目使用的相同的默认值,例如前缀,样式等.使用cli https://github.com/angular/angular-cli/wiki/new创建新项目
• 使用 https://update.angular.io/检查当前版本的Angular→Angular 6中的更改内容.它提供了如何更改/修复它们的用法.
• 按照上述步骤复制/更新在step2中创建的angular.json文件.在项目中执行npm i以获取所有依赖项并执行npm update
• 现在是重要的一部分.RxJS升级和解决冲突.RxJS已经标准化了此版本的运算符和Observable创建者的导入.请执行npm i -g rxjs-tslint并在tslint.json中添加以下lint配置

{
  "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 --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 :) 在这里查看我的博客文章,了解如何升级