如何升级 Angular CLI 项目? [英] How to upgrade Angular CLI project?

查看：31
本文介绍了如何升级 Angular CLI 项目?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I'm attempting to upgrade my angular 2 project from 2.0.0 to 2.4.1. I understand that semantic versioning has been adopted since the 2.0.0 release and 2.x.x releases should be drop-in replacements. My experience seems to indicate otherwise. Maybe I just don't know what I'm doing but I have not found this to be straightforward...

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

My naive first approach was to manually update my @angular dependencies. You can reference my package.json below (update 1). I made these changes, then did an npm install and I got several warnings then got the following error when I tried to do an ng serve.

无法读取未定义的属性AssetUrl"

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 版本的手动方法......

So I went down the rabbit hole of trying to fix these warnings but I don't know how to fix all of them (e.g. @ngtools/webpack) and some of them appear to be in conflict with each other. So I abandoned the manual approach of updating my angular 2 version...

原始 package.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 依赖项进行更新后，我最终陷入了需要更新的其他依赖项的蜘蛛网，接下来我尝试只更新所有内容.

Attempt 2 - Use npm-check-updates

Since when I tried to cherry-pick my angular dependencies for updates I ended up in a spiderweb of other dependencies that needed to be updated, I next tried to just update everything.

基于这个答案，我尝试了以下操作:

Based on this answer I tried the following:

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

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

This went fine but when I tried ng serve I get the following error:

AppModule 中的错误不是 NgModule

ERROR in AppModule is not a NgModule

使用在此处收集的信息，我降级了我的打字稿版本，该错误出现了离开，但又出现了一个新错误.

Using information gathered here, I downgraded my typescript version, that error went away, but a new error popped up.

错误中的错误遇到静态解析符号值.对非导出函数的引用(原始文件中的位置 29:10.ts 文件)，解析 rest-paths.ts 中的符号 restPaths，解析符号app.module.ts 中的 AppModule，解析 app.module.ts 中的符号 AppModule

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

我一直在努力克服这些错误，但我遇到这么多麻烦的事实正在引发危险信号.

I've been fighting my way through these errors but the fact that I am having so much trouble is raising red flags.

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

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

Note that I have seen some suggestions about updating angular-cli projects that recommend uninstalling angular-cli and reinstalling it, then doing an ng init and overwriting your configuration files. This didn't work for me because I already had the latest version.

关于拥有最新 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 命令.

The statement about having the latest angular-cli was incorrect. I had angular-cli version 1.0.0-beta.16 whereas the latest at the time of this edit is 1.0.0-beta.24. Nevertheless, I did try to update my angular-cli and run ng init on my existing project. I notice now that I didn't follow the steps outlined on the angular-cli github page precisely. I skipped the npm install --save-dev angular-cli@latest, and I blew away all my node_modules instead of using the rm command they outline.

推荐答案

有用:

使用官方 Angular 更新指南 选择您当前的版本和您希望升级到的版本以获取相关信息升级指南.https://update.angular.io/

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/

请参阅 GitHub 存储库 Angular CLI diff 以比较 Angular CLI 更改.https://github.com/cexbrayat/angular-cli-diff/>

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

26/12/2018 更新:

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

Use the official Angular Update Guide mentioned in the useful section above. It provides the most up to date information with links to other resources that may be useful during the upgrade.

2018 年 8 月 5 日更新:

Angular CLI 1.7 引入了 ng update.

Angular CLI 1.7 introduced ng update.

ng 更新

新的 Angular CLI 命令可帮助简化让您的项目保持最新版本的过程.包可以定义将应用于您的项目的逻辑，以确保使用最新功能并进行更改以减少或消除与重大更改相关的影响.

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.

ng update 的配置信息可以在这里找到

Configuration information for ng update can be found here

1.7 到 6 更新

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

CLI 1.7 does not support an automatic v6 update. Manually install @angular/cli via your package manager, then run the update migration schematic to finish the process.

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

<小时>

2017 年 4 月 30 日更新:

1.0 更新

您现在应该遵循 Angular CLI 迁移指南

You should now follow the Angular CLI migration guide

2017 年 4 月 3 日更新:

RC 更新

您应该遵循 Angular CLI RC 迁移指南

You should follow the Angular CLI RC migration guide

2017 年 2 月 20 日更新:

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

Please be aware 1.0.0-beta.32 has breaking changes and has removed ng init and ng update

拉取请求此处声明如下:

重大变化: 删除 ng init &ng update 命令，因为它们当前的实现导致的问题多于解决的问题.更新功能将返回到 CLI，直到手动更新需要完成的应用程序.

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 声明如下:

The angular-cli CHANGELOG.md states the following:

重大变化- @angular/cli: 删除 ng init &ng update 命令，因为它们当前的实现导致的问题多于解决的问题.一次RC 已发布，我们将不再需要使用它们进行更新，因为这一步就像安装最新版本的 CLI 一样简单.

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 包中.您现在应该用以下命令替换上面的命令 -

Angular-cli has now been added to the NPM @angular package. You should now replace the above command with the following -

全局包:

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.

You should follow the steps from the README.md on GitHub for updating angular via the angular-cli.

他们在这里:

更新 angular-cli

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

To update angular-cli to a new version, you must update both the global package and your project's local package.

全局包:

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(帮助).

Running ng init will check for changes in all the auto-generated files created by ng new and allow you to update yours. You are offered four choices for each changed file: y (overwrite), n (don't overwrite), d (show diff between your file and the updated file) and h (help).

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

Carefully read the diffs for each code file, and either accept the changes or incorporate them manually after ng init finishes.

这篇关于如何升级 Angular CLI 项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