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

Question

这已经被问过了，我做了所有建议的评论，但似乎没有任何工作。出了错误，当我运行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

---------------------回答和解释是below-- ----------

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

Answer 1

这是您的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(); 
}); 

Answer 2

当您使用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