Angular Folder Structure Best Practices

In this tutorial, we learn how best to organize the folder structure of an Angular Application. Finding the right folder structure for your real-life Angular application is very important. As you add more and more features to your App locating a certain component or file becomes messy if you do not have the proper structure in place.

Folder for each Angular Module

The Angular uses the concept of Angular Modules to group together the related features. This gives us a nice starting point to organize the folder structure. Each Module should get its own folder named after the Module Name.

The Angular does not make any distinction between the Modules. but based on how we make use of modules, we can classify our modules into the following four categories

  1. Root Module
  2. Feature Module
  3. Shared Module
  4. Core Module

Root Module

The Angular requires one module to be loaded as the application starts. We call this as root module. The root module loads the root component and all other modules

 The root module is conventionally called as AppModule and created under the  /src/app.folder

Feature Modules

The Features module implements a specific feature of the Application. All the components, pipes & directives which implement the feature become part of the module.

Further Reading on Angular Modules

All the components belonging to Feature Modules must be placed inside a directory named after the module. For Example /src/app/<ModuleName>.  By doing so, we make it easy to search a component belonging to the module

You can create subfolders for directives, pipes under the module folder

You can create a components folder and put all your components there. Or create a subfolder for each component under the components folder

Another option to create a pages folder. Each route is a page. The folder is named after the route path. The route might contain more than one component. All of them placed under that page folder. The shared components can be placed under the separate components folder.

The idea of pages is borrowed from this article on Medium

Shared Module

There are many components, directives & pipes, which we may like to share across various modules. All these components should go into the shared module. 

The shared module and must declare the components, pipes, and directives using the declarations metadata and export it using the exports metadata

Other Modules can import the shared modules and use the exported components, directives & pipes

The Services must not be defined here. Since the shared modules are imported everywhere, it may create a new instance of the service if it is imported in the lazy loaded modules.

The Shared module must be created under the folder /src/app/shared folder.

The Shared module should not have any dependency on any of the other modules in the application.

The commonly required angular modules like ( CommonModule, FormsModule, etc) or third party modules can be imported here and re-exported. The other module importing the shared module does not have to import those modules.

You can follow the following folder structure, where each shared feature is created in its own own folder. 

Or you can create folders like components, pipes, directives as shown below

Core Module

The Services shared across the application must become part of the CoreModule. The user authentication services, services that fetch data are examples of such services.

The Services usually needs to be Singleton, Only one instance of the Service must exist. Providing it in CoreModule ensures that the services remain singleton

The core module must be imported only in the root module. Other modules must not import the core modules. You can use the following code to stop the other modules from importing the core module.

The CoreModule must be created under the folder /src/app/core folder.

Under the core folder, you can create subfolders for each service under the services folder.

Folder Structure Example 

Let us build a simple with shared, core and feature module

Create a new application using ng new

Feature Modules

Now let us create three feature modules AdminModule, GthubModule & HomeModule

Admin Module

Create the admin folder under /src/app folder

Under the /src/app/admin folder create the admin.module.ts 

/src/app/admin/admin.module.ts

/app/src/admin/admin.routing.module.ts

AdminModule has four pages. A admin page is the root page. You can create it under the pages folder.

/app/src/admin/pages/admin.component.ts

/app/src/admin/pages/admin.component.html

The admin page has three pages under it. dashboard, rights & user. Hence create a subfolder for all these under the pages folder.

/app/src/admin/pages/dashboard/dashboard.component.ts

/app/src/admin/pages/rights/rights.component.ts

/app/src/admin/pages/user/user.component.ts

/app/src/admin/pages/index.ts

/app/src/admin/index.ts

Github Module

The GithubModule retrieves the list of repos from the GitHub repository for a given user. The module is created under the folder github. The components is created under the the pages folder.

/app/src/github/pages/list/repo-list.component.ts

/app/src/github/pages/list/repo-list.component.html

/app/src/github/pages/index.ts

/app/src/github/github-routing.module.ts

/app/src/github/github.module.ts

/app/src/github/index.ts

Home Module

This module contains three components, HomeComponent, ContactUsComponent and AboutUsComponent

