I'm facing a dependency issue with the models relation in my Angular project. It seems to be an architecture problem, but I'm not sure. I have a User model that contains Books, and a Book model that contains Users.
When I run this code, I encounter the following error:
Circular dependency detected
UserModel.ts
import { BookModel } from './book.model';
export class UserModel {
id: number = 0;
email: string = "";
books: BookModel [] = [];
constructor(){};
parse(jsonData: any){
if (jsonData['id']) {
this.id = jsonData['id'];
}
if (jsonData['email']) {
this.email = jsonData['email'];
}
if (jsonData['books']) {
for (let i = 0; i < jsonData['books'].length; i++) {
let book = new BookModel();
book.parse(jsonData['books'][i]);
this.books.push(book);
}
}
}
}
BookModel.ts
import { UserModel } from './user.model';
export class BookModel {
id: number = 0;
name: string = "";
users: UserModel [] = [];
constructor(){};
parse(jsonData: any){
if (jsonData['id']) {
this.id = jsonData['id'];
}
if (jsonData['name']) {
this.name = jsonData['name'];
}
if (jsonData['users']) {
for (let i = 0; i < jsonData['users'].length; i++) {
let user = new UserModel();
user.parse(jsonData['users'][i]);
this.users.push(user);
}
}
}
}
I have come across two solutions, but neither seem ideal:
The first solution involves changing books: BookModel [] to bookIds: number []. However, I believe this will require more effort compared to the original code to retrieve related information.
The second solution suggests using auxiliary Models such as 'AuxBookModel' and 'AuxUserModel'. AuxUserModel mimics the attributes of UserModel and AuxBookModel does the same for BookModel. This approach would mean modifying UserModel to include: books: AuxBookModel [] = []. But this would result in creating numerous new models, which is not practical for a large application like mine.
What would be the best way to organize these models efficiently?
Thank you in advance for your assistance.