Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Organizing Angular 2 projects by feature

    John LindquistJohn Lindquist

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



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    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.