試圖讓Angular v3路由器例子工作

Question

試圖讓角度v3路由器例子工作。 http://plnkr.co/edit/ER0tf8fpGHZiuVWB7Q07?p=preview

http://plnkr.co/edit/ER0tf8fpGHZiuVWB7Q07?p=preview 

我的package.json低於，但是當我運行NPM運行TSC，我得到的錯誤...

應用程序/危機中心/危機center.routes.ts（ 14,5）：錯誤TS2322：輸入'{path：string;組件：typeof CrisisCenterComponent; index：boolean;子路徑：{{path：strin ...'不能指定爲類型'Route []'。

類型'{path：string; component：typeof CrisisCenterComponent; index：boolean; children：（{path：strin。 ..'不能指定爲'路由'類型 對象字面量只能指定已知屬性，並且'路徑'類型中不存在'索引'

app/crisis-center/crisis-detail.component。 ts（46,17）：錯誤TS7006：參數'危機'隱含有'任何'類型

app/crisis-center/crisis-detail.component.ts（81,12）：錯誤TS2322： Observable < {}>'不可分配爲鍵入'Observable | boolean'。 類型'Observable < {}>'不可分配爲鍵入'布爾值'。

app/crisis-center/crisis-list.component.ts（35,17）：錯誤TS7006：參數'危機'隱含地具有'任何'類型。

應用程序/危機中心/ crisis.service.ts（12,21）：錯誤TS2304：找不到名稱 '無極'「

的package.json

{ 
    "name": "angular2-quickstart", 
    "version": "1.0.0", 
    "scripts": { 
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", 
    "lite": "lite-server", 
    "postinstall": "typings install", 
    "tsc": "tsc", 
    "tsc:w": "tsc -w", 
    "typings": "typings" 
    }, 
    "license": "ISC", 
    "dependencies": { 
    "@angular/common": "2.0.0-rc.2", 
    "@angular/compiler": "2.0.0-rc.2", 
    "@angular/core": "2.0.0-rc.2", 
    "@angular/http": "2.0.0-rc.2", 
    "@angular/platform-browser": "2.0.0-rc.2", 
    "@angular/platform-browser-dynamic": "2.0.0-rc.2", 
    "@angular/router": "^3.0.0-alpha.7", 
    "@angular/router-deprecated": "2.0.0-rc.2", 
    "@angular/upgrade": "2.0.0-rc.2", 
    "systemjs": "0.19.27", 
    "core-js": "^2.4.0", 
    "reflect-metadata": "^0.1.3", 
    "rxjs": "5.0.0-beta.6", 
    "zone.js": "^0.6.12", 
    "angular2-in-memory-web-api": "0.0.12", 
    "bootstrap": "^3.3.6" 
    }, 
    "devDependencies": { 
    "concurrently": "^2.0.0", 
    "lite-server": "^2.2.0", 
    "typescript": "^1.9.0-dev.20160409", 
    "typings":"^1.0.4" 
    } 
} 

Answer 1

從github issue。 ：

