Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove extraneous barrel at the app root #3369

Closed
johnpapa opened this issue Dec 3, 2016 · 7 comments · Fixed by #3530
Closed

Remove extraneous barrel at the app root #3369

johnpapa opened this issue Dec 3, 2016 · 7 comments · Fixed by #3530

Comments

@johnpapa
Copy link
Contributor

johnpapa commented Dec 3, 2016

OS?

Mac OSX Sierra

Versions.

angular-cli: 1.0.0-beta.21
node: 6.9.1
os: darwin x64

Repro steps

ng new foo

Details

src/app/foo/index.ts is created and represents a barrel for app.module.ts and app.component.ts

This is referenced from src/app/main.ts

Removing the index.ts file would only require one change in the app:

Before

// main.ts
import { AppModule } from './app/';

After

// main.ts
import { AppModule } from './app/app.module';

Reason:

  1. One less file is easier to read.
  2. One less concept to learn for the user (barrels)
  3. It only used in one place, so it is easy to code without the barrel
@digimax
Copy link

digimax commented Dec 3, 2016

yeh you are just going to confuse the daylights out of some N00bz using typescript barrels with reckless abandon, like u decided to do here.

@bhaskerchari
Copy link

bhaskerchari commented Dec 5, 2016

@johnpapa,

I am totally confused whether to use barrels or not with angular2 ?

I am trying to use barrels the imports does seem to reference properly but when I run the application it doesn't seem to work as intended unless I import them without using any barrels.

Can you please confirm going forward we shouldn't be using any barrels concept? Since even in angular docs I don't see any references to barrels in examples.

As per https://github.com/angular/angular-cli/issues/3231 it says Barrels are no longer part of the style guide and was removed.

Thanks,
Bhasker

@wulfsberg
Copy link

Barrels have essentially been superseded by NgModules, which provide the same "one-stop import" for the using code, but also handle Angular-specific things like setting up the needed providers.

@johnpapa
Copy link
Contributor Author

johnpapa commented Dec 5, 2016

@bhaskerchari Hi. Barrels help reduce the number of import statements, and can reduce the length of your imports. They do this by consolidating imports into a file (often called a barrel) and then re-exporting them. Thus our code can just import from the barrel, which repoints to the others. Angular does this itself with things like @angular/core.

With the advent of NgModules we have less need for these barrels. Why? Because the ngmodules let us break the app up into functional areas and thus we have fewer need to import across them. It doesn't eliminate the value of barrels, but I feel it does dramatically reduce their value in most Angular 2 apps.

An example of this can be found in my event-view repo on github https://github.com/johnpapa/event-view

I hope this helps clarify a little

@wulfsberg
Copy link

Just to add: There shouldn't be any functional difference between importing directly or through a barrel. It is purely a stylistic matter where you want to stack your imports. There is nothing wrong in using them, and they should work.

@bhaskerchari
Copy link

bhaskerchari commented Dec 6, 2016

Hi @johnpapa ,

Thanks for clarifying that up and it does really makes sense now with the advent of NgModules we have less need for these barrels.

While I do see the advantages with the barrels but there seems to be design problems too with usage of it in a way it creates cyclic dependencies between the different exports in a barrel where one has a dependency on another and makes the exports order non trivial otherwise there is more likely chance of breaking the app with an unintended behaviour.

Maintaining the correct order in barrels can be tricky sometimes especially when you do have lot of exports and can become a painpoint which is what had troubled me.

@wulfsberg Please refer to the below link which I am referring to:
http://stackoverflow.com/questions/37398829/barrel-import-appears-to-break-load-order

Having said all that I am getting rid of barrels from the project that I am going to work on.

Thanks,
Bhasker

hansl pushed a commit that referenced this issue Dec 12, 2016
BREAKING CHANGES:  The app root module and component must now be imported directly. (e.g., use `import { AppModule } from './app/app.module';` instead of `import { AppModule } from './app/';`)

Fixes #3369
MRHarrison pushed a commit to MRHarrison/angular-cli that referenced this issue Feb 9, 2017
BREAKING CHANGES:  The app root module and component must now be imported directly. (e.g., use `import { AppModule } from './app/app.module';` instead of `import { AppModule } from './app/';`)

Fixes angular#3369
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants