Structure of an Angular application - Part 1

An Angular application typically follows a structured and modular architecture to facilitate scalability, maintainability, and reusability of code. This structured approach fosters a cohesive and maintainable codebase, essential for building complex Angular applications. let's look at how the Angular project is organized

Anatomy of an Angular Project

Understanding the anatomy of an Angular project is critical for creating and sustaining strong Angular applications. Understanding an Angular project's components and folder organization allows developers to explore and manage the codebase effectively. Let's look at the anatomy of an Angular project.

1. The node_modules Folder

The node_modules folder is an important folder of every Angular project because it is used to manage dependencies. When you use a package manager such as npm or yarn to install external libraries or packages, the dependencies are saved in the node_modules subdirectory. This folder contains all of the code and resources required for the installed packages, allowing your Angular project to use their features.

The node_modules folder is a centralized location for storing and managing dependencies and ensures that the required libraries are readily available for your project. It eliminates the need to include and manage each dependency manually

When you add or update a dependency in your project’s package.json file, the package manager will automatically fetch and install the necessary packages into the node_modules folder.

2. The src Folder

The src folder is the project's root directory. It is critical since it contains all of the source files and resources needed to build the Angular application. The src subdirectory contains the majority of the code that developers write and edit. It is a central hub for the application's various components and resources.

3. The app Folder

The app folder, located within the src folder, represents the main application module. It contains the fundamental functionality of the Angular application. The app folder contains components, services, directives, and other application-specific resources. Within the app folder, developers arrange and structure their code to create the user interface, apply business logic, and manipulate data. This is where the majority of the application's development occurs.

5. The environments folder

The environments folder is another important directory within the src folder of a project. It is specifically used to store environment-specific configuration files. Different environments such as development, staging, and production are used in a typical project which requires different settings and variables.

Developers can generate unique configuration files for each environment within the environments folder. These files typically include variables and settings particular to the environment. These configuration files can be used to establish API endpoints, database connection strings, feature flags, and other environment-specific variables.

After Angular 15, the environments folder is not created by default. You must manually construct them. Angular's finest provision allows you to quickly establish new environments. The benefit is that it will also update the angular.json file for the newly formed environment.TS file

Use the below command to create new environment files in the Angular project

ng generate environments        

I never recommend creating them manually but if you still want to manually create environments, follow these steps:

Create an environments directory and then create your custom environments like the ones below

• environment.ts
• environment.prod.ts
• environment.staging.ts

Then you have to update the angular.json file to replace the environments at build time.

"production": {
        "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.prod.ts"
          },
        ]
      },
      "dev": {
        "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.dev.ts"
          },
        ]
      },        

6. The angular.json File

The angular.json file is an important configuration file in a project since it allows you to configure different aspects of the build, development, and deployment processes. It functions as a primary configuration centre for your project, allowing flexibility and control over various variables.

The angular.json file contains configuration options related to the project’s architecture such as the root folder, build targets, environment settings, and more. It allows you to define and customize the behaviour of Angular CLI commands such as ng build, ng serve, and ng test.

With the angular.json file, you can configure different build configurations for different environments along with specifying the output paths for compiled code and assets and defining custom scripts and stylesheets to be used in the project.

So far we observed the most important Angular project components. In the next NGX-LK newsletter, I will bring you some more cool stuff about Angular.