我正在尝试使路线正常工作,但却出现以下错误。我的目标是在页面加载时加载默认组件,然后当用户从导航点击时可以加载更多路由。
首先,我尝试加载默认路由器但遇到以下错误。现在我在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]);
如果有人知道我的代码中有什么问题,那么请告诉我......
答案 0 :(得分:0)
首先按照埃里克所说,
然后,我认为问题出在HomeComponent
。在RouteConfig
,中定义任何路线后,您必须导入所有已定义的路线组件。
所以我认为这应该可以解决你的问题,
import {HomeComponent} from 'HomeComponent path';
答案 1 :(得分:0)
从所有组件中删除providers:[ROUTER_PROVIDERS]
。仅将ROUTER_PROVIDERS
添加到
bootstrap(AppComponent, [ROUTER_PROVIDERS])