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

查看：70
本文介绍了如何升级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

自从我尝试挑选角度依赖进行更新时，我最终陷入了需要更新的其他依赖的蜘蛛网中，接下来我尝试仅更新所有内容.

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服务时，出现以下错误:

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.

ERROR in Error遇到静态解析符号值的情况. 引用非导出功能(原始位置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并在现有项目上运行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差异以比较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.

更新日期:08/05/2018:

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.

可以在此处

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

更新30/04/2017:

1.0更新

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

You should now follow the Angular CLI migration guide

更新日期:04/03/2017:

RC更新

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

You should follow the Angular CLI RC migration guide

更新20/02/2017:

请注意，1.0.0-beta.32发生了重大更改，并删除了ng init and ng update

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

拉取请求此处指出以下内容:

The pull request here states the following:

BREAKING CHANGE::删除ng init& ng更新命令，因为它们的当前实现引起的问题多于解决的问题. 更新功能将返回到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:

BREAKING更改 -@ angular/cli:删除ng init& ng更新命令，因为它们的当前实现引起的问题多于解决的问题.一次 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

原始答案

您应按照自述文件中的步骤进行操作.md 在GitHub上通过 angular-cli 来更新角度.

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天全站免登陆