It is possible to create tree / recursive objects in separate files and avoid Circular dependency detected
warning using Angular CLI if I call methods from classes recursive?
(Tested in angular 7) I understand that this is a problem in dependency injection (article), but what about the objects using as constructor for data from external api or for internal purposes? And if it is not good idea anyway, how do you solve it? (I suppose the answer for this 'subquestion' is a change of model, then how should I modify my model?) I search for solution but the closest question did not help me apply the same approach to my situation.
I have Emails
and Attachments
(emails with attachments - and the entire Email
with attachments can also be an attachment, Attachment
is separated object with attributes and content can be File
or Email
, but here, for simplicity, suppose the attachment is always one Email
or null).
Each class has static method for create instance from JSON object (I get JSON from API, then I will create instance of object representing API values by calling static fromJson
method on top object):
file: app/model/email.ts (part of code)
import { Attachment } from './attachment';
export class Email {
// some attributes
public attachment?: Attachment;
public static fromJson(js: JSON): Email {
const e = new Email();
// fill some attributes here
if (js['attachment']) { e.attachment = Attachment.fromJson(js['attachment']); }
return e;
}
}
file: app/model/attachment.ts (part of code)
import { Email } from './email';
export class Attachment {
// some attributes
public content: Email;
public static fromJson(js: JSON): Attachment {
const a = new Attachment();
// fill some attributes here
if (js['email']) { a.content = Email.fromJson(js['email']); }
return a;
}
}
Initial call is: this.email = Email.fromJson(apiResponseForEmail);
This situation result into Circular dependency detected warning after ng build | serve
. If this is not a good example for you, you can imagine Recipe
class for food which contains Ingredients
with attributes such as quantity and temperature where the result of one Recipe
is a ingredient for another recipe.
If these classes are in one file, no warning is reported. However, placing everything in one big file is not the best solution to me (if there is any other).
Here is a Stackblitz with Circular dependency demo (but without warnings in console, stackblitz obviously removes warnings, you need to download this code and run from localhost to see warning).
I am interested if it is possible to place such classes (which are called in the code recursive by static method like in the example) in separate files (files named by classes) and avoid Circular dependency detected message?
I think we all have habits coming from compiled languages. In JS files are modules. I think this is the root of the problem : these are not class files but module files.
Maybe you should use some other packing tools to merge you class files in a single module (so in a single file).
If you can put different classes in different namespaces there's a high chance that you won't have interdependent classes across these namespaces, so you can make one module per namespace. However interdependent classes should probably belong to a single namespace (=> same module => same file => need extra tools to pack)
EDIT: old question but I landed here an scratched my head to here are my two cents
One of the ways to get rid of circular dependency is to introduce index.ts
file: index.ts
export { Attachment } from './attachment';
export { Email } from './email';
file: app/model/attachment.ts (part of code)
import * as index_file from './index';
index_file.Attachment {
...
content: index_file.Email;
}
file: app/model/email.ts (part of code)
import * as index_file from './index';
index_file.Email {
...
attachment?: index_file.Attachment;
}
PS: please check the syntax, I'm not confident on the syntax
Hi @Atiris !
I already had this problem in a complex project with a lot of circular dependencies (56 warnings).
After many tries, I don't think I have found the right solution.
But I can possibly tell you how I did to solve each of the warnings.
I moved each implemented selector with a warning to the main file.
But it's not very clean.
Have you tried to use only 1 file ?
You can create a namespace in which you add the two classes Email and Attachment.
Here is a Stackblitz without Circular dependency demo
ANSWER :
I am interested if it is possible to place such classes (which are called in the code recursive by static method like in the example) in separate files (files named by classes) and avoid Circular dependency detected message?
I don't think you can make like that. This is structural issue. But I'm not 100% sure.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With