65.9K
CodeProject 正在变化。 阅读更多。
Home

将项目从 Angular 5 升级到 Angular 6 的 3 个步骤

MukeshKumarTech
starIconstarIcon
emptyStarIcon
starIcon
emptyStarIconemptyStarIcon

2.08/5 (4投票s)

2018 年 9 月 20 日

CPOL

4分钟阅读

viewsIcon

10667

本文将为您提供有关如何将 Angular 5 项目升级到 Angular 6 的逐步说明。

引言

众所周知，Google 刚刚发布了 Angular 的最新版本 Angular 6，其中包含许多新功能。每个人都渴望学习新功能以及如何创建 Angular 6 CLI 项目。但是，本文既不介绍 Angular 6 的最新功能，也不介绍如何创建 Angular 6。我们将为这些主题撰写单独的文章。基本上，本文将提供有关如何将现有 Angular 5 CLI 项目升级到 Angular 6 CLI 项目的逐步信息。如果您的 Angular 应用程序已经是版本 5，并且您希望使用最新版本 6 升级 Angular 5 项目以利用所有新功能，那么本文适合您。

先决条件

  1. 已安装的 Node.JS 版本应为 8 或更高版本。可以通过命令提示符中的 `node -v` 命令检查 Node.JS 版本。
  2. 如果 Angular 2/4 使用 HttpModule 和 Http 服务，请将其转换为 HttpClientModule 和 HttpClient。

注意：现在动画包是 @angular/animations 的一部分

在详细介绍之前，您必须以管理员模式打开 CMD（命令提示符），这样在执行命令时就不会遇到任何与访问相关的问题。并逐步按照每个步骤将您的 Angular 5 CLI 项目转换为 Angular 6 CLI 项目。那么，让我们开始吧。

步骤 1：在本地和全局更新 Angular CLI。

首先，您需要更新的是 Angular CLI（命令行界面）。您必须在本地和全局更新 CLI。因此，要全局更新 Angular CLI，您应该使用以下命令。

npm install @angular/cli -g

现在，是时候更新项目特定的 Angular CLI 了，这意味着本地更新。因此，移动到您当前的项目文件夹，并使用以下命令在本地更新 angular/cli。

npm install @angular/cli

现在使用以下命令更新您的 @angular/cli

ng  update @angular/cli

如果它成功运行，那对您来说很好，您可以转到步骤 2。但是，您可能会遇到以下错误。

错误：证书链中的自签名证书

互联网上有不同的解决方案，但其中一些解决方案适用于您。您可以在这个 StackOverflow 线程中找到大多数解决方案列表。

对于此演示，可行的解决方案是将注册表设置为如下所示。

npm config set registry="http://registry.npmjs.org/"

现在再次运行 @angular/cli 的更新命令，如下所示。如果发现任何漏洞包，请使用 “npm audit fix” 修复它们。

ng  update @angular/cli

成功运行 @angular/cli 的更新命令后，它将从项目中删除 angular-cli.json 并添加新文件 angular.json 并更新其他配置文件。

步骤 2：更新核心包

现在是时候更新 Angular Core 包和 RxJS 包了（如果使用）。您可以分别使用以下命令。

ng update @angular/core

ng update rxjs

一旦上述命令成功执行，您将发现所有核心框架包都已更新。要确认这一点，您可以检查 package.json。

注意：要检查是否有任何未正确更新的内容。运行命令 `ng update`。如果遗漏了任何内容，它会给您正确的消息。

因此，您的最终 Package.json 将如下所示。

<code>{
  "name": "@coreui/angular",
  "version": "1.0.6",
  "description": "Angular 5 to 6", 
  "copyright": "",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/core": "^0.4.5",
    "@angular/common": "6.1.0",
    "@angular/compiler": "6.1.0",
    "@angular/core": "6.1.0",
    "@angular/forms": "6.1.0",
    "@angular/http": "6.1.0",
    "@angular/platform-browser": "6.1.0",
    "@angular/platform-browser-dynamic": "6.1.0",
    "@angular/router": "6.1.0",
    "@angular/upgrade": "6.1.0",
    "ag-grid": "^17.1.1",
    "ag-grid-angular": "^17.1.0",
    "angular-split": "^1.0.0-rc.3",
    "bootstrap": "^4.0.0-beta.2",
    "chart.js": "^2.7.2",
    "core-js": "2.5.1",
    "file-saver": "^1.3.3",
    "font-awesome": "^4.7.0",
    "jquery": "^3.3.1",
    "moment": "^2.22.2",
    "mydatepicker": "^2.6.3",
    "ng2-charts": "1.6.0",
    "ngx-bootstrap": "^2.0.4",
    "ngx-order-pipe": "^2.0.1",
    "ngx-pagination": "^3.1.0",
    "node": "^9.4.0",
    "popper.js": "^1.14.1",
    "rxjs": "6.2.2",
    "rxjs-compat": "^6.0.0-rc.0",
    "simple-line-icons": "^2.4.1",
    "ts-helpers": "1.1.2",
    "xlsx": "^0.13.3",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.7.0",
    "@angular/cli": "^6.1.1",
    "@angular/compiler-cli": "6.1.0",
    "@types/jasmine": "2.6.3",
    "@types/node": "8.0.50",
    "codelyzer": "4.0.1",
    "jasmine-core": "2.8.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "1.7.1",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "1.3.0",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "protractor": "^5.4.0",
    "ts-node": "3.3.0",
    "tslint": "5.8.0",
    "typescript": "2.9.2"
  },
  "engines": {
    "node": ">= 6.9.0",
    "npm": ">= 3.0.0"
  }
}</code>

步骤 3：安装 NPM 包

完成以上两个步骤后，您已更新了配置文件。现在，下一步是删除包含旧包及其依赖项的 node_modules 文件夹，并使用以下命令再次安装所有包。

npm install

注意：如果您已经手动对任何包的某些文件进行了任何额外的更改，请在运行上述命令之前尝试保留该包文件夹的备份。

一旦上述命令成功执行并且所有 NPM 包都已安装，请尝试构建以确保一切正常，命令如下。

ng build –prod

一旦您成功构建，就意味着您已将 Angular 5 应用程序升级到 Angular 6。现在使用 ng serve 命令运行项目。

如果您的 Angular 项目有任何其他版本并且仍然想要升级它，那么您可以访问以下 URL。

https://update.angular.io/

在这里，您将获得所有指导，以将现有 Angular 版本项目升级到预期的 Angular 版本项目。

转到上述 URL，选择您现有的 Angular 项目版本和您希望升级到的预期 Angular 版本。除此之外，您可以定义您的应用程序复杂性。这样您就可以获得更详细的指南，并在最后单击“Show me how to update”，您将获得“Angular Update Guide”来更新您的项目。因此，通过这种方式，您可以将任何 Angular 版本项目升级到您愿意的版本项目。

结论

所以，今天我们学习了如何将现有的 Angular 5 项目升级到 Angular 6。

我希望这篇文章对您有所帮助。请使用评论发表您的反馈，这有助于我改进自己以进行下一篇文章。如果您有任何疑问，请在评论区提出您的疑问或查询，如果您喜欢这篇文章，请与您的朋友分享。谢谢

© . All rights reserved.