2016-03-23 49 views
2

我的路由在Angular2中不起作用,为了证明这一点,我已经将相同的组件作为我的站点的根目录和/login。该组件工作在http://localhost:3000,但在http://localhost:3000/login,我只是得到一个通知“无法GET /登录”。路由在Angular2中不起作用

app.component.ts:

import { Component } from 'angular2/core'; 
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router'; 

import {TodoService} from './todo/services/todo.service'; 
import { TodoCmp } from './todo/components/todo.component'; 
import { LoginComponent } from './user/components/login.component'; 
import { UserService } from './user/services/user.service'; 


@Component({ 
    selector: 'my-app', 
    template: ` 
    <h1>{{title}}</h1> 
    <router-outlet></router-outlet> 
    `, 
    styleUrls: ['client/dev/todo/styles/todo.css'], 
    directives: [ROUTER_DIRECTIVES], 
    providers: [ 
    ROUTER_PROVIDERS, 
    TodoService 
    ] 
}) 
@RouteConfig([ 
    { 
    path: '/', 
    name: 'TodoCmp', 
    component: TodoCmp, 
    useAsDefault: true 
    }, 
    { 
    path: '/login', 
    name: 'TodoCmp', 
    component: TodoCmp 
    } 
]) 

export class AppComponent { 
    title = 'ng2do'; 
} 

这里是我的index文件的链接。 我做错了什么?

+0

你有包括所有必要的库文件? – sdfacre

+0

@sdfacre是的,我正在面临与我的system.config没有添加文件扩展名到依赖关系的问题。现在已解决,请参阅我的更新问题。 –

+0

如果一切都正确加载,为什么它仍然抱怨'需求没有定义'...对不起,除非你能提供一个plunker,否则我没有任何线索。你有没有跟着任何例子?像http://www.waynehong.com/javascript/angular-2-routing-example-typescript/ – sdfacre

回答

0

在一个@RouteConfig(...)不能有两个名称相同的路线:

@RouteConfig([ 
    { 
    path: '/', 
    name: 'TodoCmp', 
    component: TodoCmp, 
    useAsDefault: true 
    }, 
    { 
    path: '/login', 
    name: 'TodoCmp', <!-- <<<== should be 'Login' instead of 'TodoCmp' 
    component: TodoCmp 
    } 
]) 

你应该移动到ROUTER_PROVIDERSbootstrap()(如HTTP_PROVIDERS

+0

我已经从'angular2/router'添加了'import {ROUTER_PROVIDERS};'然后将我的行更改为'bootstrap (AppComponent,[HTTP_PROVIDERS,ROUTER_PROVIDERS]);'在main.ts中,但我仍然得到相同的行为,是你的意思? –

+0

你是否也从'@Component()'中移除它? –

+0

是的,我从'app.component'中删除它 –