Angular-cli: Barrel and Circular dependency

[Socolin]

- [ ] bug report -> please search issues before submitting
- [ x ] feature request

Versions.

@angular/cli: 1.3.0
node: 6.11.0
os: linux x64
@angular/animations: 4.3.4
@angular/common: 4.3.4
@angular/compiler: 4.3.4
@angular/core: 4.3.4
@angular/flex-layout: 2.0.0-beta.8
@angular/forms: 4.3.4
@angular/http: 4.3.4
@angular/material: 2.0.0-beta.8
@angular/cdk: 2.0.0-beta.8
@angular/platform-browser: 4.3.4
@angular/platform-browser-dynamic: 4.3.4
@angular/router: 4.3.4
@angular/cli: 1.3.0
@angular/compiler-cli: 4.3.4
@angular/language-service: 4.3.4

Repro steps.

The following will generate circular deps warning between a.compoentnt.ts -> index.ts -> a.component.ts

module/
|- a.component.ts
|- b.model.ts
|- index.ts

a.compoennt.ts:

import {B} from '.'

b.component.ts

export class B { }

index.ts

export * from './b.model.ts';
export * from './a.component.ts';

Desired functionality.

An option to ignore these kind of circular deps
A => barrel => A

Circular deps check is great (I was able to find real ones), and I would like to keep this option always on, but its too noisy with barrels.

[Socolin]

After some test it seems its not a good idea to use barrel from inside same directory, it seems to hide some other circular deps. So I removed all use of barrel '.' and no more warnings

[stevie6410]

@Socolin I have also come across this issue. But I am not clear on what the alternative is. I find the barrels extremely valuable in the development flow especially with the amount of importing to be done in angular projects.

Have you scrapped the barrels altogether or is there a different method of implementing them to avoid circular dependencies?

Here is an example of one of my barrels.

// Services
export * from './services/environment.service'

// Components
export * from './components/app/app.component'
export * from './components/home/home.component'
export * from './components/sidenav/sidenav.component'

// Module
export * from './app.module'

[deebloo]

Barrels are fine. Just don't reference them from inside of itself.

[largeDachshund]

@deebloo, can you explain how to implement barrels?
this yields the circular reference error:
--app folder
-----stuff folder
-------stuffbarrel.ts
-------stuff1.ts
-------stuff2.ts
-------stuff1.component.ts
-------stuff1.service.ts

inside barrel.ts, it references _all_ of these files.
from inside stuff1.component.ts, I "import {Stuff1Service} from './stuffbarrel'"

What needs to be done in this example?

[guilhermejcgois]

Just don't import from the barrels, import from the stuff1.service itself...

[largeDachshund]

@guillaumeleone , so barrels don't work, any more.

[guilhermejcgois]

I think that works outside itself, or I'm wrong? Don't make much sense import from barrel inside the barrels... (Sad, but true :/ )

[Socolin]

Barrels works great when you have multiple module.

Simple rule:
Do not import a symbol from a barrel that export the current file.

[xMarkusSpringerx]

I have a barrel A inside a barrel B inside a barrel C. How should I reference a component (which is located in barrel C) inside a component (which is located in barrel A)? Do you have any idea @Socolin @deebloo ?

[snewell92]

@xMarkusSpringerx Let me try to visualize it - I just removed all my circular deps by following @Socolin 's advice.

Module C
  -Component C1
  -Module B
    --Module A
      ---Component A1

While working on C1, you want to pull in A1? You can import { ComponentA1 } from './moduleB/barrel;, and there won't be any circles. If you name your barrel index.ts you should be able to just have ./moduleB as the import string.

It's when components import sibling (as far the module / barrel is concerned) components that you must directly import the component (file to file, no barrel).

[xMarkusSpringerx]

thx for the illustration @snewell92
I solved it already. There was another issue which was not related to the barrels which caused the problem.

[jjanne]

What was the issue @xmarkusspringerx????

[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._}