Understanding Angular Project Structure | CodeSignal Learn

Understanding Angular Project Structure | CodeSignal Learn

Introduction

Welcome to the second lesson of the Front-end Engineering in Angular course! 🎉 In the previous lesson, we set the stage by learning how to set up an Angular project. We explored the importance of Angular in web development and got hands-on with creating a new project using Angular CLI. Now, it's time to dive deeper into the structure of an Angular project. By the end of this lesson, you'll have a clear understanding of the key files and directories that make up an Angular project, which will be essential as you continue to build more complex applications.

Key Configuration Files

In an Angular project, several configuration files play a crucial role in defining the project's setup and behavior. Let's explore three of the most important ones: angular.json: This file holds the configuration for your Angular app, defining settings for building, testing, and serving the application. It includes options like projects for specifying the Angular applications in the workspace, architect for defining commands like build, serve, and test for the project, and styles & scripts for listing where to find global styles and JavaScript files. package.json: It contains metadata about the project, such as its name, version, and dependencies. tsconfig.json: This file provides general TypeScript configuration, specifying compiler options and file inclusions. It includes settings such as compilerOptions for specifying how TypeScript transpiles code (e.g., ES6 output, module resolution), include for defining which files should be compiled and exclude for preventing unnecessary files from being compiled (e.g., node_modules/). Here's a simple example of what you might find in a package.json file: { "name": "my-angular-app", "version": "1.0.0", "dependencies": { "@angular/core": "^12.0.0", "rxjs": "~6.6.0" } } In this snippet, name and version describe the project, while dependencies list the packages required for the project to run. Understanding these files helps you manage your project's configuration and dependencies effectively. In the package.json file, the characters ~ and ^ are used to specify version ranges for dependencies: ~ (Tilde): This character allows updates to the most recent patch version within the specified minor version. For example, "rxjs": "~6.6.0" means that npm can update to any version 6.6.x where x is the latest patch version available, but it will not update to 6.7.0 or beyond. ^ (Caret): This character allows updates to the most recent minor version within the specified major version. For example, "@angular/core": "^12.0.0" means that npm can update to any version 12.x.x where x is the latest minor or patch version available, but it will not update to 13.0.0 or beyond.

Sign up

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Node Modules Directory

The node_modules directory is a vital part of any Angular project. It contains all the npm packages that your project depends on. When you install a package using npm, it gets stored in this directory. Imagine you have a project that relies on Angular and RxJS. When you run npm install, these packages, along with their dependencies, are downloaded and placed in node_modules . This directory ensures that all necessary code libraries are available for your project to function correctly. node_modules/ ├── @angular/ ├── rxjs/ └── ... This structure shows how packages are organized within node_modules . It's crucial for managing dependencies and ensuring your project has access to the libraries it needs. Since the node_modules/ directory contains all installed dependencies, it is typically not included in version control (e.g., Git) because it can be reinstalled at any time using npm install, based on package.json and it is platform-dependent, meaning different operating systems may install different versions of some dependencies.

Exploring the directories

There are different directories that conform an Angular application. The public directory stores static data like images and icons. The src directory is where most of your development work happens. You are free to structure it the way you want, here is a recommendation of subdirectories that will help organize your code: main.ts : Entry point of Angular, used to bootstrap your application index.html : Base html file for bootstraping styles.css : Global css styles applied to the whole project app : The main directory for your application's code, further divided into: core : Contains core functions and services shared across the application. features : Organizes application requirements into feature-based architectures. shared : Holds components, directives, and pipes shared across modules. Here's a glimpse of how the app directory might be structured: app/ ├── core/ ├── features/ ├── shared/ ├── app.config.ts ├── app.routes.ts ├── app.component.ts ├── app.component.html └── app.component.css This organization helps keep your codebase clean and manageable, making it easier to locate and work with different parts of your application.

Best Practices for Project Structure

To maintain a clean and efficient codebase, it's important to follow best practices like the LIFT principle: Locate : Code should be easy to find. Identify : Code should be identifiable at a glance. Flat : Keep the structure as flat as possible. DRY : Don't Repeat Yourself; avoid code duplication. For example, if you have a utility function used across multiple components, place it in the shared directory to promote reusability and avoid duplication. // shared/utils.ts export function formatDate(date: Date): string {return date.toISOString().split('T')[0];} By placing the formatDate function in the shared directory, you ensure that it can be easily accessed and reused across your application, adhering to the DRY principle.

plaintext

app/
  ├── core/
  ├── features/
  ├── shared/
  ├── app.config.ts
  ├── app.routes.ts
  ├── app.component.ts
  ├── app.component.html
  └── app.component.css