Angular-cli: "WARNING in Circular dependency detected" - when using barrel module with typescript path mapping.

[ph55]

When using typescript's path mapping with angular barrel modules, angular cli treats some imports as circular dependencies when, in fact they are not.

Versions

Angular CLI: 1.7.3
Node: 8.9.4
OS: win32 x64
Angular: 5.2.8
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.3
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

Repro steps

• Import class of same MODULE by path mapping.
  https://github.com/ph55/ng-circular-example
  

WARNING in Circular dependency detected:
src\app\libs\bye\index.ts -> src\app\libs\bye\src\bye.module.ts -> src\app\libs\bye\src\bye.component.ts -> src\app\libs\bye\index.ts

WARNING in Circular dependency detected:
src\app\libs\bye\src\bye.component.ts -> src\app\libs\bye\index.ts -> src\app\libs\bye\src\bye.module.ts -> src\app\libs\bye\src\bye.component.ts

WARNING in Circular dependency detected:
src\app\libs\bye\src\bye.module.ts -> src\app\libs\bye\src\bye.component.ts -> src\app\libs\bye\index.ts -> src\app\libs\bye\src\bye.module.ts

• Import class of MODULE that is part of imports of your current NgModule
  https://github.com/ph55/ng-circular-example/tree/case-2
  
  

WARNING in Circular dependency detected:
src\app\libs\bye\index.ts -> src\app\libs\bye\src\bye.module.ts -> src\app\libs\bye\src\bye.component.ts -> src\app\libs\hello\index.ts -> src\app\libs\hello\src\hello.module.ts -> src\app\libs\bye\index.ts

WARNING in Circular dependency detected:
src\app\libs\bye\src\bye.component.ts -> src\app\libs\hello\index.ts -> src\app\libs\hello\src\hello.module.ts -> src\app\libs\bye\index.ts -> src\app\libs\bye\src\bye.module.ts -> src\app\libs\bye\src\bye.component.ts

WARNING in Circular dependency detected:
src\app\libs\bye\src\bye.module.ts -> src\app\libs\bye\src\bye.component.ts -> src\app\libs\hello\index.ts -> src\app\libs\hello\src\hello.module.ts -> src\app\libs\bye\index.ts -> src\app\libs\bye\src\bye.module.ts

WARNING in Circular dependency detected:
src\app\libs\hello\index.ts -> src\app\libs\hello\src\hello.module.ts -> src\app\libs\bye\index.ts -> src\app\libs\bye\src\bye.module.ts -> src\app\libs\bye\src\bye.component.ts -> src\app\libs\hello\index.ts

WARNING in Circular dependency detected:
src\app\libs\hello\src\hello.module.ts -> src\app\libs\bye\index.ts -> src\app\libs\bye\src\bye.module.ts -> src\app\libs\bye\src\bye.component.ts -> src\app\libs\hello\index.ts -> src\app\libs\hello\src\hello.module.ts

[moncefbouazzaoui]

Try to add the settings below to your .angular-cli.json, this worked for me :)

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

[ph55]

Try to add the settings below to your .angular-cli.json, this worked for me

Sure it worked. You disabled circular dependencies check.

[mrmokwa]

I'm having the same issue, this is my version:

Angular CLI: 6.0.0-rc.6
Node: 9.11.1
OS: win32 x64
Angular: 6.0.0-rc.5
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.5.7
@angular-devkit/build-angular     0.5.7
@angular-devkit/build-optimizer   0.5.7
@angular-devkit/core              0.5.7
@angular-devkit/schematics        0.5.8
@angular/cdk                      6.0.0-rc.12
@angular/cli                      6.0.0-rc.6
@angular/flex-layout              6.0.0-beta.15
@angular/material                 6.0.0-rc.12
@ngtools/json-schema              1.1.0
@ngtools/webpack                  6.0.0-rc.5
@schematics/angular               0.5.8
@schematics/update                0.5.8
rxjs                              6.0.0
typescript                        2.7.2
webpack                           4.5.0

Also I don't have .angular-cli.json avaiable.

[lasimone]

Rather than turning off the check, is there an appropriate way to fix this so we don't trigger this warning to begin with? Essentially, is there a better practice that should be used?

[ph55]

@lasimone just don't use barrels within same module. Use relative imports.

[kanji-keraliya]

Try to add the settings below to your angular.json, this worked for me :)
"showCircularDependencies": false into build section

`
{

"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "xxxx",
"projects": {
    "HelloWord": {
        "root": "",
        "sourceRoot": "src",            
        "architect": {
            "build": {
                "options": {
                    "outputPath": "wwwroot",
                    "index": "src/index.html",
                    .....,
                    "showCircularDependencies": false
                },
                "configurations": {
                ....
                }
            },
            "serve": {
                ....
            },
        }
    },      
},
"defaultProject": "HelloWord"

}
`

[filipesilva]

I don't quite follow. As far as I can tell, you do have a circular dependency:

• ng-circular-example/src/app/libs/bye/src/bye.component.ts imports ByeModel from @corp/bye
• @corp/bye resolves to ng-circular-example/src/app/libs/bye/index.ts
• ng-circular-example/src/app/libs/bye/index.ts exports ByeModule from ./src/bye.module
• ./src/bye.module imports ByeComponent from ./bye.component, completing the cycle

The circular dependency is wholly within ng-circular-example/src/app/libs/bye and happens because one of your imports is to the public api of libs/bye. This is pretty much guaranteed to cause a circular import in most cases.

You should be able to clear this circular dependency by using import { ByeModel } from './models.ts'; instead.

Let me know if I missed something here.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}