For example 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 by creating a file in the same component folder. In this case the folder is called 'heroes' named index.ts (using the conventions) 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';
Still, this can become a very long line; which could be reduced further.
import * as h from '../heroes/index';
That's pretty reduced! The * as h
imports all of the modules and aliases as h