我的组件有一个小问题。在我的浏览器中一切正常,没有任何错误,但 Karma 调试器会抛出一些错误,就我想要的一切而言,我想修复它。
错误:
Failed: Template parse errors:
'dj-menu' is not a known element:
1. If 'dj-menu' is an Angular component, then verify that it is part of this module.
2. If 'dj-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
该<dj-menu>
选择器被用在app.component.html
。
menu.component.ts
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'dj-menu',
template: `<nav>
<button mat-button routerLink="/login" routerLinkActive="active">Login</button>
<button mat-button routerLink="/register" routerLinkActive="active">Register</button>
<button mat-button routerLink="/profile" routerLinkActive="active">Profile</button>
<button mat-button routerLink="/radio">Radio</button>
</nav>
`,
styleUrls: ['./menu.component.scss']
})
export class MenuComponent implements OnInit {
{...} // only an empty constructor and ngOnInit()
}
我有一个MenuComponent
宣布declarations
在@NgModule
的app.module.ts。
正如我所说,它在浏览器中运行良好,但在 Karma 调试器中运行良好。到目前为止,我尝试了一些关于类似错误的答案(例如,如果 '<selector>' 是一个 Angular 组件,则验证它是否是该模块的一部分)但没有任何效果。
我感谢任何帮助,谢谢。
您需要存根子组件,当您正在测试父组件,比如我有两个组成部分之一app
,另一个是dj-menu
那么我应该嘲笑dj-menu
在app
使用代码类似下面的测试
@Component({
selector: 'dj-menu',
template: '<h1> Some test </h1>'
})
class DjMenuComponentStub{
}
我的应用程序组件看起来像这样(使用dj-menu
)
@Component({
selector: 'app',
template: '<dj-menu></dj-menu>'
})
class AppComponent{
}
在测试应用程序组件时,angular 不知道dj-menu
您必须通过声明来告诉 angular 使用存根组件
TestBed.configureTestingModule({
declarations: [ DjMenuComponentStub ]
})
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句