Angular 101: what is a Barrel, index.ts file?

upgrade to angular

 

Have you ever come across an index.ts file and wondered what it is?

Here is an example:
upgrade to angular

 

index.ts is a Barrel

barrel is the name for an index.ts file. A barrel is a way to roll-up exports from several modules into a single module.

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

 

Should I use barrels?

The simple answer is Yes. However, barrels were removed from the Angular style guide.

“Barrels now are far less useful and have been removed from the style guide; they remain valuable but are not a matter of Angular style.”

So if you want to follow the Angular Style Guide you should avoid them.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.