【问题标题】:Error with <rrouter-outlet> by running Karma test运行 Karma 测试导致 <router-outlet> 出错
【发布时间】:2017-08-02 05:51:47
【问题描述】:

您好,我是 Angular、Material 和 Karma 的新手,我构建了一个小型应用程序并运行测试。我在 app.componente.ts 中添加了所有需要的模块,但出现以下错误。

Failed: Template parse errors:
'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>
<div md-content>
    [ERROR ->]<router-outlet></router-outlet>
</div>

"): ng:///DynamicTestModule/AppComponent.html@6:4

这是我的 app.component 中所有导入的列表。

app.component.ts 的导入

import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import {Http, HttpModule} from '@angular/http';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {FormsModule} from "@angular/forms";
import {NgModule} from "@angular/core";
import {  MdSidenavModule, MdButtonModule, MdInputModule, MdCardModule, MdMenuModule, MdToolbarModule, MdIconModule,
  MdCardContent, MdToolbar, MdToolbarRow, MdToolbarBase
} from '@angular/material'


imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    RouterModule,
    RouterModule.forRoot(appRoutes, { enableTracing: true } ),
    BrowserAnimationsModule,
    MdButtonModule,
    MdCardModule,
    MdMenuModule,
    MdToolbarModule,
    MdIconModule,
    MdInputModule
  ],

我不知道如何解决这个问题。有人可以给我提示吗?

更新 这是测试。

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();
  }));

app.component.html

<div layout="row">
    <div md-toolbar color="primary">
        <h1>{{ title }}</h1>
    </div> </div> <div md-content>
    <router-outlet></router-outlet> </div>

【问题讨论】:

  • 那么,你的测试代码是什么?
  • 好的。因此,您在应用程序模块中放入的内容无关紧要。您的测试使用一个只包含一件事的模块:AppComponent。没有其他的。没有导入,没有提供者,什么都没有,因为您传递给 configureTestingModule() 的是一个仅声明 AppComponent 的模块定义。将 RouterTestingModule 添加到传递给 configureTestingModule 的模块定义的导入中。

标签: angularjs karma-jasmine angular-material2


【解决方案1】:
beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ], imports: [RouterTestingModule], // <--- 
    }).compileComponents();
  }));

【讨论】:

  • RouterTestingModule 丢失。导入此类后,它就可以工作了。
  • 抱歉缺少评论,谢谢 michael-mammut
猜你喜欢
  • 1970-01-01
  • 2021-04-14
  • 1970-01-01
  • 2016-06-24
  • 1970-01-01
  • 2016-04-14
  • 2020-08-26
  • 2014-07-28
  • 1970-01-01
相关资源
最近更新 更多