Avoiding circular imports in Angular modules

Question

Avoiding circular imports in Angular modules

After restructuring my angular app from a monolithic shared feature module to smaller ones, I faced a challenge with what appears to be a cyclic dependency. The issue arises when I have components such as triggerA, modalA, triggerB, and modalB interacting in a loop of imports across modules.

The design may seem flawed at first glance, but let me explain the practical scenario:

Imagine a modal displaying details about an event, including information about its participants. From this modal, I should be able to access a participant's profile. However, within that same modal, there is also a list of all events involving that participant, creating a chain of dependencies. This structure allowed for component reuse and adhered to the DRY principle, but keeping all components in one module felt unorganized.

A runnable example can be found here.

The setup functions properly until comments are removed on line 12 in trigger-a.module.ts, causing a recursive dependency error. Is it possible to maintain the module import to avoid schema errors?

This situation raises some questions:

Why does importing the modal module alone work without listing it in the imports section of the trigger module?
If both modals are imported in the main apps.module, breaking the cycle becomes feasible by excluding one modal from the triggers import - but is this the recommended solution?

What would be the best approach to resolve this issue? Omitting the module import seems like a temporary fix, while directly importing modules with cross-dependencies in the apps module contradicts the concept of modularization. It feels unconventional, yet necessary to achieve functionality.

Although uncertain about the correctness of my method, I believe the use-case remains valid. Any insights or suggestions on how to improve this design would be greatly appreciated.

angular typescript dependency-injection

Answer 1

Answer №1

I successfully resolved the issue by removing both trigger modules and introducing a new module named TriggersModule as shown below:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
import { TriggerAComponent } from './trigger-a/trigger-a/trigger-a.component';
import { TriggerBComponent } from './trigger-b/trigger-b/trigger-b.component';

@NgModule({
  declarations: [TriggerAComponent, TriggerBComponent],
  imports: [CommonModule, NgbModalModule],
  exports: [TriggerAComponent, TriggerBComponent],
})
export class TriggersModule {}

Modal A:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ModalAComponent } from './modal-a/modal-a.component';
import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
import { TriggersModule } from '../triggers.module';

@NgModule({
  declarations: [ModalAComponent],
  imports: [CommonModule, NgbModalModule, TriggersModule],
  exports: [ModalAComponent],
})
export class ModalAModule {}

Modal B:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ModalBComponent } from './modal-b/modal-b.component';
import { TriggersModule } from '../triggers.module';

@NgModule({
  declarations: [ModalBComponent],
  imports: [CommonModule, TriggersModule],
  exports: [ModalBComponent],
})
export class ModalBModule {}

App module:

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

import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { TriggersModule } from './triggers.module';
import { ModalAModule } from './modal-a/modal-a.module';
import { ModalBModule } from './modal-b/modal-b.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    NgbModule,
    ModalAModule,
    ModalBModule,
    TriggersModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Answer 2

I successfully resolved the issue by removing both trigger modules and introducing a new module named TriggersModule as shown below:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
import { TriggerAComponent } from './trigger-a/trigger-a/trigger-a.component';
import { TriggerBComponent } from './trigger-b/trigger-b/trigger-b.component';

@NgModule({
  declarations: [TriggerAComponent, TriggerBComponent],
  imports: [CommonModule, NgbModalModule],
  exports: [TriggerAComponent, TriggerBComponent],
})
export class TriggersModule {}

Modal A:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ModalAComponent } from './modal-a/modal-a.component';
import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
import { TriggersModule } from '../triggers.module';

@NgModule({
  declarations: [ModalAComponent],
  imports: [CommonModule, NgbModalModule, TriggersModule],
  exports: [ModalAComponent],
})
export class ModalAModule {}

Modal B:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ModalBComponent } from './modal-b/modal-b.component';
import { TriggersModule } from '../triggers.module';

@NgModule({
  declarations: [ModalBComponent],
  imports: [CommonModule, TriggersModule],
  exports: [ModalBComponent],
})
export class ModalBModule {}

App module:

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

import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { TriggersModule } from './triggers.module';
import { ModalAModule } from './modal-a/modal-a.module';
import { ModalBModule } from './modal-b/modal-b.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    NgbModule,
    ModalAModule,
    ModalBModule,
    TriggersModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Avoiding circular imports in Angular modules

Answer №1

Similar questions

CORS policy does not recognize the specific methods I specified in Express Gateway

In the world of GramJS, Connection is designed to be a class, not just another instance

"Seamlessly Incorporating Angular into the Hybris Platform: A Comprehensive Guide

Navigating away from the IdentityServer page within the Angular SPA in an ASP.NET Core application triggers a refresh of the entire

Customizing the default font color in Angular Material

The application rejected the application of styles from 'http://localhost:1234/node_modules/primeicons/primeicons.css' as the MIME type (text/html) was not compatible

Monitor a universal function category

Implementing Angular2 with Router in a Docker Container with Nginx Deployment

Manipulate div display based on select value in Angular2 using [(ngModel)] with ion-select

What could be preventing the array from updating after subscribing to the service?

Trouble with parsing JSON in rxjs ajax response

Initiate the input change event manually

Unable to bring in a personalized npm package using its package title

"Exploring the power of index signatures and methods in Typescript

Spring Boot receiving null values from Angular form submission

NPM INSTALL will not regenerate .js files from .ts files

Is there an issue with the newline character ` ` not functioning properly in TypeScript when used with the `<br/>` tag?

Updating an element within a for loop using Angular TypeScript

Heroku: Unable to retrieve resource - server returned a 404 (Not Found) status code

What could be causing the failure to typecheck the sx prop?