角2路由器故障，路由配置应该包含一个＆QUOT;组分QUOT;，＆QUOT;装载机＆QUOT;或＆QUOT; redirectTo＆QUOT;属性 [英] Angular 2 Router error, Route config should contain exactly one "component", "loader", or "redirectTo" property

问题描述

这是我的设置：

 从'angular2 /平台/浏览器的进口{}引导;
进口{}组件从angular2 /核心;
进口{LocationStrategy，APP_BASE_HREF，HashLocationStrategy，ROUTER_DIRECTIVES，路由器，RouteConfig，ROUTER_PROVIDERS}从'angular2 /路由器;
进口{} HomeComponent从../components/HomeComponent
进口从angular2 /芯{}提供;@零件（{
    选择：应用程序，
    模板：`＆LT; A [routerLink] =['/家庭']＆GT;家庭和LT; / A＆GT;
              ＆LT;路由器出口＆GT;＆LT; /路由器的出口和GT;`
    指令：[ROUTER_DIRECTIVES]
}）
@RouteConfig（[
    {路径：'/'，分量：HomeComponent，名称：HomeComponent'}
]）
类RootComponent {
    构造器（路由器：路由器）{    }
}引导（RootComponent，[ROUTER_PROVIDERS，提供（LocationStrategy，{useClass：HashLocationStrategy}）
    ，提供（APP_BASE_HREF，{useValue：'/'}）]）;
 

和我不断收到此错误
任何帮助是AP preciated

使用最新的Beta.0

关于

肖恩

解决方案

我遇到了同样的问题，但我通过使用组件定义使用相同的组件名称和解决时，进口组件，例如：

  

定义

 进口{}组件从angular2 /核心;@零件（{
    选择：注册页面，
    模板：`
        ＆LT; H4＆GT;注册＆LT; / H4＆GT;    `
}）
出口类RegisterPageComponent {
   //公共的英雄：英雄;
}
 

  

导入

 进口{} RegisterPageComponent从'./register.component';@RouteConfig（[
   {路径：'/注册，名称：注册，成分：RegisterPageComponent}
]）
 

我遇到了同样的问题，当我试图改变进口如组件名称：问题

 进口{} RegisterComponent从'./register.component';/ *从名字remove`Page`，应当RegisterPageComponent * /
 

  

路线

  @RouteConfig（[
    {路径：'/注册，名称：注册，成分：RegisterComponent}
]）
 

this is my setup:

import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';
import {LocationStrategy, APP_BASE_HREF, HashLocationStrategy, ROUTER_DIRECTIVES, Router, RouteConfig, ROUTER_PROVIDERS} from 'angular2/router';
import {HomeComponent} from "../components/HomeComponent";
import {provide} from "angular2/core";

@Component({
    selector: 'app',
    template: `<a [routerLink]="['/Home']">Home</a>
              <router-outlet></router-outlet>`,
    directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
    { path: '/', component: HomeComponent, name: 'HomeComponent' }
])
class RootComponent {
    constructor(router:Router) {

    }
}

bootstrap(RootComponent, [ROUTER_PROVIDERS, provide(LocationStrategy, {useClass: HashLocationStrategy})
    , provide(APP_BASE_HREF, {useValue: '/'})]);

and I keep getting this error any help is appreciated

using latest Beta.0

regards

Sean

解决方案

I had met same issue,but I resolved by using the same component name used in the component definition and when import the component,eg:

definition

import {Component} from 'angular2/core';

@Component({
    selector: 'register-page',
    template: `
        <h4>Register</h4>

    `
})
export class RegisterPageComponent {
   //public hero: Hero;
}

import

import {RegisterPageComponent} from './register.component';

@RouteConfig([
   {path: '/register',   name: 'Register',component: RegisterPageComponent}
])

I met the same issue when I tried to change the component name on import eg: issue

import {RegisterComponent} from './register.component'; 

/*remove`Page` from the name ,it should be RegisterPageComponent*/

route

@RouteConfig([
    {path: '/register',name:'Register',component:RegisterComponent}
])

这篇关于角2路由器故障，路由配置应该包含一个＆QUOT;组分QUOT;，＆QUOT;装载机＆QUOT;或＆QUOT; redirectTo＆QUOT;属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！