指數：真was deprecated. Use empty path（ ''）`和重定向 代替

012。

{path: '', redirectTo: 'regions', terminal: true} 

也經過7版本路徑不得與/

Answer 2

這是因爲例如他們使用的路由器開始第四版alpha.3

var routerVer = '@3.0.0-alpha.3'; // lock router version 

是從@ 3.0.0很大的不同-alpha.7在你的依賴關係中。爲了正確運行他們的代碼，你應該使用那裏使用的依賴關係。如果你想使用alpha.7您必須修改一些元素，如路線：

export const HeroesRoutes = [ 
    { path: 'heroes', component: HeroListComponent }, 
    { path: 'hero/:id', component: HeroDetailComponent } 
]; 

export const CrisisCenterRoutes = [ 
    { 
    path: 'crisis-center', 
    component: CrisisCenterComponent, 
    index: true, 
    children: [ 
     { path: '', component: CrisisListComponent, terminal: true }, 
     { path: ':id', component: CrisisDetailComponent, canDeactivate: [CrisisDetailGuard] } 
    ] 
    } 
]; 

（斜槓在前面不允許任何更多）。我還建議更新包的其餘部分最新版本：

"rxjs": "^5.0.0-beta.9", 
"symbol-observable": "^1.0.1", 
"systemjs": "^0.19.31" 

有人聲稱，它幫助了一些奇怪的問題，我可以證實它與angular2 RC2 +路由器3.alpha7效果很好。不要擔心警告，比如@ angular/core @ 2.0.0-rc.2需要rxjs@5.0.0-beta.6，因爲大多數軟件包的依賴關係還沒有更新。

編輯： 您還需要查看一些配置文件。在這裏，他們是：

tsconfig.json：

{ 
    "compilerOptions": { 
     "target": "es5", 
     "module": "commonjs", 
     "moduleResolution": "node", 
     "sourceMap": true, 
     "emitDecoratorMetadata": true, 
     "experimentalDecorators": true, 
     "removeComments": false, 
     "noImplicitAny": false 
    }, 
    "exclude": [ 
     "node_modules", 
     "typings/main", 
     "typings/main.d.ts" 
    ] 
} 

的package.json：

{ 
    "name": "dev-test", 
    "version": "0.0.1", 
    "scripts": { 
     "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", 
     "lite": "lite-server", 
     "tsc": "tsc", 
     "tsc:w": "tsc -w", 
     "typings": "typings" 
    }, 
    "license": "ISC", 
    "dependencies": { 
     "@angular/common": "^2.0.0-rc.2", 
     "@angular/compiler": "^2.0.0-rc.2", 
     "@angular/core": "^2.0.0-rc.2", 
     "@angular/forms": "^0.1.0", 
     "@angular/http": "^2.0.0-rc.2", 
     "@angular/platform-browser": "^2.0.0-rc.2", 
     "@angular/platform-browser-dynamic": "^2.0.0-rc.2", 
     "@angular/router": "^3.0.0-alpha.7", 
     "@angular/router-deprecated": "^2.0.0-rc.2", 
     "@angular/upgrade": "^2.0.0-rc.2", 
     "@angular2-material/button": "^2.0.0-alpha.5-2", 
     "@angular2-material/card": "^2.0.0-alpha.5-2", 
     "@angular2-material/checkbox": "^2.0.0-alpha.5-2", 
     "@angular2-material/core": "^2.0.0-alpha.5-2", 
     "@angular2-material/grid-list": "^2.0.0-alpha.5-2", 
     "@angular2-material/icon": "^2.0.0-alpha.5-2", 
     "@angular2-material/input": "^2.0.0-alpha.5-2", 
     "@angular2-material/list": "^2.0.0-alpha.5-2", 
     "@angular2-material/progress-bar": "^2.0.0-alpha.5-2", 
     "@angular2-material/progress-circle": "^2.0.0-alpha.5-2", 
     "@angular2-material/radio": "^2.0.0-alpha.5-2", 
     "@angular2-material/sidenav": "^2.0.0-alpha.5-2", 
     "@angular2-material/slide-toggle": "^2.0.0-alpha.5-2", 
     "@angular2-material/tabs": "^2.0.0-alpha.5-2", 
     "@angular2-material/toolbar": "^2.0.0-alpha.5-2", 
     "angular2-in-memory-web-api": "^0.0.12", 
     "angular2-jwt": "^0.1.16", 
     "core-js": "^2.4.0", 
     "es6-promise": "^3.2.1", 
     "es6-shim": "^0.35.1", 
     "ng2-bootstrap": "^1.0.17", 
     "ng2-material": "^0.5.0", 
     "ng2-translate": "^2.1.0", 
     "reflect-metadata": "^0.1.3", 
     "rxjs": "^5.0.0-beta.9", 
     "symbol-observable": "^1.0.1", 
     "systemjs": "^0.19.31", 
     "zone.js": "^0.6.12" 
    }, 
    "devDependencies": { 
     "concurrently": "^2.0.0", 
     "lite-server": "^2.2.0", 
     "typescript": "^1.8.10", 
     "typings": "^1.0.4" 
    } 
} 

希望這會幫助你。

Answer 3

就在2天前我經歷過同樣的問題。這是我的項目狀態。我使用了生成angular2 rc3的package.json依賴項的Angular-cli beta 9。我遵循當前https://angular.io/docs/ts/latest/guide/router.html（這是推薦的Angular 2路由器，並取代了早期棄用的beta和v2路由器）

因此，我嚴格遵循angular.io中的.routes.ts示例，並將我的package.json更新爲angular2依賴於角rc4。最後，我在使用angular-cli服務我的項目之前做了npm install。

簡而言之，將package.json angular2依賴項更新爲RC4並執行npm install。給它一個去，讓我知道。