Circular dependency in angular/typescript

Question

I was facing circular dependency in angular project. I have come accross many solution including export all the dependent classes from "single file" as instructed here https://medium.com/visual-development/how-to-fix-nasty-circular-dependency-issues-once-and-for-all-in-javascript-typescript-a04c987cf0de It did't work. So I moved to different solution like using dependency injections as instructed in the following links:

How to solve the circular dependency Services depending on each other

But despite of using dependency injections, there are still exceptions. below is the code:

moduleA.ts

import { MODULE_B_NAME } from "./moduleB";
import { Injectable, Injector } from "@angular/core";


export const MODULE_A_NAME = 'Module A';
@Injectable({
  providedIn: 'root'
})
export class ModuleA {

  private tempService: any;
  constructor(private injector: Injector) {
    setTimeout(() => this.tempService = injector.get(MODULE_B_NAME));

  }


  public  getName(): string {

    this.tempService.getName();
    return "we are forked";
  }

}

moduleB.ts

import { MODULE_A_NAME } from "./moduleA";
import { Injectable, Injector } from "@angular/core";

export const MODULE_B_NAME = 'Module B';
@Injectable({
  providedIn: 'root'
})
export class ModuleB {

  private tempService: any;
  constructor(private injector: Injector) {

    setTimeout(() => this.tempService = injector.get(MODULE_A_NAME));


  }
  public getName(): string {

    //this.tempService = this.injector.get(MODULE_A_NAME);
    this.tempService.getName();
    return "we are forked";
  }

}

appComponent.ts

import { Component } from '@angular/core';
import { ModuleA } from './moduleA';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'test01';


  getSomething() {

    return ModuleA.name;
  }



}

appModules.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { ModuleA } from './moduleA';
import { ModuleB } from './moduleB';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [ModuleA, ModuleB],
  bootstrap: [AppComponent]
})
export class AppModule { }

Can someone pls look at the code and identity what is wrong with it thanks

Why do the 2 services reference each other? What do they have in common? Generally if you have a circular dependency there is a deeper design issue that you should look at. Refactor the code so that the circular dependency is broken by abstracting or moving common code into a single location. Exactly what that looks like is difficult to say without the actual code in question. — Igor, Apr 08 '20 at 18:34

score 3 · Accepted Answer · answered Apr 08 '20 at 18:34

The problem is that you have your module name exports in the same file as the module itself. You should create a separate file named module-names.const.ts:

export const MODULE_A_NAME = 'Module A';
export const MODULE_B_NAME = 'Module B';

You can then import this file in both your modules, without a circular dependency:

import { MODULE_A_NAME } from "./module-names.const";

import { Injectable, Injector } from "@angular/core";

@Injectable({
  providedIn: 'root'
})
export class ModuleB {
  constructor(private injector: Injector) {
    setTimeout(() => this.tempService = injector.get(MODULE_A_NAME));
  }
}

However, what is it that you are trying to do? It feels like you are doing things which you definitely should not be doing in angular. (or in any other programming environment for that matter). I'm pretty sure your module name will be different once the application has been compiled using the --prod flag, and what ever it is you try to do, won't work anymore.

In your case, you need a third service. One that injects both service A and service B. And this service C should handle the things you want to do

This was a sample code.. I was having this issue in another project with larger scale.. so I created this one to emphasize the circular dependency. Thanks, it helped — Sanam, Apr 08 '20 at 18:46

score 0 · Answer 2 · answered Apr 08 '20 at 18:38

0

It's not recommend to use same type circular dependencies. Instead of that you should use some service/interface to collaborate components to each other.

answered Apr 08 '20 at 18:38

Anton Marinenko

2,749
1
10
16

Circular dependency in angular/typescript

2 Answers2