What could be causing the cyclic dependency problem after upgrading to Angular 9?

I am experiencing an issue with a specific file containing the following code:

import { Injectable } from '@angular/core';
import { I18n } from '@ngx-translate/i18n-polyfill';
import { isNumber } from 'lodash';
import { ConfirmationService, MessageService } from 'primeng/api';

export enum ConfirmationType {
  Delete,
  Navigate,
  Unsaved,
}

export enum SuccessMessage {
  Cloned,
  Created,
  Deleted,
  Saved,
  Reverted,
}

@Injectable()
export class MessagingService {
  constructor(
    private readonly _i18n: I18n,
    // tslint:disable-next-line:ban-types
    private readonly _messageService: MessageService,
    private readonly _confirmationService: ConfirmationService,
  ) { }

However, when attempting to run this code, I encounter the following error:

Error: Cannot instantiate cyclic dependency! MessagingService

Answer №1

The reason for this error is the fact that you initialized the MessagingService within the MessageService.

By doing so, you have created a loop of initialization.

MessagingService -> MessageService -> MessagingService -> ...


You need to refactor your code in such a way that they can access the necessary data and functions without having to initialize each other.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

MatTooltip component in Angular Material UI is malfunctioning

In my angular component within a hybrid application, I have incorporated the mattooltip directive with links. However, I am facing an issue where the tooltip position is not accurate when hovering over the first link. Sometimes, the tooltip appears empty o ...

What is the process for implementing a decorator pattern using typescript?

I'm on a quest to dynamically create instances of various classes without the need to explicitly define each one. My ultimate goal is to implement the decorator pattern, but I've hit a roadblock in TypeScript due to compilation limitations. Desp ...

Encountered a problem during the installation of firebase @angular/fire

I've been developing an Angular chat application and ran into some issues when trying to install Firebase using the command "npm install --save firebase @angular/fire". The installation resulted in a series of errors, with the main problem appearing t ...

Is it possible to utilize an array of numbers as a data source in ng2-smart table?

Hey there, I'm currently facing an issue with populating ng2-smart-table with an array of numbers. When I try to display the table, all I see is 6 empty rows like this: https://i.stack.imgur.com/DZJjq.png Here's the code for the table: <ng2- ...

The property of userNm is undefined and cannot be set

When attempting to retrieve a value from the database and store it in a variable, an error is encountered: core.js:6014 ERROR Error: Uncaught (in promise): TypeError: Cannot set property 'userNm' of undefined TypeError: Cannot set property &apos ...

Tips for directing your attention to an input field in Angular

I'm struggling to find a simple solution for setting focus programmatically in Angular. The closest answer I found on Stack Overflow is about dynamically created FormControl, but it seems more complex than what I need. My situation is straightforward ...

Exploring Angular 2: How to loop through reactive form controls and set them as dirty

Is there a way to trigger the markAsDirty function for all the elements within a specific FormGroup in Angular? ...

What could be causing TypeScript to display errors in unexpected locations while inferring inner types?

I encountered a rather intricate issue that's challenging to sum up in a brief title, my apologies for that. I devised a function that accepts a generic params type and returns a result type constructed from the params type. It utilizes string literal ...

Tips on keeping a specific expansion panel consistently open within an accordion interface

I need to create an accordion with 3 expansion panels and ensure that at least one panel remains open at all times. I do not want the user to be able to close all panels. What is the best way to accomplish this? Thank you for your assistance. ...

Websocket onmessage event triggered just one time

I have implemented a basic WebSocket client in an Angular 6 application. Everything seems to be working fine, except for the fact that both socket.onmessage and socket.addEventListener('message' are only triggered once. There are no errors in th ...

Incorporating real-time checked checkbox values into a running list

When displaying a list of preferences as checkboxes, I encountered an issue with the binding part. I am trying to capture the IDs of the checkboxes that are checked. Here is my attempt, which unfortunately does not work: <div class="checkbox" *ngFor="l ...

The 'string' Type in Typescript cannot be assigned to the specified type

Within the fruit.ts file, I've defined a custom type called Fruit which includes options like "Orange", "Apple", and "Banana" export type Fruit = "Orange" | "Apple" | "Banana" Now, in another TypeScript file, I am importing fruit.ts and trying to as ...

What is the best way to iterate over JSON data from an endpoint that contains multiple nested arrays using the .map() method?

Seeking to showcase weather API data from: () import Image from "next/image" interface Hour { time_epoch: number time: string temp_c: number temp_f: number is_day: number wind_mph: number wind_kph: number wind_deg ...

Converting a string into a TypeScript class identifier

Currently, I am dynamically generating typescript code and facing an issue with quotes in my output: let data = { path: 'home', component: '${homeComponentName}', children:[] }; let homeComponentName = 'HomeComponent' ...

Dynamic components in Angular and the error of ExpressionChangedAfterItHasBeenChecked

Seeking to create a versatile component that can dynamically contain various components. The objective is to compose an article with the flexibility of including either paragraphs or tweets. The following code defines DynamicArticleComponent: @Directive( ...

Creating a checklist using HTML and CSS can be achieved by utilizing the <span> element and

I'm having trouble changing the color of a span box to red when I focus on a link. The span successfully changes color when activated, but nothing happens when I try to use the 'focus' pseudo-class. On click, different categories will displa ...

Generating a dynamic clickable div using Angular 6

How can I create a user-friendly interface that displays an image with clickable divs around detected faces, allowing users to view specific attributes for each face? I'm looking for a solution where I can have divs or buttons around each face that t ...

What causes the ngIf directive to update the view of an HTTP observable only upon reloading the page?

Presently, I am utilizing a template: <div *ngIf="(currentUser | async)?.can('book')">Book Now</div> accompanied by its component: readonly currentUser: Observable<CurrentUser>; constructor(private userService: UserSe ...

The directive isn't functioning within a submodule

I am facing an issue with getting a directive to function properly in a lazy loaded module. Even after carefully reviewing the documentation and adding the directive to the declarations array of my main module, the directive works fine in the main module b ...

Error encountered during npm installation - EPERM: Operation not allowed

Today's challenge began when attempting to run the angular4 project and encountering this error: npm install eperm operation not permitted. In an effort to resolve it, I decided to delete the node modules folder and try again. However, upon running np ...