如何升级 Angular 2 中的路由器版本？答案

【问题标题】：How can I upgrade the version of router in angular 2?如何升级 Angular 2 中的路由器版本？
【发布时间】：2016-11-18 08:57:01
【问题描述】：

我目前正在使用这个：@angular/router@3.0.0-alpha.7 & 我想将它升级到@angular/router@3.0.0-beta.2。这是我的 app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router';
import {SubjectsComponent} from './subjects.component';
import {ProfileDetailsComponent} from './profileDetails.component';
import {AgreementComponent} from './agreement.component';

export const routes: RouterConfig = [
 { path: 'subjects', component: SubjectsComponent },
  { path: 'profile', component: ProfileDetailsComponent },
 { path: 'agreement', component: AgreementComponent }
 ];

  export const appRouterProviders = [
  provideRouter(routes)
 ];

我已经更改了路由器的版本，将 rc.3 更改为 rc.4，仍然得到相同的错误。这是我的 package.json：

    "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "~0.1.0",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "^3.0.0-beta.2",
    "@angular2-material/button": "^2.0.0-alpha.6",
    "@angular2-material/card": "^2.0.0-alpha.6",
    "@angular2-material/checkbox": "^2.0.0-alpha.6",
    "@angular2-material/core": "^2.0.0-alpha.6",
    "@angular2-material/icon": "^2.0.0-alpha.6",
    "@angular2-material/input": "^2.0.0-alpha.6",
    "@angular2-material/list": "^2.0.0-alpha.6",
    "@angular2-material/progress-bar": "^2.0.0-alpha.6",
    "@angular2-material/progress-circle": "^2.0.0-alpha.6",
    "@angular2-material/radio": "^2.0.0-alpha.6",
    "@angular2-material/sidenav": "^2.0.0-alpha.6",
    "@angular2-material/tabs": "^2.0.0-alpha.6",
    "@angular2-material/toolbar": "^2.0.0-alpha.6",
    "core-js": "^2.4.0",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.26",
    "zone.js": "^0.6.12"
  },

【问题讨论】：

以为您只需要更改 package.json 中的版本号，然后 npm 安装即可。好吧，至少我是这样做的。
我做了同样的事情并得到了这个：例外：无法解析RouterOutlet的所有参数：（RouterOutletMap，ViewContainerRef，？，名称）。所以我想也许我做错了什么..
你能分享你的RouterConfig代码吗？我猜你缺少 pathMatch: 'full'
@Sanket 我已经添加了代码，你能告诉我我应该在哪里添加 pathMatch: 'full' 吗？
pathMatch: 'full' 不是必需的，因为您没有使用redirectTo 进行重定向。

标签： angular angular2-routing

【解决方案1】：

只需转到您的 package.json 并更改

--------> "@angular/router": "3.0.0-alpha-7" 到 "@angular/router": "3.0.0-beta.2",

然后转到终端并键入 npm install 。

这会做你想做的:)

这是你的答案：---

只需使用以下代码更新您的 package.json 文件

"@angular/common": "2.0.0-rc.4", "@angular/compiler": "2.0.0-rc.4", "@angular/core": "2.0.0-rc .4”、“@angular/forms”：“0.2.0”、“@angular/http”：“2.0.0-rc.4”、“@angular/platform-browser”：“2.0.0-rc. 4", "@angular/platform-browser-dynamic": "2.0.0-rc.4", "@angular/router": "3.0.0-beta.1", "@angular/router-deprecated": "2.0.0-rc.2", "@angular/upgrade": "2.0.0-rc.4"

我已经对此进行了测试，现在效果很好:)

【讨论】：

谢谢 :) 我做了同样的事情并得到了这个：例外：无法解析 RouterOutlet 的所有参数：（RouterOutletMap，ViewContainerRef，？，名称）。
在此之前我也遇到了同样的错误，但现在解决了:)
我应该添加这两个：“@angular/router”：“3.0.0-beta.1”，“@angular/router-deprecated”：“2.0.0-rc.2 " ?
是的，在 Angular 2 中路由也需要弃用路由器
非常感谢！！摆脱了那个错误并且它正在工作，虽然不是完全但比以前好得多:)如果你能提供帮助，我现在得到这个：可能未处理的拒绝[2]错误：无法匹配任何路线：''在 Observable .eval [作为_subscribe]

【解决方案2】：

确保您不再在 package.json 中使用 @angular/router-deprecated 像这样更新你的 package.json :)

 "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
     "@angular/router": "3.0.0-beta.2",
    "es6-shim": "^0.35.0",
    "jquery": "^2.2.4",
    "jquery-ui": "^1.10.5",
    "leaflet": "^0.7.7",
    "moment": "^2.13.0",
    "ng2-bootstrap": "^1.0.17",
    "ng2-slim-loading-bar": "^1.2.3",
    "ng2-toastr": "^0.3.0",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.26",
    "zone.js": "^0.6.12"
  }

然后在您的命令提示符/终端中执行npm install

【讨论】：

我有相同的依赖集并且它没有工作，猜测实际上需要路由器弃用......