【问题标题】:Trying to get Angular v3 router example to work试图让 Angular v3 路由器示例工作
【发布时间】:2016-06-20 02:53:13
【问题描述】:

试图让 Angular v3 路由器示例工作。 http://plnkr.co/edit/ER0tf8fpGHZiuVWB7Q07?p=preview

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

我的 package.json 在下面,但是当我运行 npm run tsc 时,我得到了错误...

app/crisis-center/crisis-center.routes.ts(14,5): error TS2322: Type '{ path: string;组件:危机中心组件的类型;索引:布尔值; children: ({ path: string...' 不能分配给类型 'Route[]'。

键入'{路径:字符串;组件:危机中心组件的类型;索引:布尔值;孩子:({路径:字符串...'不可分配给类型'Route'。 对象字面量只能指定已知属性,而 'index' 不存在于类型 'Route' 中。

app/crisis-center/crisis-detail.component.ts(46,17):错误 TS7006:参数 'crisis' 隐含地具有 'any' 类型。

app/crisis-center/crisis-detail.component.ts(81,12): error TS2322: Type 'Observable' is notassignable to type 'Observable |布尔值'。 类型 'Observable' 不可分配给类型 'boolean'。

app/crisis-center/crisis-list.component.ts(35,17):错误 TS7006:参数“crises”隐含地具有“任何”类型。

app/crisis-center/crisis.service.ts(12,21):错误 TS2304:找不到名称“Promise”。”

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

【问题讨论】:

    标签: angular angular2-routing


    【解决方案1】:

    来自github issue

    index: truewas deprecated. Use empty path('')` 并重定向 而是。

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

    7 之后的版本路径也不能以/ 开头

    【讨论】:

    • 谢谢,但这并不能消除 promise、map 等 ode_modules/@angular/common/src/facade/async.d.ts(27,33) 的错误:错误 TS2304:找不到名称'承诺'。 node_modules/@angular/common/src/facade/async.d.ts(28,45):错误 TS2304:找不到名称“Promise”。 node_modules/@angular/common/src/facade/lang.d.ts(4,17):错误 TS2304:找不到名称“地图”
    【解决方案2】:

    这是因为他们使用Router 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 + router 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"
        }
    }
    

    希望这会对你有所帮助。

    【讨论】:

    • 当我尝试更新时,正如你所建议的,我得到 Peer @angular/core@2.0.0-rc.2 想要 rxjs@5.0.0-beta.6。我可以摆脱承诺错误 'app/crisis-center/crisis.service.ts(12,21): error TS2304: Cannot find name 'Promise'." 如果我​​将 tsConfig 更改为指向 es6。但不是确定这是否正确?您介意发布您的配置文件吗?
    • 谢谢,请注意分享您的 package.json... 仍然到处都是... node_modules/@angular/common/src/facade/promise.d.ts(9,38): error TS2304 : 找不到名称“Promise”。
    • 再次感谢...仍然收到这些错误。我注意到你在 package.json 中包含了 es6-promise。你是如何导入使用 Promise 的? app/crisis-center/crisis.service.ts(13,21):错误 TS2304:找不到名称“Promise”。
    • 我没有。现在不记得了,但这是我使用的一个包的依赖项之一。现在不能告诉你是哪一个。
    【解决方案3】:

    我在 2 天前遇到了同样的问题。这是我的项目状态。我使用了 Angular-cli beta 9,它生成了 angular2 rc3 的 package.json 依赖项。我遵循了当前的https://angular.io/docs/ts/latest/guide/router.html(这是推荐的 Angular 2 路由器,取代了早期不推荐使用的 beta 和 v2 路由器)

    所以我严格遵循 angular.io 中的 .routes.ts 示例,并将我的 package.json 更新为 angular2 依赖关系到 angular rc4。最后,在使用 angular-cli 为我的项目提供服务之前,我做了一个 npm install

    简而言之,将您的 package.json angular2 依赖项更新为 RC4 并执行 npm 安装。试一试,然后告诉我。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2020-12-10
      • 2018-10-23
      • 2014-03-22
      • 1970-01-01
      • 1970-01-01
      • 2019-08-29
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多