189

I've been looking at a few seed projects and all the components seem to have a index.ts that exports * from that component. I can't find anywhere what it's actually used for?

E.g https://github.com/mgechev/angular2-seed/tree/master/src/client/app/%2Bhome

Thanks

1
  • 3
    Relevant to this discussion is this issue on github. You may want to read through it before using barrel files with your Angular project Jul 4, 2017 at 17:23

4 Answers 4

292

From the Angular.io v2's archived glossary entry for Barrel*:

A barrel is a way to rollup exports from several modules into a single convenience module. The barrel itself is a module file that re-exports selected exports of other modules.

Imagine three modules in a heroes folder:

// heroes/hero.component.ts
export class HeroComponent {}

// heroes/hero.model.ts
export class Hero {}

// heroes/hero.service.ts
export class HeroService {}

Without a barrel, a consumer would need three import statements:

import { HeroComponent } from '../heroes/hero.component.ts';
import { Hero }          from '../heroes/hero.model.ts';
import { HeroService }   from '../heroes/hero.service.ts';

We can add a barrel to the heroes folder (called index by convention) that exports all of these items:

export * from './hero.model.ts';   // re-export all of its exports
export * from './hero.service.ts'; // re-export all of its exports
export { HeroComponent } from './hero.component.ts'; // re-export the named thing

Now a consumer can import what it needs from the barrel.

import { Hero, HeroService } from '../heroes'; // index is implied

The Angular scoped packages each have a barrel named index.

See also EXCEPTION: Can't resolve all parameters


* NOTE: Barrel has been removed from more recent versions of the Angular glossary.

UPDATE With latest versions of Angular, barrel file should be edited as below,

export { HeroModel } from './hero.model';  
export { HeroService } from './hero.service'; 
export { HeroComponent } from './hero.component';
14
  • 8
    When I do equivalent of export * from './hero.model.ts', I get a message like "'an import path cannot end with a '.ts''" So I just change to export * from './hero.model'. Also worth repeating your comment about Angular not recommending barrels anymore Jan 22, 2017 at 23:46
  • 1
    @TheRedPea thanks for the hint. I don't want to change it because it's a quote from (an earlier version of the) linked page Jan 23, 2017 at 8:23
  • Do you know is there any helper library or command to generate index.js automatically?
    – tom10271
    Jan 23, 2017 at 9:55
  • 1
    @AlexanderAbakumov Since a component, directive or pipe must belong to one and only one module, then by having declared any of the above in a module, when you import that module you essentially achieve the same thing... assuming you also exported them from the module.
    – rism
    May 6, 2018 at 9:28
  • 2
    @Qwerty I'm quite sure this works with tree-shaking, but using barrels was removed from suggested practices a long time ago, I think when modules where introduced just before 1.0. Feb 6, 2019 at 14:42
53

index.ts is similar index.js in nodejs or index.html is web site hosting.

So when you say import {} from 'directory_name' it will look for index.ts inside the specified directory and import whatever is exported there.

For example if you have calculator/index.ts as

export function add() {...}
export function multiply() {...}

You can do

import { add, multiply } from './calculator';
2
  • 3
    @FlowerScape Exporting via the index is particularly useful when creating libraries or module-level code, so that end users have less verbose imports. It also hides any unnecessary/confusing implementation details of the imported code. Mar 24, 2018 at 4:05
  • Refactoring. You can change code, ex. rename files, as long as you keep the exports in index.ts the same.
    – user77115
    Apr 20, 2020 at 10:12
9

index.ts help us to keep all related thing together and we don't need to worry about the source file name.

We can import all thing by using source folder name.

import { getName, getAnyThing } from './util';

Here util is folder name not file name which has index.ts which re-export all four files.

export * from './util1';
export * from './util2';
export * from './util3';
export * from './util4';
2

index.ts is usually located outside the internal folder. E.g.:

my-app/
├─ src/
│  ├─ internal/
│  │  ├─ app.ts
│  ├─ index.ts

Assume that in /src/internal/app.ts, we want to import any function, e.g function A.

If we don't have the index.ts where we put export * from ./internal/app.ts, when importing function A from external, our path will go straight inside the internal folder

import {A} from ./src/internal/app

This should be avoided as much as possible.

If we use index.ts, our path is just simple

import {A} from ./src

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.