Angular2路由，使用TypeScript，编译报错，获取意外token Console报错

Question

我正在使用 TypeScript 6.0.0 试验 Angular2 alpha35。我的 index.html 加载了一个 headerFooter 组件。然后，我向其中添加了 router-outlet 标签，以在其间插入多个页面。 How to change router by typescript in angular2? 处的代码帮助消除了几个错误，但经过几个小时的颠簸，我仍然在 @RouteConfig 中遇到 TypeScript 错误，即预期的“，”。在。 . . （ : 就在组件之后），并且在它找到的部分页面组件中出现意外@令牌的控制台错误（GET home.js 可以），但不能 load/insert。这是相关代码。 app.ts、index.html 和 home.js 都在同一目录中。

index.html

<residence-app><h1>Loading . . .</h1></residence-app>

app.ts

/// <reference path="../angular2-oPost/typings/angular2/angular2.d.ts" />
"use strict";
import { Component, View, bootstrap, Directive } from "angular2/angular2";
import { routerInjectables, routerDirectives, Router, RouterOutlet, RouteConfig, RouterLink } from 'angular2/router';
import { Home } from "home";
@Component({
  selector: 'residence-app'
})
@View({
  directives: [ RouterOutlet, RouterLink, Home ],
  templateUrl: "components/navigation/headerFooter.html",
  styleUrls: ['commonStyles/headerFooter.css']
})
@RouteConfig( [  {path: '/home', as:  component: Home } ] )
// TypeScript error  ',' expected.  at line 32 col48 ( : right after component), but a , causes 2 other errors
class ResidenceApp {
}
bootstrap( ResidenceApp,
  [
    routerInjectables
  ] );

headerFooter.html有几个div和下面的标签插入部分页面组件

<router-outlet></router-outlet>

home.js是在headerFooter.html

中插入router-outlet的首页测试组件

"use strict";
import { Component, View, bootstrap, Directive } from "angular2/angular2";
@Component({
//Error loading "home" from "app" at http://localhost/angular2-oPost/app.js
//http://localhost/angular2-oPost/home.js:3:1: Unexpected token @ (WARNING: non-Error used)"
  selector: "home"
})
@View({
  template: `<h1>Home page under construction</h1>
  <a router-link='home'>Home Page</a>`
})
class Home {
}
bootstrap( Home );

Answer 1

首先，你的路由坏了

@RouteConfig( [  {path: '/home', as:  component: Home } ] )

您需要定义别名并将其设为 CamelCase（技术上是 PascalCase）

此外 as 参数已更改为 name

@RouteConfig([{ path: '/home', name: 'Home', component: Home }])

来源：

其次，你的路由器bootstrap坏了

bootstrap(ResidenceApp, [ routerInjectables ]);

routerInjectables 已替换为 ROUTER_PROVIDERS

bootstrap(ResidenceApp, [ ROUTER_PROVIDERS ]);

来源：

angular@2.0.0-alpha.41/CHANGELOG.md

第三，你需要提供一个正确的路径到Home

import { Home } from "home";

import angular2/angular2 有效是因为 config.js 包含它的别名。 config.js 不包含项目组件的别名（除非您手动添加它们）因此您必须通过相对路径导入。

import { Home } from "./components/home";

第四，你的routerLink不工作

<a routerLink='home'>Home Page</a>`

它必须指向别名，使用正确的单向绑定。

<a [routerLink]="['./Home']">Home Page</a>`

注意：routerLink表达式中的link指向别名（即路由中定义的name字段，所以也需要CamelCase。

来源：

angular2/router/router_link.ts

第五，需要配置Home组件包含RouterLink

import { RouterLink } from 'angular2/router';
...
@View({
  directives: [ RouterLink ],
  template: `<h1>Home page under construction</h1>
  <a routerLink='home'>Home Page</a>`
})
class Home {
...

呼...我想就这些了。

旁白：最近对路由器进行了很多重大更改，所以基本上所有在线可用的示例都已损坏。

更新：

留意一下。在未来的版本中，RouterOutlet/<router-outlet> 将被 RouterViewport/<router-viewport> 取代。

更新2：

路由 as 参数已更改为 name

来源：

angular/issues#4679

更新2：

重大变更：

[router-link] -> [routerLink]

感谢@Mike Laird 的评论。

Answer 2

完成所有步骤后仍然无效，只需尝试在 index.html 中设置基础 URL 使用此：<base href="/"> 在 <head> 标记之后`.

Angular2路由，使用TypeScript，编译报错，获取意外token Console报错

Angular2 routing, using TypeScript, has a compile error and get unexpected token Console error

typescript

angular