'routerLink'にはバインドできません。 'a'の既知のプロパティではないためです。 （ "<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を使用する場合。あなたの現在の設定では、あなたが持っているすべては、したがって、すべてのテスト環境用のモジュールに含まれていることAppComponentある

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

です。 AppModuleのものは含まれていません。

RouterModuleに含まれているルータのディレクティブがすべて不足しているため、エラーが表示されます。あなたはRouterModuleをインポートすることもできますが、テストのために、あなたの代わりにあなたがwithRoutesにルートを追加することができますRouterTestingModule

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

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

を使用する必要があります。

関連項目：

• Angular 2 unit testing components with routerLink