angular - 无法绑定(bind)到 'routerLink'，因为它不是 'a' 的已知属性。 ("<header id=" header ">

Question

之前有人问过这个问题，我做了所有建议的评论，但似乎都没有用。我有一个问题的组合。让 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 {
}

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

我还在 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.
错误:组件 HomeComponent 不是任何 NgModule 的一部分，或者该模块尚未导入到您的模块中。


但是 HomeCompenent 显然在我的 @NgModule

Answer 1

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

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

因此，测试环境模块中包含的所有内容都是 AppComponent。 AppModule 中的任何内容都不包含在内。

所以您收到错误是因为您缺少 RouterModule 中包含的所有路由器指令。您可以导入 RouterModule，但对于测试，您应该改为使用 RouterTestingModule

import { RouterTestingModule } from '@angular/core/testing'

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

您可以将路由添加到 withRoutes。

另请参阅:

• Angular 2 unit testing components with routerLink