This is the basic unit-test, for my StatusComponent containing the Angular material component < mat-slide-toggle >. As generated by the ngCli command.
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { StatusComponent } from './status.component';
describe('StatusComponent', () => {
let component: StatusComponent;
let fixture: ComponentFixture<StatusComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [StatusComponent],
}).compileComponents();
fixture = TestBed.createComponent(StatusComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
(<any>expect(component)).toBeTruthy(); // See Jasmine MATCHERS
});
});
The application works, with no compilation errors!
But running ng test, it complains that 'mat-slide-toggle' is not a known element.
Message of the testrun:
ERROR: 'NG0303: Can't bind to 'ngModel' since it isn't a known property of 'mat-slide-toggle' (used in the 'StatusComponent' component template).
- If 'mat-slide-toggle' is an Angular component and it has the 'ngModel' input, then verify that it is a part of an @NgModule where this component is declared.
- If 'mat-slide-toggle' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
- To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.'
The "StatusComponent" is declared in the user.module, containing (in my opinion) all the necessary configurations. Complying with the given hint (1.)
UserModule:
import { BannerModule } from '../banner/banner.module';
import { CommonModule } from '@angular/common';
import { EqualToDirective } from './equal-to.directive';
import { FormsModule } from '@angular/forms';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MaterialModule } from '../material.module';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { NgModule } from '@angular/core';
import { PasswordEntryFormComponent } from './password-entry-form/password-entry-form.component';
import { PasswordRequestComponent } from './password-request/password-request.component';
import { PasswordResetComponent } from './password-reset/password-reset.component';
import { ProfileComponent } from './profile/profile.component';
import { RouterModule } from '@angular/router';
import { StatusComponent } from './status/status.component';
import { UpdateComponent } from './update/update.component';
import { UserDetails } from 'generated-sources';
import { UserDetailsComponent } from './user-details/user-details.component';
import { UserViewComponent } from './user-view/user-view.component';
export interface Employee extends UserDetails {
organizationId?: number;
organizationName?: string;
}
@NgModule({
declarations: [
EqualToDirective,
PasswordEntryFormComponent,
PasswordRequestComponent,
PasswordResetComponent,
ProfileComponent,
StatusComponent,
UpdateComponent,
UserDetailsComponent,
UserViewComponent,
],
imports: [
BannerModule,
CommonModule,
FormsModule,
MatCheckboxModule,
MaterialModule,
MatGridListModule,
MatSlideToggleModule,
RouterModule,
],
exports: [StatusComponent, UserViewComponent],
})
export class UserModule {}
What kind of declaration I am missing?