Angular 角度e2e测试：组件不是已知元素

我用

ngcli

创建了一个Angular 4项目，它在Chrome中运行良好，但是当我尝试执行自动测试时，我得到以下错误：

HeadlessChrome 0.0.0 (Windows 10 0.0.0) AppComponent should create the app FAILED
        'vm-navbar' is not a known element:
        1. If 'vm-navbar' is an Angular component, then verify that it is part of this module.
        2. If 'vm-navbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<vm-navbar></vm-navbar>
        <div class="container">
        "): ng:///DynamicTestModule/AppComponent.html@0:0

        '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>

我尝试过这样配置

测试床

，让它了解我的组件，但到目前为止没有成功：

import { NavBarComponent } from "../src/app/navbar/navbar.component";
import { TestBed } from "@angular/core/testing";
...
beforeEach(() => {
    TestBed.configureTestingModule({
        declarations: [ NavBarComponent ]
    });
    page = new AppPage();
});

这就是我的

navbar.component.ts

文件的外观：

import { Component } from "@angular/core";
import { AuthGuard } from "../auth/auth-guard.service";

@Component({
    selector: 'vm-navbar',
    templateUrl: './navbar.component.html',
    styleUrls: [ './navbar.component.scss' ]
})
export class NavBarComponent
{
    constructor(public authGuard: AuthGuard)
    {
    }
}

---

您知道如何解决此问题吗？

发现问题，请注意错误消息中的测试名称是“应创建应用程序”，但源代码中的测试名称是“应显示欢迎消息”。错误发生在我不知道的另一个文件中：默认情况下，Angular在我的组件文件夹（不在我的测试文件夹）中创建了一个

app.component.spec.ts

为了解决这个问题，我在

app.component.spec.ts

中添加了所需的组件：

NavBarComponent

和

AuthComponent

，并在

imports

部分添加了

AppRoutingModule

（这就是我在我的应用程序中所称的路由器）：

---

我没有在规范中看到模块导入file@Vega忘了在这里的代码片段中复制它，但它出现在我的文件中。更新了这个问题。

import { Component } from "@angular/core";
import { AuthGuard } from "../auth/auth-guard.service";

@Component({
    selector: 'vm-navbar',
    templateUrl: './navbar.component.html',
    styleUrls: [ './navbar.component.scss' ]
})
export class NavBarComponent
{
    constructor(public authGuard: AuthGuard)
    {
    }
}

import { TestBed, async } from '@angular/core/testing';

import { AppComponent } from './app.component';
import { NavBarComponent } from "./navbar/navbar.component";
import { AuthGuard } from "./auth/auth-guard.service";
import { AppRoutingModule } from "./app-routing.module";
import { FormsModule } from "@angular/forms";
import { HttpModule } from "@angular/http";
import { APP_BASE_HREF } from '@angular/common';

describe('AppComponent', () => {
    beforeEach(async(() => {
        const authGuardStub = {};

        TestBed.configureTestingModule({
            declarations: [
                AppComponent,
                AuthComponent,
                NavBarComponent
            ],
            imports: [
                AppRoutingModule,
                FormsModule,
                HttpModule
            ],
            providers: [
                { provide: AuthGuard, useValue: authGuardStub },
                { provide: APP_BASE_HREF, useValue : '/' }
            ]
        }).compileComponents();
    }));

    it('should create the app', async(() => {
        const fixture = TestBed.createComponent(AppComponent);
        const app = fixture.debugElement.componentInstance;
        expect(app).toBeTruthy();
    }));
});