angolare 2 Errore Router, config percorso deve contenere esattamente un "componente", "loader", o "RedirectTo" proprietà

Question

Questa è la mia messa a punto:

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: '/'})]); 

e continuo a ricevere questo errore, ogni aiuto è apprezzati

sto usando ultima Beta.0

riguarda

0.123.

Sean

Answer 1

stesso errore che avevo affrontato, ma ho risolto questo come di seguito:

quando scrivo il codice come questo

{ path: '/formDemo', Component: FormDemo, name: "FormDemo"}, 

mostra getta lo stesso errore che avete dovuto affrontare, ma dopo che ho la ricerca ho trovato un errore nel mio attributo Component di routeConfig, ovvero angular2 pensa che abbiamo scritto un'annotazione Component in routeConfig ma accetta solo esattamente una proprietà loader, componente, redirectto (URL). ma abbiamo scritto qualcos'altro, quindi quando ho cambiato Component con il codice component funziona correttamente.

{ path: '/formDemo', component: FormDemo, name: "FormDemo"}, 

sopra la riga rendono il mio codice funzionante. Potrebbe non aiutare a risolvere il tuo problema perché hai già scritto componente di Component ma ho postato questo per altri potrebbe essere utile a qualcun altro grazie

Answer 2

Ho incontrato lo stesso problema, ma ho risolto utilizzando il stesso nome del componente usato nella definizione del componente e quando importazione il componente, ad esempio:

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} 
]) 

ho incontrato lo stesso problema quando ho provato per cambiare il nome del componente durante l'importazione ad esempio: problema

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

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

route

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

Answer 3

ho avuto lo stesso problema. La mia importazione non era circondata da parentesi graffe, quindi non era definita. Il problema è il messaggio di errore criptico, che dovrebbe indicare che il componente che hai fornito è undefined per lo @RouteConfig.

Answer 4

Nel mio caso il problema è stato erroneamente importato componente figlio. L'esportazione dei componenti era di default:

export default class HomeComponent {} 

Così ho sostituito la sua importazione da

import { HomeComponent } from './homeComponent'; 

a

import HomeComponent from './homeComponent'; 

e funziona!

Interessante che il pacchetto Web che utilizzo per raggruppare l'app non fornisce errori/avvisi.

Answer 5

Nel mio caso è stata la mancata corrispondenza del nome del componente di importazione {} TestComponent e "Classe esportazione TestingComponent"

TestingComponent dovrebbe essere TestComponent.

Answer 6

Ho avuto lo stesso errore ma per un altro motivo. È vero che la segnalazione degli errori è ancora molto scarsa in ng2. L'errore: Route config dovrebbe contenere esattamente una proprietà "component", "loader" o "redirectTo", in realtà significa solo che ciò che hai inserito in routeConfig non è corretto. Nel mio caso, i miei componenti erano indefiniti. Questo a causa di un errore di ordine stupido.

ho avuto questa (component.ts)

export * from './trackerpanel.component'; 
export * from './login.component'; 
export * from './oauthcallback.component'; 
export * from './tracker.component'; 
export * from './settings.component'; 

E un'importazione come questo (trackerpanel.component)

import {TrackerComponent, SettingsComponent} from './component'; 

e stavo cercando di usare il tracker componenti e le impostazioni in percorsi definiti nel trackerpanel. Questo mi ha dato componenti indefiniti e l'errore di cui sopra.

@RouteConfig([ 
    {path: '/', name: 'Tracker', component: TrackerComponent, useAsDefault: true }, 
    {path: '/settings', name: 'Settings', component: SettingsComponent } 
]) 

ho cambiato in

export * from './tracker.component'; 
export * from './settings.component'; 
export * from './trackerpanel.component'; 
export * from './login.component'; 
export * from './oauthcallback.component'; 

E questa fisso il mio problema di routing.

Answer 7

Ho avuto lo stesso problema solo ora. Questo ha a che fare con la creazione di un componente e Webpack non lo riconosce.

Dopo aver riavviato Webpack l'errore è andato via ..

Answer 8

tuo NgModule dovrebbe essere cambiato da

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

Per

providers: [LocationStrategy, {useClass: HashLocationStrategy}), {provide: APP_BASE_HREF, useValue: '/'}] 

https://github.com/angular/angular/issues/12295