I hate that all the files are named index

First it was tabs vs spaces, then dangling commas, now it’s “to barrel or not to barrel” (in this case barrel means “entry point”}.

I get it, you have a dozen tabs open in your IDE or chrome debugger and they all say index.js (or index.ts).
Sure you could mouseover the tab and use the parent directory to find the one your looking for, but that is super-annoying.

Aside from the fact that you might already have that problem when looking for super-long-component-name.component.ts and super-long-component-name.component.scss or similarly named services from different areas of the application, it’s really not that big of a problem with modern IDEs.

  • Webstorm, IntelliJ and Sublime are smart enough to add extra path information when files with the same name are loaded.
  • The above tools and Chrome developer all allow you to quickly search for a file with Cmd+Shift+O, Cmd+P or Cmd+O.

Fig1: Cmd+P — Sublime

So if I wanted to edit the style sheet for my ‘about’ component, I would issue a Cmd+O and key-in ‘about/st’+Enter and the editor would open with my file, similarly I would type ‘about/i’ for the actual component and ‘about/t’ for the html template. It’s way faster than scanning tabs or wading through a long list of search results for ‘component’.

Fig2: Cmd+Shift+O — Webstorm

Fig: Cmd+O — Chrome

Now imagine I want to rename a component: I do a global search and replace to change all the references within the file system, but now I have to change the related filenames too! Luckily my version control of choice is usually smart enough to realize the filenames have changed and can keep track of the commit history.

Additionally, while CLIs and Generators take some of the pain out of boiler-plating, many of us still use copy/paste to create new components then do a global search and replace. Having all your imports the same is just one less thing to worry about.

@Component({
selector: ‘home’,
directives: […FORM_DIRECTIVES],
pipes: [],
styles: [require(‘./style.scss’)],
template: require(‘./template.html’)
})

It’s the little things that add up, things like short-handing imports:

import {Api} from ‘./services/api’;
// ./services/api/index.ts
import {Home} from ‘./components/home’;
// ./components/home/index.ts
and 
{ path: ‘/my-long-pathname’, loader: () => require(‘./components/my-long-component-name’)(‘About’), name: ‘About’ }
vs
{ path: ‘/my-long-pathname’, loader: () => require(‘./components/my-long-component-name/my-long-component-name.async’)(‘About’), name: ‘About’ }

Follow ups: 
This article was originally written when Angular 2 was in late beta.

As of the article publish date, Webstorm hides key directory path information in the editor tab (i.e. components/…/index.jsx). I recommend using Tabdir and unchecking Count from start.

[see also]