File Structure

Before we start coding, let's break down the project structure of the frontend. At first glance, the number of folders might seem intimidating. However, once we explain the purpose and content of each one of them, you will be able to see the logic behind this particular way of organizing the code.

Our code mainly resides in the src/ folder.

Subfolders of src/

src/ contains three sub-folders namely: app/, assets/, environments/. The following is a table that explains the purpose of each folder.

APP SUPPORT FILES	PURPOSE
app/	Contains the component files in which your application logic and data are defined. See details below.
assets/	Contains image and other asset files to be copied as-is when you build your application.
environments/	Contains build configuration options for particular target environments. By default there is an unnamed standard development environment and a production ("prod") environment. You can define additional target environment configurations.

Source: Workspace and project file structure. (2020). Angular. https://angular.io/guide/file-structure

As you have already noticed by looking at the frontend code-base, src/ is not the only folder at the root of our project. There are other folders such as dist/ and e2e/. These come much later in the development process and are not in the scope of this tutorial. We do, however, encourage you to read more about Angular's file structure in the link above.

The aforementioned file structure is not a personal architectural decision but rather the default angular skeleton application. On top of that, we have introduced a folder called shared/. This folder represents a module that contains sub-modules.

SharedModule is a conventional name for an NgModule with the components, directives, and pipes that you use everywhere in your app. This module should consist entirely of declarations, most of them exported.

NgModule FAQ. (2020). Angular. https://angular.io/guide/ngmodule-faq#sharedmodule

Subfolders of shared/

In our implementation, the shared module contains components (breadcrumb, home-message and interceptors and user-actions), services, models and pipes. For instance, the breadcrumb component might be used in the dashboard component as well as the profile component. In other words, we want to show the breadcrumb inside the profile page and the dashboard. Since the breadcrumb is being requested by more than one component, it should be part of the shared module.