EXCEPTION:在实例化路由器期间出错! (RouterLink - >路由器)

时间:2016-04-04 01:32:35

标签: angular

我正在尝试使路线正常工作,但却出现以下错误。我的目标是在页面加载时加载默认组件,然后当用户从导航点击时可以加载更多路由。

首先,我尝试加载默认路由器但遇到以下错误。现在我在app.component.ts中保留了路由器链接和RouterOutlet。

EXCEPTION: Error during instantiation of Router! (RouterLink -> Router).
ORIGINAL EXCEPTION: Component for route "/home" is not defined, or is not a class.

我的app组件就像在这里

import {Component} from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
import {ACCORDION_DIRECTIVES, DROPDOWN_DIRECTIVES, Collapse} from "ng2-bootstrap/ng2-bootstrap";
import {CORE_DIRECTIVES} from "angular2/common";
import {MyAppComponent} from "./components/myapp.component";
import {RouterLink} from "angular2/router";
import {RouterOutlet} from "angular2/router";


@Component({
    selector: 'my-app',
    template:`<a [routerLink]="['Home']">Heroes</a>
        <router-outlet></router-outlet><myapp></myapp>`,
    directives:[ACCORDION_DIRECTIVES, DROPDOWN_DIRECTIVES, CORE_DIRECTIVES,
        RouterLink,Collapse, ROUTER_DIRECTIVES, MyAppComponent, RouterOutlet],
    providers:[ROUTER_PROVIDERS]
})

//Router configuration
@RouteConfig([
    {
        path: '/home',
        name: 'Home',
        component:'HomeComponent',
        useAsDefault: true
    }
])
export class AppComponent { }

我的main.ts看起来像这样

import {bootstrap}    from 'angular2/platform/browser';
import {AppComponent} from './app.component';
import {ROUTER_PROVIDERS} from "angular2/router";

bootstrap(AppComponent,[ROUTER_PROVIDERS]);

如果有人知道我的代码中有什么问题,那么请告诉我......

2 个答案:

答案 0 :(得分:0)

首先按照埃里克所说,

然后,我认为问题出在HomeComponent。在RouteConfig中定义任何路线后,您必须导入所有已定义的路线组件

所以我认为这应该可以解决你的问题,

import {HomeComponent} from 'HomeComponent path';

答案 1 :(得分:0)

从所有组件中删除providers:[ROUTER_PROVIDERS]。仅将ROUTER_PROVIDERS添加到

bootstrap(AppComponent, [ROUTER_PROVIDERS])