Suppress "Circular dependency detected" suppress warning in Angular 6

Question

I get the warning

Circular dependency detected!

in Angular 6 and I know why this problem appears, but it is not a problem at all.

I am currently working with SVG, and in my logic I prevent possible problems so I just want to suppress this warning. How can I do that?

I will fix this problem afterwards but for now I want to keep it because my code is more structured this way.

Welcome to Stackoverflow. When asking a question, you will get much better answers if you provide code. Add what you have tried so far. Also please check [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) — Fırat Esmer, Jun 11 '18 at 14:10
Just in case this helps anyone, I've been having the same issue even with the correct showCircularDependencies option set but I'm using custom-webpack. If you're using Angular 8 and custom-webpack, check out https://github.com/just-jeb/angular-builders/issues/422 — Jonathan Lambert, Sep 11 '19 at 16:08

score 33 · Accepted Answer · answered Aug 07 '18 at 14:09

33

Here the right path into the angular.json file :

projects -> architect -> options - > "showCircularDependencies": false

answered Aug 07 '18 at 14:09

Marcello Kabora

437
4
12

Note, this is also working for a react project using nx. The only difference is the file named `workspace.json` instead of `angular.json`. Even the path in this big json is the same. – Sylvain Dec 09 '20 at 15:57
Also, if you're worried about losing the warning, you could configure a production-specific environment, and add it to that. https://angular.io/guide/build#configuring-application-environments Instead of `architect -> build -> options -> "showCircularDependencies": false` You could do: `architect -> build -> configurations -> myprodenvname -> "showCircularDependencies": false` – IBN Jan 20 '21 at 23:57
Although you'll need to be on version 8 or higher. – IBN Jan 21 '21 at 00:06

Neyxo · Answer 2 · 2018-06-11T14:46:04.983

5

It should be a problem, because it's like a recursive function with multiple components/modules. Ignoring the warning may cause a slow site, memory leaks, etc.

You may not notice anything at the moment, but it's bad practice, that you shouldn't get used to.

Here is an example, how your circular dependency could be resolved.

Edit:

If you want to disable the warning completely, you can do that by modifying your angular.json config file.

"defaults": {
    "apps": {
      "showCircularDependencies": false
    }
    "build": {
      "showCircularDependencies": false
    }
  }

edited Jun 11 '18 at 14:46

answered Jun 11 '18 at 13:37

Neyxo

710
8
19

ok let me formulate this in another way. I am programming and I know that I have to eliminate this "warning" and I know how to do that. but for now I want to keep the warning because the code is more structured in this way. – Korbson Jun 11 '18 at 14:35

score 2 · Answer 3 · answered Apr 24 '19 at 22:08

projects -> architect -> options - > "showCircularDependencies": false

@Marcello is correct that is the corrrect path...however if running "ng serve" you need to make sure to stop (Ctrl+C) and restart it for your angular.json file to be loaded or you will still get the circular dependency warnings.

score 0 · Answer 4 · answered Aug 31 '22 at 03:48

If you are using a custom webpack config using angular-builders, there is a workaround here: https://github.com/just-jeb/angular-builders/issues/422

config.plugins = config.plugins.filter(plugin => !(plugin instanceof CircularDependencyPlugin));
    config.plugins.push(
        new CircularDependencyPlugin({
            exclude: /node_modules|shared/
        })
    );

I would also recommend just removing the plugin using the first line, as this feature is deprecated in newer angular versions

Suppress "Circular dependency detected" suppress warning in Angular 6

4 Answers4

Linked