Angular testing: Error: NG0304: 'mat-form-field' is not a known element (used in the...

Im trying to do a small app with TDD.

When i run npm test following error occurs: Error: NG0304: 'mat-form-field' is not a known element (used in the 'SignInComponent' component template):

1. If 'mat-form-field' is an Angular component, then verify that it is a part of an @NgModule where this component is declared.

My Modules: app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule, provideClientHydration } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [
provideClientHydration(),
provideAnimationsAsync()
],
bootstrap: [AppComponent]
})
export class AppModule { }



app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
{
path: 'sign-in',
loadChildren: () => import('./pages/sign-in/sign-in.module')
.then((m) => m.SignInModule),
},
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}


sign-in.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { SignInComponent } from './sign-in.component';
import { MatFormFieldModule } from '@angular/material/form-field';


const routes: Routes = [
{
path : '',
component: SignInComponent
}
]

@NgModule({
declarations: [SignInComponent],
imports: [
CommonModule,
RouterModule.forChild(routes),
MatInputModule,
MatButtonModule,
MatFormFieldModule
]
})
export class SignInModule { }




sign-in.component.html

<main>
<form >
<mat-form-field >
<mat-label>Email</mat-label>
<input matInput type="email" placeholder="user@example.com">
</mat-form-field>
<mat-form-field >
<mat-label>Password</mat-label>
<input matInput type="password" placeholder="password">
</mat-form-field>
<div class="alligned-right">
<button mat-button>Recover password</button>
</div>
<button mat-raised-button>LOGIN</button>
</form>
</main>



sign-in.component.spec.ts

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

import { SignInComponent } from './sign-in.component';

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

beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [SignInComponent]
})
.compileComponents();


fixture = TestBed.createComponent(SignInComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

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



tried moving the declaration array in sign-inModule after imports, tried adding MatFormFieldModule to imports in sign-in Module and in app module. tried adding import in testclass to configureTestingModule(). nothing did the trick... after the last attempt i get the error: Error: NG05105: Unexpected synthetic property @transitionMessages found. Please make sure that:

• Either BrowserAnimationsModule or NoopAnimationsModule are imported in your application.
• There is corresponding configuration for the animation named @transitionMessages defined in the animations field of the @Component decorator (see https://angular.io/api/core/Component#animations).

Thank you for any help!

Continue reading...