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
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 thingNow a consumer can import what it needs from the barrel.
import { Hero, HeroService } from '../heroes'; // index is impliedThe 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';
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
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'; 
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'; 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
