11

If I run this:

ng g component components/blogs

I get

app
+--components
| +--blogs
| |  +--shared
| |  |  +--index.ts              // what's this for?
| |  +--blogs.component.css
| |  +--blogs.component.html
| |  +--blogs.component.ts
| |  +--blogs.component.spec.ts  // unit tests!
| |  +--index.ts

I understand the rest, but what is the /blogs/shared/index.ts for? Why does a component have a shared folder if that component folder is just for the component?

1 Answer 1

19

The idea of the index.ts file in the shared dir is something called a barrel.

The goal of the barrel it to consolidate imports. It will export the items contained within shared to make the imports in blogs.component.ts cleaner...

app/components/blogs/shared/blogs.service.ts

export class BlogsService { ... }

app/components/blogs/shared/blog.model.ts

export class Blog { ... }

app/components/blogs/shared/index.ts

export * from './blogs.service';
export * from './blog.model';

app/components/blogs/blogs.component.ts

// without barrel
import { BlogsSerivce } from './shared/blogs.service';
import { Blog } from './shared/blog.model';

// with barrel
import { BlogService, Blog } from './shared';

And if you can imagine this becomes much more consolidated as you add more components/services/directives/models.

REFERENCE You can read about barrels in the official style guide (Thanks to Günter Zöchbauer)

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

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