無法綁定到“routerLink”，因為它不是“a”的已知屬性。 (&quot;<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

我的 Ng 模塊

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. Error: Component HomeComponent is not part of any NgModule or the module has not been imported into your module. 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

使用TestBed您將從頭開始配置模塊。 在您當前的配置中，您擁有的只是

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

因此，測試環境模塊中包含的所有內容都是AppComponent 。 AppModule沒有任何內容。

所以你得到錯誤是因為你缺少RouterModule中包含的所有路由器指令。 您可以導入RouterModule ，但是對於測試，您應該使用RouterTestingModule

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

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

您可以向withRoutes添加路由。

也可以看看：

• 使用routerLink進行Angular 2單元測試組件

Answer 2

這是你的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 3

我也有這個問題，我使用的是自創的模擬路由器。

使用/導入routing 、 router 、 RouterTestingModule.withRoutes([])等的所有示例都給了我更多錯誤。

對我來說，解決方案也是為routerLink指令創建一個模擬（當你不模擬路由器但使用RouterTestingModule時，我不確定在哪里找到實現，可能在RouterTestingModule本身中？）

所以事后看來，我本可以自己創建模擬，但正如他們所說“真正的 RouterLinkDirective 非常復雜，並且與 RouterModule 的其他組件和指令糾纏在一起。它需要具有挑戰性的設置來模擬和在測試中使用。”

我在這里的 Angular 文檔頁面找到了它的實現： https ://angular.io/guide/testing-components-scenarios#routerlink

由於鏈接可以消失，我在這里發布代碼：

@Directive({
  selector: '[routerLink]'
})
export class RouterLinkDirectiveStub {
  @Input('routerLink') linkParams: any;
  navigatedTo: any = null;

  @HostListener('click')
  onClick() {
    this.navigatedTo = this.linkParams;
  }
}