Question

尝试使角度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）：错误TS2322：输入＆＃39; {path：string;组件：typeof CrisisCenterComponent; index：boolean;孩子：（{路径：strin ...＆＃39;不能分配到＆＃39;路由[]＆＃39;。

输入＆＃39; {path：string;组件：typeof CrisisCenterComponent; index：boolean;孩子们：（{路径：strin ...＆＃39;不能分配到＆＃39;路线＆＃39;。       对象文字只能指定已知属性，并且＆＃39; index＆＃39;类型＆＃39;路线＆＃39;。
中不存在
app / crisis-center / crisis-detail.component.ts（46,17）：错误TS7006：参数＆＃39;危机＆＃39;隐含地有一个“任何”的类型。

app / crisis-center / crisis-detail.component.ts（81,12）：错误TS2322：输入＆＃39; Observable＆lt; {}＆gt;＆＃39;不能分配给＆＃39; Observable |布尔＆＃39 ;.     输入＆＃39; Observable＆lt; {}＆gt;＆＃39;不能分配给＆＃39;布尔＆＃39;。

app / crisis-center / crisis-list.component.ts（35,17）：错误TS7006：参数＆＃39;危机＆＃39;隐含地有一个“任何”的类型。

app / crisis-center / crisis.service.ts（12,21）：错误TS2304：找不到姓名＆＃39;承诺＆＃39;。＆＃34;

的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：

index：true was deprecated. Use empty path（''）`并重定向代替。
{path: '', redirectTo: 'regions', terminal: true}

7版本路径后也不能以/

开头

Answer 2

这是因为他们使用路由器版本3 alpha.3

的例子

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

这与您的依赖项中的@ 3.0.0-alpha.7非常不同。要正确运行他们的代码，您应该使用那里使用的依赖项。如果你想使用alpha.7，你必须修改一些元素，比如routes：

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天前遇到过同样的问题。这是我的项目状态。我使用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安装。试一试，让我知道。

试图让Angular v3路由器示例正常工作

3 个答案: