While developing a simple Flashcard application that performs CRUD operations using Angular, Node.js, Express, and PostgreSQL, I encountered the following error:
flashcards-area.component.ts:24 ERROR NullInjectorError: R3InjectorError(AppModule)[Flashcard -> Flashcard -> Flashcard]:
NullInjectorError: No provider for Flashcard!
at NullInjector.get (core.mjs:6368:27)
at R3Injector.get (core.mjs:6795:33)
at R3Injector.get (core.mjs:6795:33)
at R3Injector.get (core.mjs:6795:33)
at ChainedInjector.get (core.mjs:13866:36)
at lookupTokenUsingModuleInjector (core.mjs:3290:39)
at getOrCreateInjectable (core.mjs:3335:12)
at Module.ɵɵdirectiveInject (core.mjs:10881:12)
at NodeInjectorFactory.FlashcardComponent_Factory [as factory] (flashcard.component.ts:11:32)
at getNodeInjectable (core.mjs:3520:44)
In my project, I have defined a Flashcard class, a FlashcardArea parent component, and a Flashcard Component responsible for displaying fetched data within the parent.
Flashcard Class:
export class Flashcard {
public id?: any;
public question:string;
public answer: string;
public learned: boolean = false;
public chapter?: number;
public displayed?: boolean = true;
constructor(question: string, answer: string, chapter?: number, learned?: boolean, id?: any, displayed?: boolean){
this.question = question;
this.answer = answer;
this.chapter = chapter;
this.id = id;
}
}
export default Flashcard;
Service to fetch my list of Flashcards from the PostgreSQL database:
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { Observable, of, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';
import { Flashcard } from '../classes/flashcard';
import { map } from 'rxjs/operators';
import { Subject } from 'rxjs';
const httpOptions = {
headers: new HttpHeaders({'Content-Type': 'application/json'})
};
@Injectable({
providedIn: 'root'
})
export class FullFlashcardsListService {
private baseURL: string = "/api/v1/flashcards";
constructor(private http: HttpClient) { }
getAll() {
return this.http.get<Flashcard[]>(this.baseURL);
}
};
export default FullFlashcardsListService;
Flashcard Area Component:
... [Remaining content unchanged for brevity]