如何升级 Angular CLI 项目？

有用：使用官方 Angular 更新指南选择您当前的版本和您希望升级到的版本以获取相关升级指南。 https://update.angular.io/ 请参阅 GitHub 存储库 Angular CLI diff 以比较 Angular CLI 更改。 https://github.com/cexbrayat/angular-cli-diff/

2018 年 12 月 26 日更新：

使用上面有用部分中提到的官方 Angular Update Guide。它提供了最新的信息以及在升级过程中可能有用的其他资源的链接。

2018 年 8 月 5 日更新：

Angular CLI 1.7 引入了 ng update。

ng update 一个新的 Angular CLI 命令，可帮助简化让您的项目保持最新版本的过程。包可以定义将应用于您的项目的逻辑，以确保使用最新功能以及进行更改以减少或消除与重大更改相关的影响。可以在这里找到 ng update 的配置信息

1.7到6更新

CLI 1.7 不支持自动 v6 更新。通过包管理器手动安装@angular/cli，然后运行更新迁移示意图以完成该过程。

npm install @angular/cli@^6.0.0
ng update @angular/cli --migrate-only --from=1

2017 年 4 月 30 日更新：

1.0 更新

您现在应该遵循 Angular CLI migration guide

2017 年 4 月 3 日更新：

钢筋混凝土更新

您应该遵循 Angular CLI RC migration guide

2017 年 2 月 20 日更新：

请注意 1.0.0-beta.32 有重大更改并已删除 ng init and ng update

拉取请求 here 声明如下：

重大更改：删除 ng init 和 ng update 命令，因为它们当前的实现导致的问题多于解决的问题。更新功能将返回 CLI，在此之前需要手动更新应用程序。

angular-cli CHANGELOG.md 声明如下：

重大更改 - @angular/cli：删除 ng init 和 ng update 命令，因为它们当前的实现导致的问题多于解决的问题。 RC 发布后，我们将不再需要使用它们进行更新，因为该步骤将像安装最新版本的 CLI 一样简单。

2017 年 2 月 17 日更新：

Angular-cli 现在已添加到 NPM @angular 包中。您现在应该用以下命令替换上面的命令 -

全球套餐：

npm uninstall -g angular-cli @angular/cli
npm cache clean
npm install -g @angular/cli@latest

本地项目包：

rm -rf node_modules dist # On Windows use rmdir /s /q node_modules dist
npm install --save-dev @angular/cli@latest
npm install
ng init

原始答案

您应该按照 GitHub 上 README.md 中的步骤通过 angular-cli 更新 Angular。

他们来了：

更新 angular-cli

要将 angular-cli 更新到新版本，您必须同时更新全局包和项目的本地包。

全球套餐：

npm uninstall -g angular-cli
npm cache clean
npm install -g angular-cli@latest

本地项目包：

rm -rf node_modules dist tmp # On Windows use rmdir /s /q node_modules dist tmp
npm install --save-dev angular-cli@latest
npm install
ng init

运行 ng init 将检查 ng new 创建的所有自动生成文件中的更改，并允许您更新您的文件。为每个更改的文件提供四种选择：y（覆盖）、n（不覆盖）、d（显示文件和更新文件之间的差异）和 h（帮助）。

仔细阅读每个代码文件的差异，并在 ng init 完成后接受更改或手动合并它们。

---

JJB 的回答让我走上了正轨，但升级并不顺利。下面详细介绍我的过程。希望这个过程在未来变得更容易，并且可以使用 JJB 的答案或更简单的东西。

解决方案详情

我已经按照 JJB 的答案中捕获的步骤精确地更新了 angular-cli。但是，在运行 npm install 之后，angular-cli 被破坏了。即使尝试执行 ng version 也会产生错误。所以我不能执行 ng init 命令。请参阅下面的错误：

$ ng init
core_1.Version is not a constructor
TypeError: core_1.Version is not a constructor
    at Object.<anonymous> (C:\_git\my-project\code\src\main\frontend\node_modules\@angular\compiler-cli\src\version.js:18:19)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    ...

为了能够使用任何 angular-cli 命令，我必须手动更新我的 package.json 文件并将@angular 依赖项升级到 2.4.1，然后再执行一次 npm install。

