I have encountered a series of unit test failures that are puzzling me:
'mat-card' is not recognized as an element (used in the 'ChatCardComponent' component template):'app-card' is not recognized as an element (used in the 'DashboardComponent' component template)R3InjectorError(DynamicTestModule)[DashboardComponent -> DashboardComponent]: NullInjectorError: No provider for DashboardComponent!R3InjectorError(DynamicTestModule)[UserService -> HttpClient -> HttpClient]: NullInjectorError: No provider for HttpClient!'mat-card' is not recognized as an element (used in the 'CardComponent' component template):'app-head-bar' is not recognized as an element (used in the 'HomePageComponent' component template)It's strange to me because I have made sure to declare and import everything needed in my app.module.ts file. I don't have any other module files.
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {HeadBarComponent} from './head-bar/head-bar.component';
import {DashComponent} from './dash/dash.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DashboardComponent } from './card/dashboard/dashboard.component';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatCardModule } from '@angular/material/card';
import { MatMenuModule } from '@angular/material/menu';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { CardComponent } from './card/card.component';
import { KlausurenCardComponent } from './card/klausuren-card/klausuren-card.component';
import { ChatCardComponent } from './card/chat-card/chat-card.component';
import { HausaufgabenCardComponent } from './card/hausaufgaben-card/hausaufgaben-card.component';
import { LoginPageComponent } from './user/login-page/login-page.component';
import { HomePageComponent } from './card/home-page/home-page.component';
import { HttpClientModule } from "@angular/common/http";
import { SettingsComponent } from './settings/settings.component';
import {NgOptimizedImage} from "@angular/common";
@NgModule({
declarations: [
AppComponent,
HeadBarComponent,
DashComponent,
DashboardComponent,
CardComponent,
KlausurenCardComponent,
ChatCardComponent,
HausaufgabenCardComponent,
LoginPageComponent,
HomePageComponent,
SettingsComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatGridListModule,
MatCardModule,
MatMenuModule,
MatIconModule,
HttpClientModule,
MatButtonModule,
NgOptimizedImage
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
As I attempt to run Karma tests for my Angular frontend, I have even reinstalled Angular Materials in case the initial installation was faulty, but unfortunately, the errors persist. What could be causing this issue?
Thank you for your help!