无法绑定到'routerLink'，因为它不是'a'的已知属性。 （“<header id =”header“>

时间：2016-12-31 15:23:20

标签： angular

以前曾经问过这个问题我做了所有建议的评论，但似乎都没有。我有一个问题的组合。让wallaby.js使用我的项目并在运行ng test时找出错误。

Can't bind to 'routerLink' since it isn't a known property of 'a'. ("<header id="header">                                                                                         <h1 id="logo">                                                                                                                                                                    <a [ERROR ->][routerLink]="['/home']"></a>                                                                                                        
                </h1>
        "): AppComponent@2:5
        Can't bind to 'routerLink' since it isn't a known property of 'a'. ("
                <div id="menu">
                        <a [ERROR ->][routerLink]="['/home']" class="btn">Home</a>
                        <a [routerLink]="['/about']" class="btn">About</a>
                        "): AppComponent@6:5
        Can't bind to 'routerLink' since it isn't a known property of 'a'. ("
                <div id="menu">
                        <a [routerLink]="['/home']" class="btn">Home</a>
                        <a [ERROR ->][routerLink]="['/about']" class="btn">About</a>
                        <a [routerLink]="['/experiments']" class="btn">Expe"): AppComponent@7:5
        Can't bind to 'routerLink' since it isn't a known property of 'a'. ("terLink]="['/home']" class="btn">Home</a>
                        <a [routerLink]="['/about']" class="btn">About</a>
                        <a [ERROR ->][routerLink]="['/experiments']" class="btn">Experiments</a>
                </div>
        "): AppComponent@8:5
        'router-outlet' is not a known element:
        1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
        2. If 'router-outlet' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
        <div id="container">
                [ERROR ->]<router-outlet></router-outlet>
        </div>
        "): AppComponent@18:1

我的NgModule 

import {BrowserModule} from "@angular/platform-browser";
import {NgModule,CUSTOM_ELEMENTS_SCHEMA} from "@angular/core";
import {FormsModule} from "@angular/forms";
import {HttpModule} from "@angular/http";
import {RouterModule} from "@angular/router";
import {HomeComponent} from "./home/home.component";
import {ExperimentsComponent} from "./experiments/experiments.component";
import {AboutComponent} from "./about/about.component";
import {AppComponent} from "./app.component";
import {ExperimentsService} from "./common/experiments.service";
import {StateService} from "./common/state.service";
import {ExperimentDetailComponent} from "./experiments/experiment-details/experiment.detail.component";

@NgModule({
    declarations: [
        AppComponent,
        AboutComponent,
        HomeComponent,
        ExperimentsComponent,
        ExperimentDetailComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        RouterModule.forRoot([
            {path: '', redirectTo: '/home', pathMatch: 'full'},
            {path: 'home', component: HomeComponent},
            {path: 'about', component: AboutComponent},
            {path: 'experiments', component: ExperimentsComponent},
            {path: '**', component: HomeComponent}
        ])
    ],
    schemas: [
      CUSTOM_ELEMENTS_SCHEMA
    ],
    providers: [
        ExperimentsService,
        StateService
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

这是唯一的模块。这是一个简单的应用程序：

enter image description here

enter image description here

我还在GitHub上发布了这个项目HERE

---------------------答案及解释如下------------ 

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import {RouterTestingModule} from "@angular/router/testing";
import {HomeComponent} from "./home/home.component";
import {AboutComponent} from "./about/about.component";
import {ExperimentsComponent} from "./experiments/experiments.component";

describe('AppComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule.withRoutes([
          {path: '', redirectTo: '/home', pathMatch: 'full'},
          {path: 'home', component: HomeComponent},
          {path: 'about', component: AboutComponent},
          {path: 'experiments', component: ExperimentsComponent},
          {path: '**', component: HomeComponent}
        ])
      ],
      declarations: [
        AppComponent
      ],
    });
    TestBed.compileComponents();
  });

  it('should create the app', async(() => {
    let fixture = TestBed.createComponent(AppComponent);
    let app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
});

但是现在我得到了Failed: Component HomeComponent is not part of any NgModule or the module has not been imported into your module. Error: Component HomeComponent is not part of any NgModule or the module has not been imported into your module.

但HomeCompenent显然在我的@NgModule

中

2 个答案:

答案 0 :(得分：6)

当您使用TestBed时，您正在从头开始配置模块 。在您当前的配置中，您拥有的只是

TestBed.configureTestingModule({
  declarations: [
    AppComponent
  ],
});

因此，测试环境模块中包含的所有内容都是AppComponent。 <{1}}中没有任何内容。

因此您错过了AppModule中包含的所有路由器指令，因此您收到错误。您可以导入RouterModule，但是对于测试，您应该使用RouterModule 

RouterTestingModule

您可以将路线添加到import { RouterTestingModule } from '@angular/core/testing' TestBed.configureTestingModule({ imports: [ RouterTestingModule.withRoutes([]) ], declarations: [ AppComponent ], }); 。

另见：

答案 1 :(得分：4)

这是你的app.component.spec.ts

你还应该在那里添加routerModule 

beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      imports:[RouterModule.forRoot([])] //add the router module here as well
    });
    TestBed.compileComponents();
  });

当您对AppComponent进行测试时，就像我说的那样，您应该将测试床提供给您的根@NgModule，所以：

 beforeEach( () => {
    TestBed.configureTestingModule( {
        imports : [
            BrowserModule,
            FormsModule,
            HttpModule,
            RouterTestingModule.withRoutes( [
                { path : '', redirectTo : '/home', pathMatch : 'full' },
                { path : 'home', component : HomeComponent },
                { path : 'about', component : AboutComponent },
                { path : 'experiments', component : ExperimentsComponent },
                { path : '**', component : HomeComponent }
            ] )
        ],
        declarations : [
            AppComponent,
            AboutComponent,
            HomeComponent,
            ExperimentsComponent,
            ExperimentDetailComponent
        ],

        schemas : [
            CUSTOM_ELEMENTS_SCHEMA
        ],
        providers : [
            ExperimentsService,
            StateService
        ]
    } );
    TestBed.compileComponents();
} );
相关问题
最新问题