CODEWITHSUNDEEP
angular
Robin Kedia
Robin Kedia

Reputation: 283

Angular 6 Circular Dependency

I'm facing following error in my Angular 6 app. Actually it's been long and I m trying to upgrade old Angular 4 app to Angular 6.

WARNING in Circular dependency detected:
src/app/resources/index.ts -> 
src/app/resources/models/filters/sowSearch.model.ts -> 
src/app/shared/services/index.ts -> 
src/app/shared/services/rest/http.interceptor.ts -> 
src/app/resources/index.ts

Please advise what's wrong or more info required.

Upvotes: 1

Views: 6410

Answers (2)

Sushant Gupta
Sushant Gupta

Reputation: 1

it comes when you give a path to some component but instead of component name in component property in routing module you must be giving the module name

just check if you are giving component name correctly in your routing file.

Upvotes: 0

Vishnu Singh
Vishnu Singh

Reputation: 461

There is some problem in your imports. To understand this error:

Suppose there are two files a.ts and b.ts

a.ts

import { b } from './b';

export function a() {
    console.log('function: a');
}

b();

b.ts

import { a } from './a';

export function b() {
    a();
    console.log('function: b');
}

here we can see that file a.ts depends on b.ts and file b.ts depends on a.ts, so it creates a cycle to load which file first!

It is a very simple example, but it could be a very long cycle in complex file structure!

Above problem can be solved by many ways:

  • simply moving any of the above function to same file hence avoiding the import problem
  • separating the function call logic in a.ts to a new file c.ts and import both functions there etc.

there may be more solutions also.

generally what people do, import all component file to an index file of that directory and re-export it from there, this the point where problem begins.

Your problem is a perfect example of this situation, to avoid such problems you should import your dependencies directly from that original file not from index file to avoid a cycle.

Still problem may persist, to further solve it find out common dependency and take it to separate file and then import it to all dependent files.

Upvotes: 9

Related Questions