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.
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:
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.
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.
