128

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

||||||
  • 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. – Bryan Feb 11 '16 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? – Marin Petkov Feb 12 '16 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. – Gary May 8 '16 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. – Marin Petkov May 9 '16 at 13:27
  • 1
    Our team recently went through this decision process and found this resource very useful: npmjs.com/package/awesome-angular2 – theUtherSide May 25 '16 at 0:44
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

||||||
  • 3
    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? – FacundoGFlores Nov 24 '16 at 18:47
  • what is the purpose of each index.ts file? is it meant for routing? – Nicky Dec 12 '16 at 9:45
  • 1
    @FacundoGFlores it means that components is lazy loaded. – charlie_pl Jan 13 '17 at 12:06
  • 2
    @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' – charlie_pl Jan 13 '17 at 12:09
  • 1
    The image above is outdated by now. For example, it does not show the "src" folder, which becomes the parent of the "app" folder. – Christoph Apr 26 '17 at 2:53
11

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/

||||||
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.

||||||
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
||||||
  • 2
    This answer is old. I am using mgechev/angular2-seed from github now, for 3 of my projects. Its fantastic!!! – Savaratkar Jul 27 '16 at 5:18
  • Savaratkar's answer is best here, however I will go further by creating an assets forlder where the js,css,images,fonts...etc reside. – vicgoyso Aug 14 '17 at 9:42
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
||||||
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*
||||||
0

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

||||||
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
||||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.