我正在try 将我的Angular 2项目从2.0.0升级到2.4.1.据我所知,语义版本控制从2.0.0版开始就被采用了,2.x.x版应该是替代版本.我的经验似乎表明并非如此.也许我只是不知道我在做什么,但我没有发现这是直截了当的……

try 1-手动版本升级

我天真的第一个方法是手动更新我的@angular个依赖项.您可以参考下面的My Package.json(更新1).我做了这些更改,然后做了npm install,我得到了几个警告,然后当我try 做ng serve时,得到了以下错误.

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

我的警告是...

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

Original 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"
  }
}

Update 1 of 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.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"
  }
}

try 2-使用npm判断更新

因为当我试图为更新挑选Angular 依赖项时,我最终遇到了一个蜘蛛网,里面有其他需要更新的依赖项,接下来我try 只更新所有内容.

基于this answer,我try 了以下方法:

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

这很好,但当我try ng serve时,我得到了以下错误:

AppModule中的错误不是NgModule

使用收集到的信息,我降低了打字脚本的版本,这个错误消失了,但出现了一个新的错误.

静态解析符号值时遇到错误.

我一直在努力克服这些错误,但事实上,我有这么多的麻烦是提高危险信号.

Can anybody help? Am I taking the wrong approach?

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

Edit: The statement about having the latest angular-cli was incorrect. I had 100 whereas the latest at the time of this edit is 101. 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 102, and I blew away all my node_modules instead of using the rm command they outline.

推荐答案

USEFUL:

使用官方Angular Update Guide Select 您当前的版本和您希望升级到的版本,以获取相关的升级指南.

有关比较Angular CLI变化的信息,请参见GitHub存储库Angular CLI diff. https://github.com/cexbrayat/angular-cli-diff/

UPDATED 26/12/2018:

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

UPDATED 08/05/2018:

Angular CLI 1.7引入了ng update.

ng update

一个新的Angular CLI命令有助于简化使项目与最新版本保持同步.软件包可以定义应用于项目的逻辑,以确保使用最新的功能,并进行更改以减少或消除与中断更改相关的影响.

可以找到NG更新的配置信息here

1.7 to 6 update

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

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

UPDATED 30/04/2017:

1.0 Update

你现在应该沿着100号公路走.


UPDATED 04/03/2017:

RC Update

你应该遵循100


UPDATED 20/02/2017:

请注意1.0.0-beta版.32有突破性的改变,删除了ng init and ng update

拉取请求here陈述以下内容:

BREAKING CHANGE:移除ng init&;更新命令,因为它们当前的实现导致的问题比解决的问题多.

angular cli CHANGELOG.md说明了以下内容:

BREAKING CHANGES个 -@angle/cli:删除ng init&;ng update命令,因为它们当前的实现导致的问题比解决的问题多.一次 RC发布后,我们将不再需要使用它们进行更新,因为 步骤非常简单,只需安装最新版本的CLI即可.


UPDATED 17/02/2017:

ANGLING-CLI现在已经添加到npm@ANGLING包中.现在,您应该将上述命令替换为以下命令-

Global package:

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

Local project package:

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

ORIGINAL ANSWER

您应该遵循GitHub上README.md的步骤,通过angular-cli更新angular.

它们在这里:

Updating angular-cli

要将angular cli更新为新版本,必须同时更新全局包和项目的本地包.

Global package:

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

Local project package:

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完成后手动合并它们.

Angular相关问答推荐

在forkjoin中使用NGXS状态数据

Swiper 11角17 SSR Swiper断点不工作

访问Angular 模板中的HTML元素属性

按Angular 从组件的 bootstrap 选项卡中删除活动类

要素存储更改根存储状态

有Angular react 形式的输入用货币管

Angular 应用程序未在Azure应用程序服务中运行

Angular 单位测试表

如果我只在组件中使用某个主题,是否需要取消订阅该主题?

无法创建新的 Ionic 项目

使用forkJoin和mergeMap的正确方式是什么?

对象中的值丢失 angular ngrx

MatTooltip 显示在 html 原生对话框下方

Angular JWT Token 被添加到lazyUpdate 而不是 HttpHeaders 中的标头

如何使用 Angular 12 material 验证密码和确认密码?

Rxjs Observable:仅为第一个订阅者获取 HTTP 数据,为其余订阅者获取缓存数据

如何使用 CLI 创建特定版本的 Angular 项目?

Angular2material对话框自动关闭

Angular 2 router.navigate

RxJS:takeUntil() Angular 组件的 ngOnDestroy()