Code Structure

Learn how this Angular project is structured and where are the files you need to modify.

Project structure

In the root of the project we have the following important files and folders:

​Now let's dive in the details of the /src folder.


Inside of the /src directory we find our raw, uncompiled code. This is where most of the work for your Angular app will take place.

Note: testing is not implemented for this template. If you want to add testing check this guide.


The /app folder is the largest folder because it contains all the code of our Angular app. It has all the components, modules, pages, services and styles you will use to build your project.

This is the core of the project. Let’s have a look at the structure of this folder so you get an idea where to find things and where to add your own modules to adapt this project to your particular needs.

We designed this Angular project with a modular approach.

We strive to showcase an advanced app module architecture so you get a better idea on how to structure and scale your project. Again, modules are great to achieve scalability.

Both /core and /shared folders include auxiliar modules that provide structure and organization to our source code and follow Angular best practices. The other folders you will find inside /app are feature modules that include the different pages of the app.


We will be expanding this documentation ASAP.


We will be expanding this documentation ASAP.


In this folder you will find sample images, sample-data json, and any other asset you may require in your project.


Here you will find all the variables, mixins, shared styles, etc, that will make your app customizable and extendable.

Please read the Theming section for more information.

Last updated