Javascript Angular Karma Jasmine 错误：非法状态：无法加载指令摘要
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45584957/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular Karma Jasmine Error: Illegal state: Could not load the summary for directive
提问by ismaestro
I'm developing a github repository(with angular 7 and angular-cli), and I have some tests with Karma and Jasmine working in the master branch.
我正在开发一个github 存储库（使用 angular 7 和 angular-cli），并且我对在 master 分支中工作的 Karma 和 Jasmine 进行了一些测试。
Now I'm trying to add lazy loading feature, the thing is, that the tests that before passed, now they do not. It's funny because only the tests from the lazy loading module are failing...
现在我正在尝试添加延迟加载功能，问题是，之前通过的测试现在没有通过。这很有趣，因为只有来自延迟加载模块的测试失败了......
Here is the code and the error:
这是代码和错误：
import {async, TestBed} from '@angular/core/testing';
import {APP_BASE_HREF} from '@angular/common';
import {AppModule} from '../../app.module';
import {HeroDetailComponent} from './hero-detail.component';
describe('HeroDetailComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [AppModule
],
providers: [
{provide: APP_BASE_HREF, useValue: '/'}
],
}).compileComponents();
}));
it('should create hero detail component', (() => {
const fixture = TestBed.createComponent(HeroDetailComponent);
const component = fixture.debugElement.componentInstance;
expect(component).toBeTruthy();
}));
});
The error is this:
错误是这样的：
Chrome 58.0.3029 (Mac OS X 10.12.6) HeroDetailComponent should create hero detail component FAILED
Error: Illegal state: Could not load the summary for directive HeroDetailComponent.
at syntaxError Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/compiler/@angular/compiler.es5.js:1690:22)
at CompileMetadataResolver.getDirectiveSummary Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/compiler/@angular/compiler.es5.js:15272:1)
at JitCompiler.getComponentFactory Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/compiler/@angular/compiler.es5.js:26733:26)
at TestingCompilerImpl.getComponentFactory Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/compiler/@angular/compiler/testing.es5.js:484:1)
at TestBed.createComponent Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/core/@angular/core/testing.es5.js:874:1)
at Function.TestBed.createComponent Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/core/@angular/core/testing.es5.js:652:1)
at UserContext.it Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/src/app/heroes/hero-detail/hero-detail.component.spec.ts:18:29)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/zone.js/dist/zone.js:391:1)
at ProxyZoneSpec.onInvoke Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/zone.js/dist/proxy.js:79:1)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/zone.js/dist/zone.js:390:1)
You can see the entire project, for more details if you need it.
如果需要，您可以查看整个项目，了解更多详细信息。
UPDATE: added declaration like this:
更新：添加如下声明：
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
AppModule
],
declarations: [HeroDetailComponent],
providers: [
{provide: APP_BASE_HREF, useValue: '/'}
],
}).compileComponents();
}));
Now, new errors appears:
现在，出现新错误：
The pipe 'translate' could not be found ("<h1 class="section-title">{{[ERROR ->]'heroDetail' | translate}}</h1>
<md-progress-spinner *ngIf="!hero"
class="progre"): ng:///DynamicTestModule/HeroDetailComponent.html@0:28
Can't bind to 'color' since it isn't a known property of 'md-progress-spinner'.
And more... it's like all directives and components from angular material, and the pipe translate from ngx-translate/core do not appear to be included...
还有更多......就像来自angular material的所有指令和组件一样，从ngx-translate/core翻译的管道似乎不包括在内......
UPDATED: FINAL SOLUTION
更新：最终解决方案
The problem was that HeroesModule was not been imported anywhere. This works, because HeroesModule declares HeroDetailComponent, which was the initial problem:
问题是 HeroesModule 没有被导入到任何地方。这是有效的，因为 HeroesModule 声明了 HeroDetailComponent，这是最初的问题：
import {async, TestBed} from '@angular/core/testing';
import {APP_BASE_HREF} from '@angular/common';
import {AppModule} from '../../app.module';
import {HeroDetailComponent} from './hero-detail.component';
import {HeroesModule} from '../heroes.module';
describe('HeroDetailComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
AppModule,
HeroesModule
],
providers: [
{provide: APP_BASE_HREF, useValue: '/'}
],
}).compileComponents();
}));
it('should create hero detail component', (() => {
const fixture = TestBed.createComponent(HeroDetailComponent);
const component = fixture.debugElement.componentInstance;
expect(component).toBeTruthy();
}));
});
回答by lexith
You passed HeroDetailComponentto TestBed.createComponent()without declaring the component first:
您HeroDetailComponent在TestBed.createComponent()没有先声明组件的情况下传递给：
TestBed.configureTestingModule({
imports: [AppModule,
CommonModule,
FormsModule,
SharedModule,
HeroRoutingModule,
ReactiveFormsModule
],
providers: [
{provide: APP_BASE_HREF, useValue: '/'}
],
declarations: [HeroDetailComponent]
}).compileComponents();
Hope it helps.
希望能帮助到你。
Update for following errors in your test: Added some more imports (just take your HeroModule as a blueprint because that's basically what you want to import and provide).
更新测试中的以下错误：添加了更多导入（只需将您的 HeroModule 作为蓝图，因为这基本上是您想要导入和提供的内容）。
回答by Akash Yellappa
You're missing the declarations, you need to add the class being tested into the declarations.
您缺少声明，您需要将正在测试的类添加到声明中。
declarations: [component]
回答by Vijay Barot
This type of error raised due to missing adding component in declarations and services in provider of TestBed configuration.
由于在 TestBed 配置的提供者的声明和服务中缺少添加组件而引发的此类错误。
beforeEach(() => {
TestBed.configureTestingModule({
imports: [RouterTestingModule.withRoutes([
{ path: 'home', component: DummyComponent },
{ path: 'patients/find', component: DummyComponent }
])],
declarations: [RoutingComponent, DummyComponent,BreadcrumbComponent],
providers : [BreadCrumbService]
});
回答by christo8989
My coworker and I had this issue but the fix was way different than anything else on the internet.
我和我的同事遇到了这个问题，但修复方法与互联网上的其他任何方法都不同。
We are using Visual Studio Code and the folder names are case insensitive. Because of that, we asked everyone to use a lowercase naming convention but eventually an uppercase name got into source control. We renamed it, in a roundabout way, and everything was fine.
我们使用的是 Visual Studio Code，文件夹名称不区分大小写。因此，我们要求每个人都使用小写命名约定，但最终大写名称进入了源代码管理。我们以一种迂回的方式重命名了它，一切都很好。
A month later, my coworker started getting a specific unit test to break with this error message. Only his computer was breaking on that test. We literally commented out all the code that could possible be effecting the test and we still got the error. Finally, I globally searched for the class and we realized that the folder name had reverted back to the uppercase name. We renamed it back to a lowercase name, with no pending changes recognized might I add..., and the test worked.
一个月后，我的同事开始进行特定的单元测试以打破此错误消息。在那次测试中，只有他的电脑坏了。我们从字面上注释掉了所有可能影响测试的代码，但仍然出现错误。最后，我全局搜索了类，我们意识到文件夹名称已恢复为大写名称。我们将其重命名为小写名称，我可以添加未识别的未决更改...，并且测试成功了。
Let that be a lesson to follow style guides. :)
让这成为遵循风格指南的一课。:)
For clarity, the fix was similar to changing the folder name FOOto foo.
为清楚起见，修复类似于将文件夹名称更改FOO为foo.
回答by Adam P
For those who are still having issues with this - I read a separate github issue that discussed changes the Angular team made to the beforeEach callback function.
对于那些仍然有问题的人 - 我阅读了一个单独的 github 问题，该问题讨论了 Angular 团队对 beforeEach 回调函数所做的更改。
Here is what I did:
这是我所做的：
beforeAll(async(() => {
TestBed.configureTestingModule({
declarations: [BannerNotificationComponent]
}).compileComponents()
fixture = TestBed.createComponent(BannerNotificationComponent);
component = fixture.componentInstance;
fixture.detectChanges();
}));
Using beforeAll fixes the issue. Hope this helps others as it took me about a day to get this resolve this obscure bug.
使用 beforeAll 解决了这个问题。希望这可以帮助其他人，因为我花了大约一天的时间来解决这个晦涩的错误。
回答by sami
you must import the component HeroDetailComponentin the right way. Noticethat even case of letters is matter in paths. i.e ('@angular/forms' is correct, BUT'@angular/Forms' is not.
您必须以正确的方式导入组件HeroDetailComponent。请注意，即使是字母大小写在路径中也很重要。即（'@angular/forms' 是正确的，但'@angular/Forms' 不是。
回答by Stevanicus
If you want to test a component without compiling it then you can by declaring it as a provider:
如果你想在不编译的情况下测试一个组件，那么你可以将它声明为提供者：
beforeEach(() => {
TestBed.configureTestingModule({
// provide the component-under-test and dependent service
providers: [
WelcomeComponent,
{ provide: UserService, useClass: MockUserService }
]
});
// inject both the component and the dependent service.
comp = TestBed.get(WelcomeComponent);
userService = TestBed.get(UserService);
});
