136

I am an Angular 1 developer that is starting to learn about Angular 2. There are a lot of different types of folder structure methods depending on the training material. I am going to list each one below and I would love to get people's opinions on which I should use and why. Also, if there is a method that is not listed but you feel that it works better, please feel free to list it as well.

By looking at all of these, method #3 is pretty much how I was doing my Angular 1 apps.

Method 1: angular2-quickstart

Source: https://angular.io/guide/quickstart

Folder Structure:

enter image description here

Method 2: ng-book2

Source: https://www.ng-book.com/2/ (have to pay to see the files)

Folder Structure:

enter image description here

Method 3: mgechev/angular2-seed

Source: https://github.com/mgechev/angular2-seed

Folder Structure:

enter image description here

Improve this question
7
  • 1
    I feel that Method 2 is the most efficient because all components, services, etc., should be kept in separate folders to make it easy to find files later. This is the most efficient method in a very complex app. Commented Feb 11, 2016 at 17:46
  • Thanks for the answer @Bryan, what do you think is the reason for the typings folder? None of the other 2 methods use it. Also, do you have an opinion on app.ts vs main.ts for the main file? Commented Feb 12, 2016 at 14:19
  • So the seed I've been using recently went to the style guide which is method3 here. I'm confused how this scales, and why is there a shared folder? isn't the entire point of this framework so that any component/directive/pipe/service can be shared by anyone? It's hard for me to understand how to easily find directives/pipes .. with the style guide format you have to just know where it's located, or look in every folder for that one service you thought you'd only use for customers and now you need it for other stuff. Commented May 8, 2016 at 15:15
  • 1
    @Gary - So my take on the shared folder for the seeder is that anything in shared can be used in classes that are located at same folder level or any sub folders. Can you use any class anywhere? Sure you can but then when someone new looks at your code they will not know what is going on. By placing classes that are used between different components/folders inside shared it clearly lets the programmer know that it is used in multiple places. Commented May 9, 2016 at 13:27
  • 1
    Our team recently went through this decision process and found this resource very useful: npmjs.com/package/awesome-angular2 Commented May 25, 2016 at 0:44

9 Answers 9

Reset to default
116

The official guideline is there now. mgechev/angular2-seed had alignment with it too. see #857.

Angular 2 application structure

https://angular.io/guide/styleguide#overall-structural-guidelines

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

8 Comments

I can not find where the documentation suggest to put a "+" sign before the folder name. I can not remember what does it mean, is there any explanation?
what is the purpose of each index.ts file? is it meant for routing?
@FacundoGFlores it means that components is lazy loaded.
@Nicky Purpose for index.ts files is to simplify imports, you don't have to import from each file, but from folder: for example import { Hero, Sword, Shield } from 'app/heroes/hero'
The image above is outdated by now. For example, it does not show the "src" folder, which becomes the parent of the "app" folder.
|
12

I think structuring the project by functionalities is a practical method. It makes the project scalable and maintainable easily. And it makes each part of the project working in a total autonomy. Let me know what you think about this structure below: ANGULAR TYPESCRIPT PROJECT STRUCTURE – ANGULAR 2

source : http://www.angulartypescript.com/angular-typescript-project-structure/

Improve this answer

Comments

10

So after doing more investigating I ended up going with a slightly revised version of Method 3 (mgechev/angular2-seed).

I basically moved components to be a main level directory and then each feature will be inside of it.

Improve this answer

Comments

10

I am going to use this one. Very similar to third one shown by @Marin.

app
|
|___ images
|
|___ fonts
|
|___ css
|
|___ *main.ts*
|   
|___ *main.component.ts*
|
|___ *index.html*
|
|___ components
|   |
|   |___ shared
|   |
|   |___ home
|   |
|   |___ about
|   |
|   |___ product
|
|___ services
|
|___ structures
Improve this answer

2 Comments

This answer is old. I am using mgechev/angular2-seed from github now, for 3 of my projects. Its fantastic!!!
Savaratkar's answer is best here, however I will go further by creating an assets forlder where the js,css,images,fonts...etc reside.
2

Maybe something like this structure:

|-- app
     |-- modules
       |-- home
           |-- [+] components
           |-- pages
              |-- home
              |-- home.component.ts|html|scss|spec
           |-- home-routing.module.ts
           |-- home.module.ts
     |-- core
       |-- authentication
           |-- authentication.service.ts|spec.ts
       |-- footer
           |-- footer.component.ts|html|scss|spec.ts
       |-- guards
           |-- auth.guard.ts
           |-- no-auth-guard.ts
           |-- admin-guard.ts 
       |-- http
           |-- user
               |-- user.service.ts|spec.ts
           |-- api.service.ts|spec.ts
       |-- interceptors
           |-- api-prefix.interceptor.ts
           |-- error-handler.interceptor.ts
           |-- http.token.interceptor.ts
       |-- mocks
           |-- user.mock.ts
       |-- services
           |-- srv1.service.ts|spec.ts
           |-- srv2.service.ts|spec.ts
       |-- header
           |-- header.component.ts|html|scss|spec.ts
       |-- core.module.ts
       |-- ensureModuleLoadedOnceGuard.ts
       |-- logger.service.ts
     |-- shared
          |-- components
              |-- loader
                  |-- loader.component.ts|html|scss|spec.ts
          |-- buttons
              |-- favorite-button
                  |-- favorite-button.component.ts|html|scss|spec.ts
              |-- collapse-button
                  |-- collapse-button.component.ts|html|scss|spec.ts
          |-- directives
              |-- auth.directive.ts|spec.ts
          |-- pipes
              |-- capitalize.pipe.ts
              |-- safe.pipe.ts
     |-- configs
         |-- app-settings.config.ts
         |-- dt-norwegian.config.ts
     |-- scss
          |-- [+] partials
          |-- _base.scss
          |-- styles.scss
     |-- assets
