Which type of folder structure should be used with Angular 2

Question

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     Method 2  ng-book2  Source  https   www ng-book com 2   have to pay to see the files   Folder Structure     Method 3  mgechev angular2-seed  Source  https   github com mgechev angular2-seed  Folder Structure

User · Answer

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

User · Answer

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

User · Answer

The official guideline is there now  mgechev angular2-seed had alignment with it too  see  857     https   angular io guide styleguide overall-structural-guidelines

User · Answer

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

User · Answer

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

User · Answer

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 - gt  folders          -- models          -- guards          -- books service ts          -- books module ts    -- material      -- material module ts

User · Answer

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

User · Answer

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

User · Answer

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

[angular] Which type of folder structure should be used with Angular 2?

Examples related to angular