如何升级Angular CLI项目？

时间：2016-12-30 23:06:55

标签： angular angular-cli

我试图将我的角度2项目从2.0.0升级到2.4.1。我知道自2.0.0版本开始就采用了语义版本控制，而2.x.x版本应该是替代版本。我的经验似乎表明不是这样。也许我只是不知道我在做什么，但我没有发现这很简单...

尝试1 - 手动版本升级

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

  

无法读取属性＆＃39; AssetUrl＆＃39;未定义的

我的警告...... 

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），其中一些似乎彼此冲突。所以我放弃了更新我的角度2版本的手动方法......

原始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

因为当我试图挑选我的角度依赖关系以进行更新时，我最终在一个需要更新的其他依赖关系的spiderweb中，我接下来尝试更新所有内容。

根据this answer我尝试了以下内容：

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

这很好但是当我尝试服务时，我收到以下错误：

  

AppModule中的错误不是NgModule

使用收集的信息here，我降级了我的打字稿版本，该错误消失了，但是又出现了一个新错误。

  

ERROR in Error遇到静态解析符号值。   参考未导出的函数（原始位置29:10）   .ts文件），解析rest-paths.ts中的符号restPaths，解析符号   app.module.ts中的AppModule，   在app.module.ts中解析符号AppModule

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

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

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

编辑： 关于拥有最新的角度cli的声明是不正确的。我有angular-cli版本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命令。

7 个答案:

答案 0 :(得分：80)

  

有用：

     

使用官方Angular Update Guide选择您当前的版本以及您要升级的版本以获取相关的升级指南。   https://update.angular.io/

     

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

更新于26/12/2018：

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

更新08/05/2018：

Angular CLI 1.7引入了ng update。

  

ng update

     

一个新的Angular CLI命令，有助于简化您的项目与最新版本的最新版本。包可以定义将应用于您的项目的逻辑，以确保使用最新功能以及进行更改以减少或消除与破坏更改相关的影响。

     

可以找到ng更新的配置信息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/04/30：

1.0更新

您现在应该按照 Angular CLI migration guide

进行操作

更新时间04/03/2017：

RC更新

您应该按照 Angular CLI RC migration guide

进行操作

2017年2月20日更新：

请注意1.0.0-beta.32有重大更改，已删除ng init and ng update

拉取请求here说明以下内容：

  

BREAKING CHANGE：删除ng init＆amp; ng update命令，因为它们当前的实现会导致比它解决的问题更多的问题。   更新功能将返回CLI，直到手动更新   应用程序将需要完成。

angular-cli CHANGELOG.md说明如下：

  

突然改变     - @ angular / cli：删除ng init＆amp; ng update命令，因为它们当前的实现会导致比它解决的问题更多的问题。一旦   RC被发布了，我们不再需要那些更新了   步骤将像安装最新版本的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

原始回答

您应该按照GitHub上的README.md中的步骤，通过angular-cli更新角度。

他们是：

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

答案 1 :(得分：4)

JJB的回答让我走上正轨，但升级并没有顺利进行。我的流程详述如下。希望将来这个过程变得更加容易，JJB的答案可以使用，或者更简单。

解决方案详情

我已按照JJB答案中捕获的步骤精确更新了角度cli。然而，在运行npm install之后，angular-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)
    ...

为了能够使用任何angular-cli命令，我必须手动更新我的package.json文件并将@angular依赖项置于2.4.1，然后执行另一个npm install。

在此之后，我能够ng init。我更新了配置文件，但没有更新我的app / *文件。完成后，我仍然遇到错误。第一个是下面详述的，第二个是相同类型的错误，但是在不同的文件中。

  

ERROR in Error遇到静态解析符号值。   不支持函数调用。考虑更换功能或   lambda引用导出的函数（位置62：9）   原始.ts文件），解析符号AppModule   C：/ _ GIT中/我的项目/代码/ SRC /主/前端/ SRC /应用程序/ app.module.ts

此错误与我的AppModule中的以下工厂提供程序相关联

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

摘要

总结一下我理解的最重要的细节，需要进行以下更改：

  1. 使用JJB答案（及其github页面）中详述的步骤更新angular-cli版本。

  2. 手动更新@angular版本，angular-cli版本1.0.0-beta.24似乎不支持2.0.0

  3. 在angular-cli和ng init命令的帮助下，我更新了配置文件。我认为关键的变化是angular-cli.json和package.json。请参阅底部的配置文件更改。

  4. 在我引用代码之前对代码进行更改，如解决方案详细信息中所示。

    5. 关键配置更改

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

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

答案 2 :(得分：3)

只需使用Angular CLI的内置功能

ng update

更新到最新版本。

答案 3 :(得分：1)

根据此处的文档http://angularjs.blogspot.co.uk/2017/03/angular-400-now-available.html，您应该＆＃39;能够跑...

  

npm install @ angular / {common，compiler，compiler-cli，core，forms，http，platform-b​​rowser，platform-b​​rowser-dynamic，platform-server，router，animations} @latest typescript @ latest --save < / p>

由于我的zone.js和ngrx / store库是旧版本，我尝试了它并得到了一些错误。

将这些更新到最新版本npm install zone.js@latest --save和npm install @ngrx/store@latest -save，然后再次运行角度安装对我有效。

答案 4 :(得分：0)

删除：

npm uninstall -g angular-cli

重新安装（使用纱线）

# npm install --global yarn
yarn global add @angular/cli@latest
ng set --global packageManager=yarn  # This will help ng-cli to use yarn

重新安装（使用npm）

npm install --global @angular/cli@latest

另一种方法是不使用全局安装，并在PATH中添加/node_modules/.bin文件夹，或使用npm脚本。升级会更软。

答案 5 :(得分：0)

对我有用的解决方案：

  • 删除 node_modules 和 dist 文件夹
  • （cmd）>> ng更新--all --force
  • （在cmd中）>> npm install typescript @“> = 3.4.0和<3.5.0” --save-dev --save-exact
  • （在cmd中）>> npm install --save core-js
  • 在 polyfill.ts
    • 中注释导入'core-js / es7 / reflect';
  • （以cmd为单位）>> ng服务

答案 6 :(得分：-1)

要将Angular CLI更新为新版本，您必须同时更新全局包和项目的本地包。

全球套餐： 

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

本地项目包： 

rm -rf node_modules dist # use rmdir /S/Q node_modules dist in Windows Command Prompt; use rm -r -fo node_modules,dist in Windows PowerShell
npm install --save-dev @angular/cli@latest
npm install

参见参考https://github.com/angular/angular-cli

相关问题
最新问题