Improve this answer

6 Comments

Good. But I am confused what should be moved to the components and pages folders? On your example, what should we keep in the module > home > components folder?
@Jack Use this link for the reference - github.com/mathisGarberg/angular-folder-structure
Thanks, but the example simply use page as component . But I need an example where bot components and pages exists in order to see the separation. Any suggestion of github page for that?
Any help please?
I don't understand your question, please open the reference link above and follow the path angular-folder-structure/src/app/modules/ , open one of these modules and investigate the single module folder structure.
|
1

If project is small and will remain small, I would recommend to structure by type (Method 2: ng-book2) 

app
|- components
|  |- hero
|  |- hero-list
|  |- villain
|  |- ...
|- services
|  |- hero.service.ts
|  |- ...
|- utils
|- shared

If project will grow you should structure your folders by domain (Method 3: mgechev/angular2-seed) 

app
|- heroes
|  |- hero
|  |- hero-list
|  |- hero.service.ts
|- villains
|  |- villain
|  |- ...
|- utils
|- shared

Better to Follow official docs.
https://angular.io/guide/styleguide#application-structure-and-ngmodules

Improve this answer

Comments

0

I’ve been using ng cli lately, and it was really tough to find a good way to structure my code.

The most efficient one I've seen so far comes from mrholek repository (https://github.com/mrholek/CoreUI-Angular).

This folder structure allows you to keep your root project clean and structure your components, it avoids redundant (sometimes useless) naming convention of the official Style Guide.

Also it’s, this structure is useful to group import when it’s needed and avoid having 30 lines of import for a single file.

src
|
|___ app
|
|   |___ components/shared
|   |   |___ header
|   |
|   |___ containers/layout
|   |   |___ layout1
|   |
|   |___ directives
|   |   |___ sidebar
|   |
|   |___ services
|   |   |___ *user.service.ts* 
|   | 
|   |___ guards
|   |   |___ *auth.guard.ts* 
|   |
|   |___ views
|   |   |___ about  
|   |
|   |___ *app.component.ts*
|   |
|   |___ *app.module.ts*
|   |
|   |___ *app.routing.ts*
|
|___ assets
|
|___ environments
|
|___ img
|   
|___ scss
|
|___ *index.html*
|
|___ *main.ts*
Improve this answer

Comments

0

I suggest the following structure, which might violate some existing conventions.

I was striving to reduce name redundancy in the path, and trying to keep naming short in general.

So there is no/app/components/home/home.component.ts|html|css.

Instead it looks like this:

|-- app
    |-- users
        |-- list.ts|html|css
        |-- form.ts|html|css
    |-- cars
        |-- list.ts|html|css
        |-- form.ts|html|css
        |-- configurator.ts|html|css
    |-- app.component.ts|html|css
    |-- app.module.ts
    |-- user.service.ts
    |-- car.service.ts
|-- index.html
|-- main.ts
|-- style.css
Improve this answer

Comments

0

Here's mine

app
|
|-- shared (for html shared between modules)
|   |
|   |-- layouts
|   |   |
|   |   |-- default
|   |   |   |-- default.component.ts|html|scss|spec.ts
|   |   |   |-- default.module.ts
|   |   |
|   |   |-- fullwidth
|   |       |-- fullwidth.component.ts|html|scss|spec.ts
|   |       |-- fullwidth.module.ts
|   |
|   |-- components
|   |   |-- footer
|   |   |   |-- footer.component.ts|html|scss|spec.ts
|   |   |-- header
|   |   |   |-- header.component.ts|html|scss|spec.ts
|   |   |-- sidebar
|   |   |   |-- sidebar.component.ts|html|scss|spec.ts
|   |
|   |-- widgets
|   |   |-- card
|   |   |-- chart
|   |   |-- table
|   |
|   |-- shared.module.ts
|
|-- core (for code shared between modules)
|   |
|   |-- services
|   |-- guards
|   |-- helpers
|   |-- models
|   |-- pipes
|   |-- core.module.ts
|
|-- modules (each module contains its own set)
|   |
|   |-- dashboard
|   |-- users
|   |-- books
|       |-- components -> folders
|       |-- models
|       |-- guards
|       |-- books.service.ts
|       |-- books.module.ts
|
|-- material
|   |-- material.module.ts
Improve this answer

Comments

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.