由於它不是'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