Caution: Circular dependency has been identified in Angular 10 involving barrels

I keep getting a warning about circular dependencies when using barrelsby in Angular 10.

Error: 
WARNING in Circular dependency detected:
src\app\core\components\components.module.ts -> src\app\core\components\header\header.component.ts -> src\app\state\index.ts -> src\app\core\components\components.module.ts

Organizational structure:

/component
  /header
    header.component.ts
    index.ts

index.ts

export * from './header.component';

component.module.ts

import { HeaderComponent } from './header';

@NgModule({
  imports: [],
  exports: [
    HeaderComponent,
  ],
  declarations: [
    HeaderComponent
  ]
})

index.ts

export * from './header/index';

Answer №1

Don't worry too much about this warning, it's not critical to fix immediately. The warning is indicating where the circular dependency exists:

  • module imports from header
  • header imports from index
  • index imports from module

To resolve the circular dependency, try to avoid importing from index. Instead, import the necessary component directly from its respective folder in your project directory.

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

Bootstrap Item Carousel - A Sleek Way to Showcase

I'm trying to figure out how to stop the infinite auto-scrolling and make it display per page when clicking the right arrow. Any ideas? $('.carousel.carousel-multi .item').each(function () { var next = $(this).next(); if (!next.leng ...

Mongoose Error: The function 'mongooseSchemahere' is not recognized as a valid function

Here is the mongoose Schema setup in models/user.js: const mongoose = require('mongoose'); const userSchema = mongoose.Schema({ loginId: String, firstname: String, lastname: String, eMail: String, password: String, acti ...

Angular 2: A Beginner's Guide to Creating Objects and Transforming Code from Angular to Angular 2

Currently, I am learning Angular 2 and facing an issue. I am unsure about how to create an object in my login function (Angular1). public logIn() { let phone = this.user.number.replace(/\s+/g, ''); let email = 'u&a ...

Countdown timer options for Ionic and Angular 2

I am in need of a simple Angular 2 (4) / Ionic 2 Countdown timer for my project, but unfortunately I haven't been able to come across any open-source options. That's why I'm turning to you all for suggestions. Here is an example of what I h ...

Tips for extracting information from a TypeScript JSON document

Hey there, I'm currently having trouble understanding how to retrieve data from a JSON file. environment.ts: export const environment = { production: false, urlListBooks: "/assets/list-books.json", urlGetBooks: "/assets/edit- ...

How to Invoke a TypeScript Function in Angular 2 Using jQuery

Using the Bootstrap-select dropdown in Angular 2 forms with jQuery, I am attempting to call a Typescript method called onDropDownChangeChange on the onchange event. However, it seems to not be functioning as expected. import { Component, OnInit, ViewChi ...

Next.js appending [object%20Object] to the URL's endpoint

I encountered an error when launching my next app using "npm run dev". The error occurred during the pre-render attempt: GET http://localhost:3000/aave/fundamentals/economics/[object Object] [HTTP/1.1 404 Not Found 434ms] The issue is not specific to thi ...

"Parent component is unable to modify the value of a child input field when ionViewWillEnter is

Scenario: Main page linked to subpage. Subpage accesses input data from main page. Upon navigation, main page updates variable in ionViewWillEnter. However, this change is not reflected in the subpage. Interactive Demo: https://stackblitz.com/ed ...

Update the HTML weather icon with data from JSON

I have a collection of weather icons stored on my computer. How can I customize the default weather icons with my own set of icons? In the JSON file, there is a variable like this: "icon":"partlycloudy" <html> <head> <script src="http://c ...

Error message when testing Angular Mat Dialog: The function This.dialogref.updatesize does not exist

I am a beginner in working with Angular. I am currently facing an issue while writing a unit test for mat dialog which is resulting in an error. This is the method in my TypeScript file : isMobileScreen= Observable<BreakpointState>= this.breakpointO ...

Having trouble uploading images using Ionic/Angular to a PHP script

I've been working on incorporating image uploading functionality into my Ionic app. Despite reading multiple tutorials, I haven't been able to get it up and running successfully. I'm specifically aiming for the app to work smoothly in a web ...

Turning a JSON formatted string into parameters for a function

Looking to convert a string of JavaScript objects into function arguments. The string format is as follows: "{ "item1": "foo 1", "item2": "bar 1" }, { "item1": "foo 1", "item2": "bar 2" }" While I can use JSON.parse to turn it into an array, the challeng ...

The mysterious case of the missing CSS file in Node.js

I recently set up a new Node.js Express Project. However, I am facing an issue with the index.ejs file showing the error: Undefined CSS file ('/stylesheets/style.css'). Here is the content of the index.ejs file: <!DOCTYPE html> <html& ...

Nestjs - Error: Unable to locate module distmain

As I work with nestjs, I found it convenient to create a "common" folder that can be shared between the front and back applications: project │ └───common │ │ │ └───dtos │ │ dto-a.ts │ ...

The call stack size has reached its maximum limit due to running 2 Collection.find commands

I've encountered a Maximum call stack size exceeded exception in my Chrome console while working with Angular2 and Meteor. This issue started after I added the following code to my client side: var userChannelsId = UserChannels.find({idUser: Meteor.u ...

Troubleshooting a labeling problem in a donut chart with Chart.js

$(document).ready(function(){ function call() { $.ajax({ url: "chartjs/tempdata.php", method:"GET", cache: false, success: function(data) { console.log(data); var difference=[]; var percentage=[]; var finaldata=[]; for(var i in data) { //time.push( ...

What is the best way to incorporate a JSON file into a JavaScript class?

I attempted to load a JSON file within a JavaScript class, but encountered an issue where the loaded data was only accessible inside a specific function. class CreatePage { constructor() { var request = new XMLHttpRequest(); request. ...

What is the best way to iterate through an array and make use of index values while removing any empty elements along the

In my current setup, I have defined two arrays keyVals and rows: keyVals = [ "Status", "ErrorHeading", "ErrorDetail" ] rows = [ { "Hostname": "ABC", "name& ...

"Unleashing the power of infinite Ajax requests upon a drop change event in Knock

I am working with Knockout MVC on my current project and encountering an issue. Whenever I try to pass the viewModel when the Drop Down changes, the method call gets invoked multiple times and the alert message "ok" keeps popping up continuously. Can som ...

The initial state in Next.js does not support accessing localStorage

I'm currently working on a project using Next.js along with Redux Toolkit. Initially, I attempted to utilize localStorage, but encountered the issue 'localStorage is not defined'. As a result, I switched to using cookies-next, only to face a ...