angular - 如何升级 Angular CLI 项目？

Question

我正在尝试将我的 Angular 2 项目从 2.0.0 升级到 2.4.1。我知道自 2.0.0 版本以来已经采用了语义版本控制，2.x.x 版本应该是直接替换。我的经验似乎表明并非如此。也许我只是不知道自己在做什么，但我发现这并不简单......

尝试 1 - 手动版本升级

我天真的第一种方法是手动更新我的 @angular 依赖项。您可以在下面引用我的 package.json(更新 1)。我进行了这些更改，然后执行了 npm install 并收到了几个警告，然后在我尝试执行 ng serve 时出现了以下错误。

Cannot read property 'AssetUrl' of undefined

还有我的警告...

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.15: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN @angular/core@2.4.1 requires a peer of rxjs@^5.0.1 but none was installed.
npm WARN @angular/core@2.4.1 requires a peer of zone.js@^0.7.2 but none was installed.
npm WARN @angular/http@2.4.1 requires a peer of rxjs@^5.0.1 but none was installed.
npm WARN @angular/compiler-cli@0.6.4 requires a peer of @angular/compiler@2.0.2 but none was installed.
npm WARN @angular/compiler-cli@0.6.4 requires a peer of @angular/platform-server@2.0.2 but none was installed.
npm WARN @angular/compiler-cli@0.6.4 requires a peer of @angular/core@2.0.2 but none was installed.
npm WARN @ngtools/webpack@1.2.1 requires a peer of @angular/compiler-cli@^2.3.1 but none was installed.
npm WARN @ngtools/webpack@1.2.1 requires a peer of @angular/tsc-wrapped@^0.5.0 but none was installed.
npm WARN @ngtools/webpack@1.2.1 requires a peer of webpack@^2.1.0-beta.25 but none was installed.

所以我陷入了试图修复这些警告的困境，但我不知道如何修复所有警告(例如@ngtools/webpack)，其中一些似乎相互冲突。所以我放弃了更新我的 angular 2 版本的手动方法......

原始包.json

{
  "name": "frontend",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor",
    "build": "ng build",
    "buildProd": "ng build --env=prod"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/material": "^2.0.0-alpha.9-experimental-pizza",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@types/google-libphonenumber": "^7.4.8",
    "angular2-datatable": "^0.4.2",
    "apollo-client": "^0.4.22",
    "core-js": "^2.4.1",
    "google-libphonenumber": "^2.0.4",
    "graphql-tag": "^0.1.15",
    "hammerjs": "^2.0.8",
    "ng2-bootstrap": "^1.1.16",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.2",
    "zone.js": "^0.6.26"
  },
  "devDependencies": {
    "@types/hammerjs": "^2.0.33",
    "@types/jasmine": "^2.2.30",
    "@types/lodash": "^4.14.39",
    "angular-cli": "1.0.0-beta.16",
    "codelyzer": "~0.0.26",
    "jasmine-core": "2.4.1",
    "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.9",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "2.0.2",
    "typings": "1.4.0"
  }
}

package.json 的更新 1

{
  "name": "frontend",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor",
    "build": "ng build",
    "buildProd": "ng build --env=prod"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.4.1",
    "@angular/compiler": "2.4.1",
    "@angular/core": "2.4.1",
    "@angular/forms": "2.4.1",
    "@angular/http": "2.4.1",
    "@angular/material": "^2.0.0-alpha.9-experimental-pizza",
    "@angular/platform-browser": "2.4.1",
    "@angular/platform-browser-dynamic": "2.4.1",
    "@angular/router": "3.0.0",
    "@types/google-libphonenumber": "^7.4.8",
    "angular2-datatable": "^0.4.2",
    "apollo-client": "^0.4.22",
    "core-js": "^2.4.1",
    "google-libphonenumber": "^2.0.4",
    "graphql-tag": "^0.1.15",
    "hammerjs": "^2.0.8",
    "ng2-bootstrap": "^1.1.16",
    "rxjs": "5.0.1",
    "ts-helpers": "^1.1.2",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@types/hammerjs": "^2.0.33",
    "@types/jasmine": "^2.2.30",
    "@types/lodash": "^4.14.39",
    "angular-cli": "1.0.0-beta.16",
    "codelyzer": "~0.0.26",
    "jasmine-core": "2.4.1",
    "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.9",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "2.0.2",
    "typings": "1.4.0"
  }
}

尝试 2 - 使用 npm-check-updates

因为当我试图挑选我的 Angular 依赖项进行更新时，我最终陷入了其他需要更新的依赖项的蜘蛛网中，我接下来尝试只更新所有内容。

基于 this answer我尝试了以下方法:

npm i -g npm-check-updates
npm-check-updates -u
npm install

一切顺利，但是当我尝试 ng serve 时，出现以下错误:

ERROR in AppModule is not a NgModule

使用收集到的信息 here ，我降级了我的 typescript 版本，那个错误消失了，但弹出了一个新错误。

ERROR in Error encountered resolving symbol values statically. Reference to a non-exported function (position 29:10 in the original .ts file), resolving symbol restPaths in rest-paths.ts, resolving symbol AppModule in app.module.ts, resolving symbol AppModule in app.module.ts

我一直在努力解决这些错误，但事实上我遇到了这么多麻烦，这是一个危险信号。

有人可以帮忙吗？我是不是采取了错误的方法？

请注意，我看到了一些关于更新 angular-cli 项目的建议，这些建议建议卸载 angular-cli 并重新安装它，然后执行 ng init 并覆盖您的配置文件。这对我不起作用，因为我已经有了最新版本。

编辑:关于拥有最新的 angular-cli 的说法是不正确的。我有 angular-cli version 1.0.0-beta.16 而在这次编辑时最新版本是 1.0.0-beta.24。尽管如此，我确实尝试更新我的 angular-cli 并在我现有的项目上运行 ng init 。我现在注意到我没有严格按照 angular-cli github 页面上概述的步骤进行操作。我跳过了 npm install --save-dev angular-cli@latest，并放弃了我所有的 node_modules，而不是使用他们概述的 rm 命令。

Answer 1

USEFUL:

Use the official Angular Update Guide select your current version and the version you wish to upgrade to for the relevant upgrade guide. https://update.angular.io/

See GitHub repository Angular CLI diff for comparing Angular CLI changes. https://github.com/cexbrayat/angular-cli-diff/

2018 年 12 月 26 日更新:

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

2018 年 8 月 5 日更新:

Angular CLI 1.7 引入了ng update。

ng update

A new Angular CLI command to help simplify keeping your projects up to date with the latest versions. Packages can define logic which will be applied to your projects to ensure usage of latest features as well as making changes to reduce or eliminate the impact related to breaking changes.

Configuration information for ng update can be found here

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 日更新:

RC 更新

您应该遵循 Angular CLI RC migration guide

---

2017 年 2 月更新:

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

拉取请求 here陈述如下:

BREAKING CHANGE: Removing the ng init & ng update commands because their current implementation causes more problems than it solves. Update functionality will return to the CLI, until then manual updates of applications will need done.

angular-cli CHANGELOG.md陈述如下:

BREAKING CHANGES - @angular/cli: Removing the ng init & ng update commands because their current implementation causes more problems than it solves. Once RC is released, we won't need to use those to update anymore as the step will be as simple as installing the latest version of the 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

---

原始答案

您应该按照 README.md 中的步骤进行操作在 GitHub 上通过 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 完成后手动合并它们。