我正在使用npm test
我遇到以下错误：
Failed: Template parse errors:
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("
<nav>
<ul>
<li><a class="nav-link active" [ERROR ->][routerLink]="['/movies']" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}" c"): ng:///DynamicTestModule/AppComponent.html@4:39
Can't bind to 'routerLinkActiveOptions' since it isn't a known property of 'a'. ("l>
<li><a class="nav-link active" [routerLink]="['/movies']" routerLinkActive="active-link" [ERROR ->][routerLinkActiveOptions]="{exact: true}" class="fa fa-home"><span>Home</span></a></li>
<li><"): ng:///DynamicTestModule/AppComponent.html@4:97
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("uterLinkActiveOptions]="{exact: true}" class="fa fa-home"><span>Home</span></a></li>
<li><a [ERROR ->][routerLink]="['/movies']" class="fa fa-film"><span>Best Movies 200's</span></a></li>
<li><a "): ng:///DynamicTestModule/AppComponent.html@5:15
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("routerLink]="['/movies']" class="fa fa-film"><span>Best Movies 200's</span></a></li>
<li><a [ERROR ->][routerLink]="['/theatre']" class="fa fa-television"><span>Movies in Theatre</span></a></li>
"): ng:///DynamicTestModule/AppComponent.html@6:15
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("ink]="['/theatre']" class="fa fa-television"><span>Movies in Theatre</span></a></li>
<li><a [ERROR ->][routerLink]="['/tvshows']" class="fa fa-video-camera"><span>Tv Shows</span></a></li>
<li><a "): ng:///DynamicTestModule/AppComponent.html@7:15
'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 class="container">
[ERROR ->]<router-outlet></router-outlet>
</div>"): ng:///DynamicTestModule/AppComponent.html@15:2
这是正在使用的html页面，应用html
<section>
<div class="tabs tabs-style-fillup">
<nav>
<ul>
<li><a class="nav-link active" [routerLink]="['/movies']" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}" class="fa fa-home"><span>Home</span></a></li>
<li><a [routerLink]="['/movies']" class="fa fa-film"><span>Best Movies 200's</span></a></li>
<li><a [routerLink]="['/theatre']" class="fa fa-television"><span>Movies in Theatre</span></a></li>
<li><a [routerLink]="['/tvshows']" class="fa fa-video-camera"><span>Tv Shows</span></a></li>
<li><a href="#section-fillup-5" class="fa fa-gear"><span>Settings</span></a></li>
</ul>
</nav>
</div><!-- /tabs -->
</section>
<div class="container">
<router-outlet></router-outlet>
</div>
这是主要模块app模块。ts
import { BrowserModule } from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { MoviesComponent } from './movies/movies.component';
import { AppRoutingModule } from './app-routing/app-routing.module';
import { TheatreComponent } from './theatre/theatre.component';
import { TvShowsComponent } from './tv-shows/tv-shows.component';
import { DataFilterPipe } from './data-filter.pipe';
import {MatTableModule} from '@angular/material/table';
// tslint:disable-next-line:max-line-length
import {MatFormFieldModule, MatSortModule, MatInputModule, MatAutocompleteModule, MatBadgeModule, MatBottomSheetModule, MatSelectModule} from '@angular/material';
import {MatPaginatorModule} from '@angular/material/paginator';
import { CdkTableModule } from '../..
/node_modules/@angular/cdk/table';
import { CdkTreeModule } from '../../node_modules/@angular/cdk/tree';
@NgModule({
declarations: [
AppComponent,
MoviesComponent,
TheatreComponent,
TvShowsComponent,
DataFilterPipe
],
imports: [
AppRoutingModule,
BrowserModule,
MatFormFieldModule,
ReactiveFormsModule,
MatSortModule,
MatTableModule,
MatPaginatorModule,
MatSelectModule,
CdkTableModule,
CdkTreeModule,
MatAutocompleteModule,
MatBadgeModule,
MatBottomSheetModule,
MatInputModule,
HttpModule,
BrowserAnimationsModule,
HttpClientModule,
FormsModule,
RouterModule
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
这是我用于路由应用程序路由模块的自定义模块
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MoviesComponent } from '../movies/movies.component';
import { TheatreComponent } from '../theatre/theatre.component';
import { TvShowsComponent } from '../tv-shows/tv-shows.component';
import { CommonModule } from '@angular/common';
const routes: Routes = [
{
path: 'movies',
component: MoviesComponent
},
{
path: 'theatre',
component: TheatreComponent
},
{
path: 'tvshows',
component: TvShowsComponent
},
{
path: '',
redirectTo: 'movies',
pathMatch: 'full'
}
];
@NgModule({
imports: [CommonModule, RouterModule.forRoot(routes)],
exports: [RouterModule],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppRoutingModule { }
**
更新
**
这是测试规范.ts文件
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
}).compileComponents();
}));
it('should create the app', async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
it(`should have as title 'app'`, async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('app');
}));
it('should render title in a h1 tag', async(() => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('Welcome to movies-client!');
}));
});
注意：我尝试将CUSTOM_ELEMENTS_SCHEMA添加到应用程序component.spec.ts中，直到出现相同的错误，尝试了不同的组合，但是在单元测试中我没有丢失什么吗？还是什么 ？
问题
我的代码有什么问题？
答案 0 :(得分：1)
您应该在测试规范中导入RouterTestingModule。
TestBed.configureTestingModule({
.......
imports: [
RouterTestingModule,
......
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
......
})