在此之后，我能够做到 ng init。我更新了我的配置文件，但没有我的 app/* 文件。完成后，我仍然遇到错误。第一个在下面详述，第二个是相同类型的错误，但在不同的文件中。

错误中的错误遇到静态解析符号值。不支持函数调用。考虑将函数或 lambda 替换为对导出函数的引用（原始 .ts 文件中的位置 62:9），解析 C:/_git/my-project/code/src/main/frontend/src/app 中的符号 AppModule /app.module.ts

此错误与我的 AppModule 中的以下工厂提供程序有关

{ provide: Http, useFactory: 
    (backend: XHRBackend, options: RequestOptions, router: Router, navigationService: NavigationService, errorService: ErrorService) => {
    return new HttpRerouteProvider(backend, options, router, navigationService, errorService);  
  }, deps: [XHRBackend, RequestOptions, Router, NavigationService, ErrorService]
}

为了解决这个错误，我使用了导出的函数并对提供程序进行了以下更改。

    { 
      provide: Http, 
      useFactory: httpFactory, 
      deps: [XHRBackend, RequestOptions, Router, NavigationService, ErrorService]
    }

... // elsewhere in AppModule

export function httpFactory(backend: XHRBackend, 
                            options: RequestOptions, 
                            router: Router, 
                            navigationService: NavigationService, 
                            errorService: ErrorService) {
  return new HttpRerouteProvider(backend, options, router, navigationService, errorService);
}

概括

总结一下我理解的最重要的细节，需要进行以下更改：

使用 JJB 的答案（以及他们的 github 页面）中详述的步骤更新 angular-cli 版本。手动更新@angular 版本，angular-cli 版本 1.0.0-beta.24 似乎不支持 2.0.0 在 angular-cli 和 ng init 命令的帮助下，我更新了我的配置文件。我认为关键的变化是 angular-cli.json 和 package.json。请参阅底部的配置文件更改。在我引用它们之前对导出函数进行代码更改，如解决方案详细信息中所述。

关键配置更改

angular-cli.json 更改

{
  "project": {
    "version": "1.0.0-beta.16",
    "name": "frontend"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": "assets",
...

变成...

{
  "project": {
    "version": "1.0.0-beta.24",
    "name": "frontend"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
...

在考虑 ng-init 使用的版本的手动合并后，我的 package.json 看起来像这样。请注意，我的 Angular 版本不是 2.4.1，但我所做的更改是 2.3 中引入的组件继承，所以我对这些版本很好。原始的 package.json 有问题。

{
  "name": "frontend",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor",
    "build": "ng build",
    "buildProd": "ng build --env=prod"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "@angular/material": "^2.0.0-beta.1",
    "@types/google-libphonenumber": "^7.4.8",
    "angular2-datatable": "^0.4.2",
    "apollo-client": "^0.4.22",
    "core-js": "^2.4.1",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2",
    "google-libphonenumber": "^2.0.4",
    "graphql-tag": "^0.1.15",
    "hammerjs": "^2.0.8",
    "ng2-bootstrap": "^1.1.16"
  },
  "devDependencies": {
    "@types/hammerjs": "^2.0.33",
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/lodash": "^4.14.39",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.24",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.0.2",
    "typescript": "~2.0.3",
    "typings": "1.4.0"
  }
}

---

只需使用 Angular CLI 的内置功能

ng update

更新到最新版本。

---

根据此处http://angularjs.blogspot.co.uk/2017/03/angular-400-now-available.html的文档，您“应该”只能运行...

npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest --save

由于我的 zone.js 和 ngrx/store 库是旧版本，我尝试了它并遇到了一些错误。

将它们更新到最新版本 npm install zone.js@latest --save 和 npm install @ngrx/store@latest -save，然后再次运行角度安装对我有用。

---

消除 ：

npm uninstall -g angular-cli

重新安装（用纱线）

# npm install --global yarn
yarn global add @angular/cli@latest
ng set --global packageManager=yarn  # This will help ng-cli to use yarn

重新安装（使用 npm）

npm install --global @angular/cli@latest

另一种方法是不使用全局安装，并在 PATH 中添加 /node_modules/.bin 文件夹，或者使用 npm 脚本。升级会更软。

---

对我有用的解决方案：

删除 node_modules 和 dist 文件夹

（在 cmd 中）>> ng update --all --force

（在 cmd 中）>> npm install typescript@">=3.4.0 and <3.5.0" --save-dev --save-exact

（在 cmd 中）>> npm install --save core-js

评论 import 'core-js/es7/reflect';在 polyfill.ts 中

（在 cmd 中）>> ng 服务

---

要将 Angular CLI 更新到新版本，您必须同时更新全局包和项目的本地包。

全球套餐：

npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest

本地项目包：

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@latest
npm install

请参阅参考资料 https://github.com/angular/angular-cli

---