src/app/home/pages/about-us.component.ts

src/app/home/pages/contact-us.component.ts

src/app/home/pages/home.component.ts

src/app/home/pages/index.ts

src/app/home/home-routing.module.ts

src/app/home/home.module.ts

src/app/home/index.ts

Core Module

The CoreModule contains application-wide singleton services. In this example app, it contains a GitHubService which retrieves the list of repositories of a given user.The CoreModule is created under the folder src/app/core.

All services are created under the src/app/core/services folder. You may also create subfolder for each service.

src/app/core/models/repos.ts

src/app/core/models/index.ts

src/app/core/models/services/github.service.ts

src/app/core/models/services/index.ts

src/app/core/models/core.module.ts

src/app/core/models/index.ts

Shared Module

Our Shared Module contains HeaderComponent & FooterComponent, which is used by the root module.

/src/app/shared/layout/footer/footer.component.html

/src/app/shared/layout/footer/footer.component.ts

/src/app/shared/layout/header/header.component.html

/src/app/layout/header/header.component.css

/src/app/layout/header/header.component.ts

/src/app/layout/index.ts

/src/app/shared/shared.module.ts

/src/app/shared/index.ts

Final Folder Structure

The following list shows the final structure of our application. You can change/fine-tune them as per the requirement of your project.

References

Style Guide

11 thoughts on “Angular Folder Structure Best Practices”

  1. Hello, there and thank you for this detailed article. My only challenge is that some of the files have an incorrect path and some components were imported before we had created them.
    The incorrect path are:
    Admin Module
    /app/src/admin/admin.routing.module.ts
    /app/src/admin/pages/admin.component.ts
    /app/src/admin/pages/admin.component.html
    /app/src/admin/pages/dashboard/dashboard.component.ts
    /app/src/admin/pages/rights/rights.component.ts
    /app/src/admin/pages/user/user.component.ts
    /app/src/admin/pages/index.ts
    /app/src/admin/index.ts

    Github Module:
    /app/src/github/pages/list/repo-list.component.ts
    /app/src/github/pages/list/repo-list.component.html
    /app/src/github/pages/index.ts
    /app/src/github/github-routing.module.ts
    /app/src/github/github.module.ts
    /app/src/github/index.ts

    Please can you share the link to the repository with the source code?

    Thank you again.

  2. Hi, I think you might have interchanged the folder structure for the below objects. Instead of using /app/src it should be /src/app

    /app/src/admin/admin.routing.module.ts
    /app/src/admin/pages/admin.component.ts
    /app/src/admin/pages/admin.component.html
    /app/src/admin/pages/dashboard/dashboard.component.ts
    /app/src/admin/pages/rights/rights.component.ts
    /app/src/admin/pages/user/user.component.ts
    /app/src/admin/pages/index.ts
    /app/src/admin/index.ts
    /app/src/github/pages/list/repo-list.component.ts
    /app/src/github/pages/list/repo-list.component.html
    /app/src/github/pages/index.ts
    /app/src/github/github-routing.module.ts
    /app/src/github/github.module.ts
    /app/src/github/index.ts

  3. Luciano Carreiro

    Thank you for sharing your knowledg!
    I think here would be:
    /src/app/shared/layout/header/header.component.html
    Instead of:
    /src/app/shared/layout/footer/header.component.html

  4. Cheers!

    You put some files from core and services under “/modules” in core. The final structure shows it correctly, but the detailed explaination is not alwas correct.

  5. Hi,
    Nice article. It gives more knowledge on angular folder structure.
    I have question.
    In this same file structure if we have different header and footer for each module, how can we implement routing. Can you pls provide suggestion.

    1. TekTutorialsHub

      Remove footer & Header from the shared module.
      Add them to each module.
      In the top-level component of each module add them

  6. Hi,
    Thank you very much for sharing,
    Maybe i’m wrong but I think there is a small mistake instead of:

    /app/src/admin/pages/dashboard/rights.component.ts
    put:
    /app/src/admin/pages/rights/rights.component.ts

    /app/src/admin/pages/dashboard/user.component.ts
    put :
    /app/src/admin/pages/user/user.component.ts

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top