角度/打字稿中的循环依赖

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

Answer 1

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

Answer 2

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.