Circular dependency detected between unrelated functions

Question

I'm running into a circular dependency detected warning in an Angular app using individually exported functions from two utility files. I'll show a simplified example of the two files below.

The first file:

// type-helper.ts
import {getPropertyIfExists} from "./helper";

export function isType(item: any, type: string, property?: string) {
  const target = getPropertyIfExists(item, property);
  if (typeof type !== "string") return false;
  else return typeof target === type;
}

export function isArray(item: any[] | any): item is any[] {
  return item && Array.isArray(item);
}

export function isObject(item: object | any): item is object {
  return item && typeof item === 'object';
}

The second file:

// helper.ts
import {isArray, isObject} from "./type-helper";

export function getPropertyIfExists(item: any, property?: string): any {
  if (property) return item[property];
  else return item;
}

export function removeUndefinedProperties<T>(obj: T): T {
  const keys = Object.keys(obj);
  for (const key of keys) {
    if (isArray(obj[key])) obj[key] = removeEmptyValuesFromArray(obj[key]);
    else if (isObject(obj[key])) obj[key] = removeUndefinedProperties(obj[key]);
    else if (item === undefined || item === null) delete obj[key];
  }
  return obj;
}

Both of these files provide small utilities that I like reusing in my application without necessarily being linked to a single service. As far as I can tell, there are no other links between these files.

So, my questions:

1. Is the warning expected behaviour? I understand the warning if you have circular dependencies between components and services, where the entire class is imported, but in this case there is no circular dependency between the items actually being imported.
2. If it's not a problem, is there a way to make the warning disappear for this specific situation (without removing the warning from other circular dependencies)?

Thanks!

Mechanist

you can show the folder structure where these files are? – Nett

They're both in the "/src/app/utilities" folder. – Mechanist

Answer 1

index.ts from utilities folder is a barrel module (A barrel is a way to rollup exports from several modules into a single convenient module. The barrel itself is a module file that re-exports selected exports of other modules.)

You cannot import the barrel module itself. Because the circular dependence will appear. (an infinite loop of imports will be made)

index.ts
  type-helper.ts
  helper.ts

helper.ts -> index.ts -> type-helper.ts
                      -> helper.ts -> index.ts -> type-helper.ts
                                               -> helper.ts

To prevent this, you need to import the exact patch

// helper.ts
// import {isArray, isObject} from "./helper";
import {isArray, isObject} from "./helper/type-helper";

export function getPropertyIfExists(item: any, property?: string): any {
  if (property) return item[property];
  else return item;
}

export function removeUndefinedProperties<T>(obj: T): T {
  const keys = Object.keys(obj);
  for (const key of keys) {
    if (isArray(obj[key])) obj[key] = removeEmptyValuesFromArray(obj[key]);
    else if (isObject(obj[key])) obj[key] = removeUndefinedProperties(obj[key]);
    else if (item === undefined || item === null) delete obj[key];
  }
  return obj;
}

You probably have helper.ts instead of index.ts

it's the same thing

helper.ts -> type-helper.ts -> helper.ts -> type-helper.ts ...

move the getPropertyIfExists() function into type-helper.ts

Nett

Thanks for the answer! just so that I'm clear, are you saying that an index.ts/barrel file is generated automatically? I haven't created any barrel files myself, I'm simply importing the functions directly from the file references. With that said, I noticed that the simplified code mistakenly showed the helper file importing "./helper". It actually imports the functions from "./type-helper". – Mechanist

index.ts you need to create it yourself, it is not created automatically – Nett

So that's what I was unsure about, if I import a specific function from a file into another function, does it import all the other, unrelated dependencies in that file with the function? Because the "getPropertyIfExists" function requires no imports, I assumed importing it would be roughly the same as simply copying and pasting that function into the file without pulling any other imports with it. – Mechanist

all functions in a file are exported in one module – Nett