Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 1046 of the free egghead.io lessons, plus get Angular 2 content delivered directly to your inbox!

Existing egghead members will not see this. Sign in.

Organizing Angular 2 projects by feature

2:23 Angular 2 lesson by

This lessons shows one way to structure your project by feature and how all you need to do is update your import statements.

Get the Code Now
click to level up

egghead.io comment guidelines


This lessons shows one way to structure your project by feature and how all you need to do is update your import statements.


I think this is pretty good since it's obviously a tiny "app". My thoughts were a little different on organization though. Say if your app had a Home page. Top level may be app/home. Inside this folder you would have home-page.html and home-page.ts. Inside this folder you'd have a components folder, inside that you have a login folder with a login-component.html and login-component.ts and login-vm.ts (for the viewmodel). So I would keep the model file in with the component, not with the service folder. Then have a register folder, etc. Something like navigation bar, you could keep in app/shared, perhaps.

For organization in Angular 2, we'll just create some folders by feature. We'll have something like a search folder. We can move our search box and our search pipe in there. Then, inside of there, create a components. That's where our search box would go, and a pipes where our pipe would go.

Then we did break everything, so you just have to make sure when you move files around that you update your imports. The search box is now in search/components, and the search pipe is now in search/pipes, and then everything is back working.

We can do the same thing with all the other files and create a to-do directory with a components, a pipes, and a services. Then just start moving files around, to do list, item rendered, inputs, status selector, for all the components. The model and service, we'll drop that in services. Then it's just a matter of going back and fixing all of our imports.


You can organize your imports however you want. I like to keep them grouped together like to-do components group together, services group together, and all of the Angular 2 imports at the top. Then there's lots of other things to fix.


Now everything should be back to working. We organized everything by just changing imports and the directories that they're in.

Joel's Head
Why are we asking?