2016-01-08 2 views
2

Я очень новичок в Angular 2.0 (кто не!?!?!), и я не могу заставить свою маршрутизацию работать! Я продолжаю получать ошибку «Component "LoginComponent" has no route config. in [['/Register'] in LoginComponent».Компонент не имеет конфигурации маршрута. in Component - Angular 2 Ошибка маршрутизации

Это мой @RouteConfig и самозагрузка код (чтобы доказать, что я впрыскивать зависимости), взятый из моего boot.ts файла

bootstrap(LoginComponent, [ 
    ROUTER_PROVIDERS, HTTP_PROVIDERS 
]); 

@RouteConfig([ 
    {path: '/login', name: 'Login', component: LoginComponent, useAsDefault: true}, 
    {path: '/register', name: 'Register', component: RegisterComponent} 
]) 

Это мой LoginComponent код ... из моего login.component.ts файла

import {Component} from 'angular2/core'; 
import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators} from 'angular2/common'; 
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router'; 
import {Http, Headers, Response} from "angular2/http"; 

@Component({ 
    selector: 'login', 
    templateUrl: 'app/login/login.component.html', 
    directives: [FORM_DIRECTIVES, ROUTER_DIRECTIVES] 
}) 

export class LoginComponent { 

    loginForm:ControlGroup; 
    http: Http; 
    userNotFound: boolean; 

    constructor(fb:FormBuilder, http: Http) { 
     this.loginForm = fb.group({ 
      'email': ['', Validators.required], 
      'password': ['', Validators.required] 
     }); 

     this.http = http; 
     this.userNotFound = false; 
    } 

    login(event: Event, val:string):void { 
     // stuff happens here 
    } 

    forgotPassword() { 
     // stuff happens here 
    } 
} 

и здесь, на мой взгляд, у меня есть ссылка на другую часть моего приложения. Взятые из моего login.component.html файла

<a (click)="forgotPassword()">Forgot Password</a> 
<br> 
<a [routerLink]="['/Register']">Register</a> 
<br> 
<div class="error" *ngIf="userNotFound"> 
    User not found. Please try again... 
</div> 

Однако в браузере я получаю следующие ошибки:

ИСКЛЮЧЕНИЕ: Компонент «LoginComponent» не имеет никакого маршрута конф. в [['/ Register'] в LoginComponent @ 23: 19] ОРИГИНАЛЬНОЕ ИСКЛЮЧЕНИЕ: Компонент «LoginComponent» не имеет конфигурации маршрута. ORIGINAL STACKTRACE: Ошибка: компонент «LoginComponent» не имеет конфигурации маршрута.

Может ли кто-нибудь увидеть, в чем проблема? По умолчанию работает, и все в порядке, пока я не представим гиперссылку <a [routerLink]="['/Register']">Register</a>. Я пытался это сделать какое-то время!

Вот моя структура проекта (если это поможет) ...

project structure

+0

где находится ваш '<роутер-выход> ', а вторая вещь angular2 ожидает маршрутизации из LoginComponent, но не может ее найти. –

+1

Вы загружаете неправильный компонент. Ваш корневой компонент является 'LoginComponent', поэтому, когда вы пишете'/SomeComponent' (абсолютный путь), он будет начинаться с 'LoginComponent', у которого нет RouteConfig. –

+0

У меня была аналогичная проблема с вложенными маршрутами. Объяснения по этому вопросу помогли. https://github.com/angular/angular/issues/8420 – theUtherSide

ответ

1

На самом деле ДО я могу понять, что проблема в файле маршрутизации, потому что вы Bootstrap файл Войти компонента и вы делаете ваша маршрутизация в файле boot.ts. но вместо этого вы должны сделать маршрутизации в файле loginComponent, поскольку angular2 найти маршрутизации в bootstraped, т.е. файл в вашем случае boot.ts но когда вы пишете

<a [routerLink]="['/Register']">Register</a> 

это будет выглядеть в файле login.component.ts для маршрутизация. но я не могу найти эту ошибку. и, во-вторых, импорт, который не упоминается в вопросе, который я думаю.

используйте родительскую маршрутизацию в файле login, и я надеюсь, что это поможет.

+0

Я понял, что должен использовать routerLink. Я переместил @RouteConfig в LoginComponent - я все еще получаю ошибку! –

+0

теперь какая ошибка после перемещения @RouteConfig в logincomponent? ошибка такая же или изменена? и проверьте правильность пути импорта для registerCompoent. это правильно или нет. –

0

У меня был такой же ошибка, может быть, если вы переместите этот код

@RouteConfig([ 
    {path: '/login', name: 'Login', component: LoginComponent, useAsDefault: true}, 
    {path: '/register', name: 'Register', component: RegisterComponent} 
]) 

внутри LoginComponent файла.

import {Component} from 'angular2/core'; 
import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators} from 'angular2/common'; 
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router'; 
import {Http, Headers, Response} from "angular2/http"; 

@Component({ 
    selector: 'login', 
    templateUrl: 'app/login/login.component.html', 
    directives: [FORM_DIRECTIVES, ROUTER_DIRECTIVES] 
}) 

export class LoginComponent { 
..// 

import {Component} from 'angular2/core'; 
    import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators} from 'angular2/common'; 
    import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router'; 
    import {Http, Headers, Response} from "angular2/http"; 

    @RouteConfig([ 
    {path: '/login', name: 'Login', component: LoginComponent, useAsDefault: true}, 
    {path: '/register', name: 'Register', component: RegisterComponent} 
    ]) 

    @Component({ 
     selector: 'login', 
     templateUrl: 'app/login/login.component.html', 
     directives: [FORM_DIRECTIVES, ROUTER_DIRECTIVES] 
    }) 

    export class LoginComponent { 
    ..// 

Я надеюсь, что это поможет вам, и извините за мой плохой английский.

0

Привет, возможно, немного поздно, но я думаю, что проблема была, вероятно, в том, что ваша ссылка на имя была неправильной. Ссылка должна была быть следующей, если удалить косую черту.

<a [routerLink]="['Register']">Register</a> 
Смежные вопросы