Question

我使用angular-cli with angular2 v4.0 with angular material。

Dudes ......所有的错误都是什么？我正在努力学习业力，如果我运行npm测试，我会得到34个与材料相关的失败...例如

Can't bind to 'routerLinkActive' since it isn't a known property of 'a'
Can't bind to 'md-menu-trigger-for' since it isn't a known property of 'button'
Can't bind to 'md-menu-trigger-for' since it isn't a known property of 'button'

If 'md-menu' is an Angular component, then verify that it is part of this module.

等等

如何让角质材料与业力相得益彰？

我的应用程序工作正常，但如果达到业力......将是一场彻底的灾难。

由于

编辑：

我有很多！ app.module.ts文件中的@NgModule中的声明，entryComponents，导入和提供程序。看起来我必须添加每个例如我的dashboard.component.spec.ts文件。我一个接一个地添加，并没有变得愚蠢。我真的不想添加不相关的组件。我怎样才能导入app.module.ts文件？我还有50个要导入...

这是我得到的错误类型：

Failed: Uncaught (in promise): Error: Component BlankComponent is not part of any NgModule or the module has not been imported into your module.

如果我导入那么伟大..恐怖将消失只是抱怨另一个..

如何精简？

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

import { DashboardComponent } from './dashboard.component';
import { MaterialModule, MdDatepickerModule, MdNativeDateModule } from '@angular/material';
import { LoggedinService } from '../loggedin.service';
import { BusyService } from '../busy.service';
import { DbBusyService } from '../dbbusy.service';


import { RouterModule } from '@angular/router';
import { ROUTES } from '../app.routes';

import { LoginComponent } from '../login/login.component';
import { CallbackComponent } from '../callback/callback.component';


describe('DashboardComponent', () => {
  let component: DashboardComponent;
  let fixture: ComponentFixture<DashboardComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ DashboardComponent,
                      LoginComponent,
                      CallbackComponent],
      imports: [
        MaterialModule,
        RouterModule.forRoot(ROUTES, { useHash: true })
      ],
      providers: [
        LoggedinService,
        BusyService,
        DbBusyService
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(DashboardComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

我试过这个，但我得到了以下错误。所以我假设有一种方法可以导入app.module并添加到TestBed.configureTestingModule但不清楚如何操作。

import { AppModule } from '../app.module';
beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ DashboardComponent,
                      LoginComponent,
                      CallbackComponent],
      imports: [
        MaterialModule,
        RouterModule.forRoot(ROUTES, { useHash: true }),
         AppModule
      ],
      providers: [
        LoggedinService,
        BusyService,
        DbBusyService
      ]
    })
    .compileComponents();
  }));

失败：类型DashboardComponent是2个模块声明的一部分：AppModule和DynamicTestModule！请考虑将DashboardComponent移动到导入AppModule和DynamicTestModule的更高模块。您还可以创建一个新的NgModule，它导出并包含DashboardComponent，然后在AppModule和DynamicTestModule中导入该NgModule。

Answer 1

因此，我遇到了完全相同的问题，但令我沮丧的是，该帖子没有答案。我终于有了测试功能，因此我将提交一个答案，该答案显示了为我解决了此问题的方法。对于我的团队来说，这已经成为多个发行版的问题，但是我们并没有依靠测试，因此将其推到了我们的修复列表的底部。

首先，我认为其中一部分与桶装有关。并非所有主要组件都作为声明添加到app.modules.ts文件中。因此，首先，我将所有具有相应.spec文件的组件文件添加为我的app.module.ts

中的声明。

将具有规格文件的组件添加到我的app.module中，可以修复以下错误：

失败：未捕获（承诺）：错误：组件BlankComponent不属于任何NgModule或模块尚未导入到模块中。

这不能解决我所有的问题，但是我遇到了以下错误：

错误错误：StaticInjectorError [ChildrenOutletContexts]： StaticInjectorError [ChildrenOutletContexts]：NullInjectorError：没有为ChildrenOutletContexts提供程序！

此问题的评论中提到的某些内容已解决：

您可能需要从@ angular / router / testing导入（就ES6和Testbed.configureTestingModule而言）RouterTestingModule

我更改了样板规范以使用RouterTestingModule，此解决了No Provider错误。

这是我的新规格文件的外观（通过！）：

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import {RouterTestingModule} from '@angular/router/testing';
describe('AppComponent', () => {
 beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations: [
            AppComponent
        ],
        imports: [
        RouterTestingModule
      ],
    }).compileComponents();
  }));
   it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
});

所以现在在我的规范的声明部分中，我只有要测试的组件，对于导入（样板），我现在有了RouterTestingModule。

新的angular2 karma测试 - 将app.module添加到TestBed.configureTestingModule

1 个答案: