Circular dependency warnings in angular

What is Circular Dependency?

In software engineering, a circular dependency is a relation between two or more modules which either directly or indirectly depend on each other to function properly. Such modules are also known as mutually recursive.

In very large software designs, software engineers may lose the context and inadvertently introduce circular dependencies. There are tools to analyze software and find unwanted circular dependencies.

Circular Dependency in Angular

Angular’s dependency injection is a great feature to productivity, but even it has its limits.

While not an everyday occurrence, it is quite possible to come across a circular dependency. This happens when service A injects service B, but service B in turn injects service A, usually indirectly. For example, B depends on service C which depends on A – A -> B -> C -> A forms a nice little circle.

When Angular’s bootstrap process tries to setup all the services and inject each service’s dependencies, it detects when such a scenario happens and errors out, instead of getting stuck in an infinite loop.

In most cases, circular dependencies are code smells for design that could be made clearer. Most likely you have a service that’s gotten too big, and splitting it will result in cleaner code and no circular dependency.

Circular Dependency can result in a crash of an application. We should definitely remove circular dependency present in codebase.

Circular Dependency Warnings in Angular

Circular dependency is definitely harmful but warnings about circular dependency may or may not be. Many times we get lots of circular dependency warnings but our application still runs smoothly. So what are those warnings about?

As I said, those may not be harmful, but definitely those are annoying. I would not love at all to see lots of yellow text yelling at me "You might be doing Something Wrong", when I build my application. Those warnings are the indication that you are doing something unusual in your code.

Major Culprit for Circular dependency warning

One of the major drawback of importing things thorough index file is it might cause circular dependency warning in your codebase during build if you don't use index file wisely.

Index.js is not about having to type out slightly shorter file names. It is about encapsulation.

The idea is that your directories should have files and classes or services or whatever you want it have but everything this is public should be exported or exposed in the index.js.

The idea is to never require a file from inside another directory directly as whatever it exposes should be that "package" 's internals and are private.

Of course this is not enforced in JavaScript, but it is important for writing clean, well organised code.

Let's say following is your directory structures.

--- /Services
--- a.service.js
--- b.service.js
--- c.service.js
--- index.js

  --- /models
       --- a.model.js
       --- b.model.js
       --- c.model.js
       --- index.js


  --- /Components
       --- /a
             --- a.component.js
             --- a.html
             --- a.scss
       --- /b
            --- b.component.js
            --- b.html
            --- b.css

We have services, models and components. Services and models have import.js file which exports all services and models. So in any file if you require some service or model you can technically write:

import AService from 'services';
import Amodel from 'models';

But if above line 1 is written in any service file or line 2 written in any model file might generate circular dependency error. You should not use index import inside of the folder itself where index file stays. Index import is meant to be for outside files.