Circular Dependency in Angular 6 project

Question

I have 3 files with a circular dependency, but understand that 2 of the imports are just ARRAYS, not components or injectors, but 1 of them is a Injector:

I highlighted the lines with the imports and its uses on the code bellow:

components.ts (this file is just a compilation of all my components, routes and routing to import inside the app.module, app.routing and menu.module:

import { ProvidersRoutes } from 'providers.routes'; // <<<<<<<<<<<<<<<<<<<
import { ServicesRoutes} from 'services.routes';
import { OffersRoutes } from 'offers.routes';

export const ROUTES= [ ...ProvidersRoutes, ...ServicesRoutes, ...OffersRoutes ]; // <<<<<<<<<<<<<<<<<<<
...

providers.routes.ts (this is a list of routes from the Providers component to be used in the menu.module):

import { AuthGuard } from '../../login/auth.guard'; // <<<<<<<<<<<<<<<<<<<
export const ProvidersRoutes: Routes = [
  {
    path: 'providers',
    loadChildren: 'app/components/providers/providers.module#ProvidersModule',
    canActivate: [AuthGuard], // <<<<<<<<<<<<<<<<<<<
    data: {
      state: 'providers',
      groupRoles: ['ADMIN'],
    }
  },
];
...

auth.guard.ts (auto explained, it loads the ROUTES variable just to know what is the initial route):

...
import { ROUTES } from '../components/components'; // <<<<<<<<<<<<<<<<<<<

@Injectable()
export class AuthGuard implements CanActivate {

  routes: Routes = [ // <<<<<<<<<<<<<<<<<<<
    ...ROUTES
  ];
initialRoute:string;

constructor(private router: Router, private loginService:LoginService, public snackBar: MatSnackBar) { }

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean>|Promise<boolean>|boolean {

    // set the initialRoute
    if(this.loginService.isLogged()){
        this.initialRoute = this.routes.filter((item)=>{ // <<<<<<<<<<<<<<<<<<<
            return typeof(item.data.initial) != "undefined";
        })[0].path;
    } else {
        this.initialRoute = '/login';
    }
}
...

So, this circular dependency doesnt cause any bug, but keep appearing in my browser's and terminal consoles as a Warning as you can see bellow:

Circular dependency detected: src\app\components\components.ts -> src\app\components\providers\providers.routes.ts -> src\app\login\auth.guard.ts -> src\app\components\components.ts

And I have 2 questions:

1 - Should I fix it? Since doesn't cause any bug and 2 of the dependencies are not related to functions but just to arrays

2 - If I should fix it, what would be the best way?

If you can provide some plunker, with demo i will try to answer and the 2 question. — Християн Христов
– Християн Христов, Commented Jul 9, 2018 at 14:47

Християн Христов · Accepted Answer · 2018-07-09 16:55:19Z

I think that I have an answer for the first part :)

I would recommend to fix this issue, although it won't break your code or logic, in long run it may cause some troubles (in long run I mean, if your project grows a lot and you start adding tests and etc.). The essence of the problem is that when you are in cyclic dependencie your components/code-blocks (in your case: guard, route and components) get coupled, or in other words they are not able to exist without the others.

In the particular case in order for your components.ts file to work properly, the providers.routes.ts should be available, but providers.routes.ts depends on auth.guar.ts, which is depending to the exported from components.ts ROUTES variable.

So long story short, this three files, are kind of becoming like one big component, with three building blocks, which are inseparable, because of that, the testing of this files will become very tricky, because you won't be able, to separate each of them in their own independent test "container".

Lewin Muzvonda · Accepted Answer · 2021-07-12 13:02:58Z

0

This means you have a component/service that you imported when itself also depends on the component you are importing it into. Remove one of the imports, maybe separate the functions into different components, that's what I did and worked.

answered Jul 12, 2021 at 13:02

Lewin Muzvonda

5133 silver badges14 bronze badges

Collectives™ on Stack Overflow

Circular Dependency in Angular 6 project

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related