Question

我对Angular 2.0很新（谁不是！？！？！）我无法让我的路由工作！我一直收到错误＆＃39; Component "LoginComponent" has no route config. in [['/Register'] in LoginComponent＆＃39;。

这是我的@RouteConfig和我的boot.ts文件中的引导代码（以证明我注入了依赖项）

bootstrap(LoginComponent, [
    ROUTER_PROVIDERS, HTTP_PROVIDERS
]);

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

这是我的login.component.ts文件中的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 {

    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>

但是在浏览器中我遇到以下错误：

EXCEPTION：Component＆＃34; LoginComponent＆＃34;没有路由配置。在   [[＆＃39; / Register＆＃39;]在LoginComponent @ 23:19]

原始例外：组件   ＆＃34; LoginComponent＆＃34;没有路由配置。

ORIGINAL STACKTRACE：错误：   组件＆＃34; LoginComponent＆＃34;没有路由配置。

任何人都可以看到问题究竟是什么？默认有效，一切正常，直到我引入<a [routerLink]="['/Register']">Register</a>超链接。我已经尝试了一段时间了！

这是我的项目结构（如果它有帮助）......

Answer 1

实际上我可以理解问题出在路由文件中，因为你是Bootstrap登录组件文件而你正在boot.ts文件中进行路由。但是你必须在loginComponent文件中进行路由，因为angular2在bootstraped文件中找到路由，例如在你的情况下是boot.ts但是当你写的时候

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

这将在login.component.ts文件中查找路由。但无法找到我认为的错误。其次是我认为的问题中未提及的进口。

在logincomponent文件中使用您的父路由，我希望这会有所帮助。

Answer 2

我遇到了类似的错误，也许如果你移动此代码

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 {
..//

在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 {
    ..//

<div class="container">
  <div class="Mainbody3">
    <div class="pancontrol">
      <div class="panel panel-default">
        <div class="panel-heading">Panel Title</div>
        <div class="panel-body">
          <div class="row">
            <div class="col-lg-4 col-md-3 col-sm-4 col-xs-3">
              <div class="panel panel-default">
                <div class="panel-body"><img src="https://juicerecipes.com/media/cache/7b/c1/7bc189caa0876b4793f6a0ddfd32dae8.jpg" alt="" class="img-responsive" />
                </div>
              </div>
              <div class="panel panel-default">
                <p>
                  Button
                </p>
              </div>
            </div>
            <div class="col-lg-10 col-md-9 col-sm-8 col-xs-6">
              <h4 align="center">
                List Title
              </h4>
              <ul class="list-group">
                <li class="list-group-item">Item One</li>
                <li class="list-group-item">Item Two</li>
                <li class="list-group-item">Item Two</li>
                <li class="list-group-item">Item Two</li>
                <li class="list-group-item">Item Two</li>
              </ul>
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            </div>
          </div>
        </div>
        <div class="panel-footer">
            Here comes some text
        </div>
      </div>
    </div>
  </div>
</div>

我希望这会对你有所帮助，对不起我的英语不好。

Answer 3

嗨可能有点迟了但我觉得问题可能是你的名字引用不正确。链接应如下所示删除正斜杠。

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

组件没有路由配置。在组件中 - 角度2路由错误

3 个答案: