如何升级Angular CLI项目？

Question

我正在尝试从2.0升级我的angular 2项目。0到2.4。1。据我所知，自2.0以来，语义版本控制已经被采用。0释放和2。x、 x版本应为插入式替换。我的经验似乎表明并非如此。也许我只是不知道我在做什么，但我没有发现这是直截了当的。。。

我天真的第一种方法是手动更新我的@angular依赖项。你可以参考我的包裹。下面是json（更新1）。我做了这些更改，然后进行了npm安装，当我尝试执行ng服务时，我收到了几个警告，然后出现了以下错误。

无法读取未定义的属性“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版本的方法。。。

原包装。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"
  }
}

因为当我试图为更新选择角度依赖项时，我最终遇到了一个蜘蛛网，其中包含了需要更新的其他依赖项，接下来我尝试只更新所有内容。

基于这个答案，我尝试了以下方法：

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

这很好，但当我尝试ng serve时，我得到以下错误：

AppModule中的错误不是NgModule

使用这里收集的信息，我降低了我的typescript版本，那个错误消失了，但出现了一个新的错误。

错误遇到静态解析符号值。引用未导出的函数（原始. ts文件中的位置29:10），在rest-paths.ts中解析符号restPaths，在app.module.ts中解析符号AppMoules，在app.module.ts中解析符号AppMoules

我一直在努力克服这些错误，但事实上，我有这么多的麻烦是提高红旗。

有人能帮忙吗？我是不是走错了路？

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

编辑：关于拥有最新的angular cli的声明不正确。我有angularcli版本1.0。0-β。16而本次编辑时的最新版本为1.0。0-β。24。尽管如此，我还是尝试更新angular cli并在现有项目上运行ng init。现在我注意到，我没有完全按照github页面上概述的步骤进行操作。我跳过了npm安装--save dev-cli@latest，我把我所有的node_模块都吹走了，而不是使用它们列出的rm命令。




Answer 1

只需使用Angular CLI的内置功能

ng update

要更新到最新版本。

Answer 2

JJB的回答让我走上了正确的道路，但是升级并不顺利。我的过程详述如下。希望将来这个过程变得更容易，JJB的答案可以被使用或者更简单。

我遵循了JJB回答中捕获的步骤来精确更新角cli。但是，在运行npm安装angang-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)
    ...

为了能够使用任何角cli命令，我必须手动更新我的package.json文件，并将@角依赖项添加到2.4.1，然后再执行另一个npm安装。

在此之后，我能够执行nginit。我更新了配置文件，但没有更新我的app/*文件。当这项工作完成时，我仍然会出错。下面将详细介绍第一个错误，第二个错误是相同类型的错误，但位于不同的文件中。

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

此错误与我的应用模块中的以下工厂提供程序有关

{ 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);
}

为了总结我认为最重要的细节，需要进行以下更改：

>

手动更新@angular版本，2.0。angular cli 1.0版似乎不支持0。0-β。24

在angang-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"
      ],
...

我的package.json在考虑ng-init使用的版本的手动合并后看起来像这样。请注意，我的角版本不是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"
  }
}

Answer 3

有用的：

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

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

更新26/12/2018：

使用上面有用部分中提到的官方角度更新指南。它提供了最新的信息，以及到升级期间可能有用的其他资源的链接。

更新08/05/2018：

Angular CLI 1.7引入了ng更新。

NG更新

新的Angular CLI命令有助于简化操作，使项目保持最新版本。包可以定义将应用于项目的逻辑，以确保使用最新的功能，并进行更改以减少或消除与中断更改相关的影响。

可在此处找到ng更新的配置信息

1.7至6更新

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

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

2017年4月30日更新：

1.0更新

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

更新日期：2017年3月4日：

RC更新

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

更新20/02/2017：

请注意1.0。0-β。32具有中断性更改并已删除ng init和ng update

这里的拉取请求声明如下：

中断更改：删除ng init

更改日志。md声明如下：

突破性的变化-@角/cli：删除ng初始化

2017年2月17日更新：

Angulal-cli现在已经被添加到NPM@角包。您现在应该用以下命令替换上面的命令-

全球方案：

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中的步骤，通过angang-cli更新角。

这是：

更新angg-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完成后手动合并它们。