试图使Angular V3路由器示例工作

试图使角V3路由器示例工作。http://plnkr.co/edit/er0tf8fpghziuvwb7q07?p=preview

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

我的软件包。json在下面，但是当我运行NPM运行tsc时，我会遇到错误...

app/crisis-center/crisis-center.routes.ts（14,5）：错误ts2322：type'{path：string;组件：危机类型；索引：布尔值；儿童：（ {{路径：strin ...'不能分配'route []'。
type'{path：string;组件：危机类型；索引：布尔值；儿童：（ {{路径：strin ...'无法分配'路由'。对象文字只能指定已知属性，而"索引"在类型的"路由"中不存在。
应用程序/危机中心/危机危机 - detail.component.ts（46,17）：错误ts7006：参数'危机'隐式具有'任何''类型。
app/crisis-center/crisis-detail.component.ts（81,12）：错误ts2322：键入'observable＆lt; {}>''type'observable'observable'observable observable不可分配|布尔'。键入'可观察＆lt; {}>'不能分配给'boolean'。
app/crisis-center/crisis-list.component.ts（35,17）：错误ts7006：参数'危机'隐式具有"任何"类型。
应用程序/危机中心/危机。

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"
  }
}

来自github问题：

索引：true was deprecated. Use empty path（''）`和重定向而是。
{path: '', redirectTo: 'regions', terminal: true}

另外，在7版路径之后，不得以/

开头

这是因为他们使用路由器ver 3 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"
    }
}

希望这对您有帮助。

我在2天前就经历了同一问题。这是我的项目状态。我使用了生成包装的Angular-CLI Beta 9。我遵循当前的https://angular.io/docs/ts/latest/guide/router.html（这是推荐的Angular 2路由器，并取代了较早的弃用Beta和V2路由器）

因此，我严格遵循了Angular.io中的.routes.ts示例，并将我的软件包更新为Angular2依赖项为Angular RC4。最后，我在使用Angular-CLI服务之前做了npm install。

简而言之，将您的软件包.json angular2依赖项更新为rc4，然后进行NPM安装。试一试，让我知道。

相关内容

最新更新

热门标签：