如何在angular-cli项目中升级Angular 2版本？
我正在尝试将我的angular 2项目从2.0.0升级到2.4.1。 我明白从2.0.0版本开始就采用了语义版本pipe理，而2.xx版本应该是直接replace。 我的经验似乎另有说明。 也许我只是不知道我在做什么，但我还没有发现这是简单的…
尝试1 – 手动版本升级
我天真的第一种方法是手动更新我的@angular色依赖关系。 你可以在下面引用我的package.json（更新1）。 我做了这些改变，然后做了一个npm install ，我得到了几个警告，然后当我尝试执行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版本的手动方法…
原始的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度依赖更新我结束了其他依赖需要更新的蜘蛛网，我接下来试图只是更新一切。
基于这个答案，我尝试了以下内容：
npm i -g npm-check-updates npm-check-updates -u npm install
这很好，但是当我尝试服务，我得到以下错误：
AppModule中的错误不是NgModule
使用这里收集的信息，我降级我的打字稿版本，错误消失了，但一个新的错误popup。
遇到错误时遇到静态parsing符号值。 引用非导出函数（在原始.ts文件中位置29:10），parsingrest-paths.ts中的符号restPaths，parsingapp.module.ts中的符号AppModule，parsingapp.module.ts中的符号AppModule
我一直在努力解决这些错误，但是我遇到了这么多麻烦事实就是提高了红旗。
任何人都可以帮忙吗？ 我采取了错误的做法？
请注意，我已经看到了一些关于更新angular-cli项目的build议，build议您卸载angular-cli并重新安装，然后执行ng init并覆盖configuration文件。 这不适合我，因为我已经有了最新版本。
编辑：有关最新的angular度cli的声明是不正确的。 我有angular度版本1.0.0-beta.16，而在这个编辑时最新的是1.0.0-beta.24。 不过，我尝试更新我的angular度cli，并运行我的现有项目的初始化。 我现在注意到，我没有精确地遵循angular-cli github页面上列出的步骤。 我跳过了npm install –save-dev angular-cli @ latest，我吹走了所有的node_modules，而不是使用它们概述的rm命令。
更新30/04/2017：
1.0更新
您现在应该遵循Angular CLI迁移指南
更新04/03/2017：
RC更新
您应该遵循Angular CLI RC迁移指南
更新20/02/2017：
请注意，1.0.0-beta.32已经发生了重大变化，并且已经删除了ng init and ng update
这里的拉取请求声明如下：
断开更改：删除ng init＆ng更新命令，因为它们当前的实现会导致比解决问题更多的问题。 更新function将返回到CLI，直到那时手动更新应用程序将需要完成。
angular-cli CHANGELOG.md声明如下：
破坏更改 – @ angular / cli：删除ng init＆ng更新命令，因为它们当前的实现会导致比解决问题更多的问题。 一旦RC发布，我们将不需要再使用这些更新，因为步骤就像安装最新版本的CLI一样简单。
更新17/02/2017：
Angular-cli现在已经添加到NPM @angular包中。 你现在应该用下面的命令replace上面的命令 –
全球套餐：
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度。
他们来了：
更新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创build的所有自动生成的文件的变化，并允许你更新你的。 为每个更改的文件提供四个选项：y（覆盖），n（不覆盖），d（显示文件和更新文件之间的差异）和h（帮助）。
仔细阅读每个代码文件的差异，并接受更改或ng init完成后手动合并。
JJB的回答让我走上了正轨，但升级并不顺利。 我的过程详述如下。 希望这个过程在未来变得更加容易，JJB的答案可以被使用，甚至更直接的。
解决scheme详情
我已经按照JJB答案中的步骤精确地更新了angular度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 。 我更新了我的configuration文件，但没有我的应用程序/ *文件。 当这一切完成后，我仍然得到错误。 第一个是下面详细介绍，第二个是相同types的错误，但在不同的文件。
遇到错误时遇到静态parsing符号值。 函数调用不被支持。 考虑使用对导出函数的引用（原始.ts文件中的位置62：9）replace函数或lambda，parsingC：/ _git / my-project / code / src / main / frontend / src / app中的符号AppModule /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); }
概要
总结我所了解的最重要的细节，需要做以下的改变：
-
使用JJB的答案（和他们的github页面）中详细介绍的步骤更新angular-cli版本。
-
手动更新@angular版本，2.0.0似乎没有被angular-cli版本1.0.0-beta.24支持
-
借助angular-cli和
ng init命令，我更新了我的configuration文件。 我认为关键的变化是angular-cli.json和package.json。 请参阅底部的configuration文件更改。 -
在我参考它们之前，对代码进行更改以导出函数，如解决scheme细节中所捕获的。
关键configuration更改
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使用的版本。 注意我的angular度版本不是2.4.1，但我之后的变化是在2.3中引入的组件inheritance，所以我对这些版本很好。 原来的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" } }
根据这里http://angularjs.blogspot.co.uk/2017/03/angular-400-now-available.html的文件，你应该只能运行;…
npm install @ angular / {common，编译器，编译器cli，核心，表单，http，平台浏览器，平台浏览器dynamic，平台服务器，路由器，animation} @latest typescript @ latest –save
我试了一下，并得到了一些错误，由于我的zone.js和ngrx /存储库是旧版本。
将其更新到最新版本npm install zone.js@latest --save和npm install @ngrx/store@latest -save ，然后运行angular install再次为我工作。
去掉 ：
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脚本。 升级会比较软。
要将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
