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

index.ts is a Barrel

A barrel is a 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.

Webdev Newsletter By Techiediaries

Using Barrel files with Angular