Angular Karma Jasmine 测试“无法绑定到‘ngIf’，因为它不是已知属性”

Question

我对 Angular 的 Karma Jasmine 测试@Component抱怨说

错误：“无法绑定到‘ngIf’，因为它不是‘p’的已知属性。”

当应用程序本身出现此类错误时，修复方法是确保将其添加BrowserModule到应用程序模块 ( )imports: []中。我确实有这个导入（所以这个问题不是关于“无法绑定到 'ngXXX' 因为它不是 'YYY' 的已知属性”的规范问题的重复）。@NgModule()app.module.ts

这是我的测试设置代码：

    let component: MyComponent;
    let fixture: ComponentFixture<MyComponent>;

    beforeEach(async () => {
        TestBed.configureTestingModule({
            imports: [
                BrowserModule
            ],
            providers: [
                MyComponent,
                { provide: MyService, useClass: MockMyService }
            ]
        }).compileComponents();
        TestBed.inject(MyService);
        component = TestBed.inject(MyComponent);
        fixture = TestBed.createComponent(MyComponent);
        fixture.detectChanges();
    });

我的 HTML 模板显示*ngIf，不是ngIf或拼写错误，这是该错误消息的另一个常见原因：

<div class="self">
    <p *ngIf="isLoggedIn() else selfLogin">Logged in as
        {{getUsername()}}</p>
    <ng-template #selfLogin>
    <button id="login" (click)="login()">login</button>
    </ng-template>
</div>

---

将测试模块配置和对象注入放在单独的beforeEach调用中（如针对不同的 Angular 测试问题的建议）没有帮助。

Answer 1

我看到您将组件包含在您的TestBed providers. 组件通常是declarations. 所以，像这样：

    let fixture: ComponentFixture<MyComponent>;
    let component: MyComponent;

    beforeEach(waitForAsync(() => {
        TestBed.configureTestingModule({
            providers: [
                { provide: MyService, useClass: MockMyService }
            ],
            declarations: [
                MyComponent
            ]
        }).compileComponents();
    }));
    beforeEach(() => {
        TestBed.inject(MyService);
        fixture = TestBed.createComponent(SelfComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

您的声明还存在 HTML 格式问题else：

<div class="self">
    <p *ngIf="isLoggedIn() else selfLogin">Logged in as
        {{getUsername()}}</p>
    <ng-template #selfLogin>
    <button id="login" (click)="login()">login</button>
    </ng-template>
</div>

应该...

*ngIf="isLoggedIn(); else selfLogin"