Understanding Dependency Injection with TypeScript, NestJS, and Angular

Introduction

In modern web development, writing maintainable, testable, and scalable code is paramount. One design pattern that has become fundamental to achieving these goals is dependency injection (DI). Whether you're building a backend API with NestJS or a dynamic frontend with Angular, understanding dependency injection will significantly improve your code quality and development workflow.

Dependency injection is more than just a buzzword—it's a powerful technique that removes hard-coded dependencies and promotes loose coupling between components. This leads to code that is easier to test, modify, and extend. In this guide, we'll explore how dependency injection works across the TypeScript ecosystem, with practical examples in TypeScript, NestJS, and Angular.

What is Dependency Injection?

Definition

Dependency Injection is a design pattern that allows for the removal of hard-coded dependencies, making code more flexible and easier to manage. Instead of a class creating its own dependencies, those dependencies are "injected" from the outside, typically through a constructor, setter method, or interface.

At its core, dependency injection follows the Inversion of Control (IoC) principle, where the control of creating and managing dependencies is inverted from the class itself to an external entity (often called a DI container or injector).

Types of Dependency Injection

There are three primary methods for implementing dependency injection:

1. Constructor Injection: Dependencies are provided through a class constructor. This is the most common and preferred method as it makes dependencies explicit and ensures they're available when the object is created.

2. Setter Injection: Dependencies are provided through setter methods or properties after object instantiation. This approach offers flexibility but can lead to objects being in an incomplete state.

3. Interface Injection: The dependency provides an injector method that will inject the dependency into any client passed to it. This is less common in modern frameworks.

Why Use Dependency Injection?

• Improved Testability: You can easily mock dependencies in unit tests
• Loose Coupling: Classes depend on abstractions rather than concrete implementations
• Better Maintainability: Changes to dependencies don't require modifying dependent classes
• Enhanced Reusability: Components can be reused with different dependency implementations
• Clearer Code Structure: Dependencies are explicit and visible

Dependency Injection in TypeScript

TypeScript provides several features that make dependency injection more elegant and type-safe, including decorators, interfaces, and strong typing support.

TypeScript Features for DI

Decorators are special declarations that can be attached to classes, methods, or properties. While decorators are still in the proposal stage for JavaScript, TypeScript has supported them for years, making them ideal for metadata-driven dependency injection.

Interfaces define contracts that classes must follow, allowing you to depend on abstractions rather than concrete implementations.

Simple TypeScript Example

Let's create a basic example without any framework:

// Define an interface for our dependency
interface ILogger {
  log(message: string): void;
}

// Concrete implementation
class ConsoleLogger implements ILogger {
  log(message: string): void {
    console.log(`[LOG]: ${message}`);
  }
}

// Another implementation
class FileLogger implements ILogger {
  log(message: string): void {
    // In a real scenario, this would write to a file
    console.log(`[FILE]: ${message}`);
  }
}

// Service class that depends on ILogger
class UserService {
  // Constructor injection
  constructor(private logger: ILogger) {}

  createUser(username: string): void {
    // Business logic
    this.logger.log(`Creating user: ${username}`);
    // More logic...
  }
}

// Usage - we manually inject the dependency
const consoleLogger = new ConsoleLogger();
const userService = new UserService(consoleLogger);
userService.createUser("john_doe");

// Easy to switch implementations
const fileLogger = new FileLogger();
const userServiceWithFileLogger = new UserService(fileLogger);
userServiceWithFileLogger.createUser("jane_doe");

In this example, UserService doesn't know or care about the specific logger implementation—it only depends on the ILogger interface. This makes it easy to swap implementations and test the service with mock loggers.

Manual DI Container

For more complex applications, you might create a simple DI container:

class DIContainer {
  private services = new Map<string, any>();

  register<T>(name: string, instance: T): void {
    this.services.set(name, instance);
  }

  resolve<T>(name: string): T {
    const service = this.services.get(name);
    if (!service) {
      throw new Error(`Service ${name} not found`);
    }
    return service;
  }
}

// Usage
const container = new DIContainer();
container.register('logger', new ConsoleLogger());
container.register('userService', new UserService(container.resolve('logger')));

const userService = container.resolve<UserService>('userService');

While this works, modern frameworks like NestJS and Angular provide sophisticated DI containers out of the box.

Implementing Dependency Injection in NestJS

Overview of NestJS

NestJS is a progressive Node.js framework for building efficient, scalable server-side applications. It uses TypeScript by default and is heavily inspired by Angular's architecture, including its powerful dependency injection system.

NestJS comes with a built-in IoC (Inversion of Control) container that manages the instantiation and lifecycle of providers (services), making dependency management seamless.

Setting Up a NestJS Project

First, install the NestJS CLI and create a new project:

npm i -g @nestjs/cli
nest new my-nestjs-app
cd my-nestjs-app

Creating Services with Dependency Injection

Let's create a practical example with a UserService and a DatabaseService:

database.service.ts

import { Injectable } from '@nestjs/common';

@Injectable()
export class DatabaseService {
  private users: any[] = [];

  async saveUser(user: any): Promise<void> {
    this.users.push(user);
    console.log('User saved to database:', user);
  }

  async findUserById(id: string): Promise<any> {
    return this.users.find(user => user.id === id);
  }

  async getAllUsers(): Promise<any[]> {
    return this.users;
  }
}

user.service.ts

import { Injectable } from '@nestjs/common';
import { DatabaseService } from './database.service';

@Injectable()
export class UserService {
  // Dependency is injected through the constructor
  constructor(private readonly databaseService: DatabaseService) {}

  async createUser(name: string, email: string): Promise<any> {
    const user = {
      id: Date.now().toString(),
      name,
      email,
      createdAt: new Date(),
    };

    await this.databaseService.saveUser(user);
    return user;
  }

  async getUser(id: string): Promise<any> {
    return this.databaseService.findUserById(id);
  }

  async listUsers(): Promise<any[]> {
    return this.databaseService.getAllUsers();
  }
}

user.controller.ts

import { Controller, Get, Post, Body, Param } from '@nestjs/common';
import { UserService } from './user.service';

@Controller('users')
export class UserController {
  // UserService is automatically injected
  constructor(private readonly userService: UserService) {}

  @Post()
  async create(@Body() createUserDto: { name: string; email: string }) {
    return this.userService.createUser(
      createUserDto.name,
      createUserDto.email,
    );
  }

  @Get(':id')
  async findOne(@Param('id') id: string) {
    return this.userService.getUser(id);
  }

  @Get()
  async findAll() {
    return this.userService.listUsers();
  }
}

user.module.ts

import { Module } from '@nestjs/common';
import { UserController } from './user.controller';
import { UserService } from './user.service';
import { DatabaseService } from './database.service';

@Module({
  controllers: [UserController],
  providers: [UserService, DatabaseService],
  exports: [UserService], // Export if other modules need UserService
})
export class UserModule {}

How NestJS DI Works

1. @Injectable() Decorator: Marks a class as a provider that can be managed by the NestJS IoC container.

2. Module Registration: Providers are registered in the module's providers array.

3. Automatic Resolution: When NestJS instantiates a class, it automatically resolves and injects all constructor dependencies.

4. Singleton Scope: By default, providers are singletons—one instance is shared across the entire application.

Custom Providers

NestJS supports various provider patterns:

import { Module } from '@nestjs/common';

// Value provider
const configProvider = {
  provide: 'CONFIG',
  useValue: {
    apiKey: 'secret-key',
    apiUrl: 'https://api.example.com',
  },
};

// Factory provider
const loggerProvider = {
  provide: 'LOGGER',
  useFactory: () => {
    return new CustomLogger();
  },
};

// Class provider with custom token
const databaseProvider = {
  provide: 'DATABASE_CONNECTION',
  useClass: DatabaseService,
};

@Module({
  providers: [configProvider, loggerProvider, databaseProvider],
})
export class AppModule {}

You can inject these custom providers using the @Inject() decorator:

import { Injectable, Inject } from '@nestjs/common';

@Injectable()
export class ApiService {
  constructor(
    @Inject('CONFIG') private config: any,
    @Inject('LOGGER') private logger: any,
  ) {}

  makeRequest(): void {
    this.logger.log(`Making request to ${this.config.apiUrl}`);
  }
}

Using Dependency Injection in Angular

Introduction to Angular's DI System

Angular has one of the most sophisticated dependency injection systems in the frontend ecosystem. The framework is built around DI from the ground up, making it a first-class citizen in Angular application development.

Angular's DI system is hierarchical, meaning it creates a tree of injectors that mirror the component tree. This allows for fine-grained control over provider scope and sharing.

Providing Services

There are multiple ways to provide services in Angular:

1. Root Level (Singleton across the app)

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Available app-wide as a singleton
})
export class AuthService {
  private currentUser: any = null;

  login(username: string, password: string): boolean {
    // Authentication logic
    this.currentUser = { username };
    return true;
  }

  logout(): void {
    this.currentUser = null;
  }

  getCurrentUser(): any {
    return this.currentUser;
  }

  isAuthenticated(): boolean {
    return this.currentUser !== null;
  }
}

2. Module Level

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DataService } from './data.service';

@NgModule({
  declarations: [],
  imports: [CommonModule],
  providers: [DataService] // Available to this module and its children
})
export class FeatureModule { }

3. Component Level

import { Component } from '@angular/core';
import { LocalStorageService } from './local-storage.service';

@Component({
  selector: 'app-settings',
  template: `<h1>Settings</h1>`,
  providers: [LocalStorageService] // New instance for each component instance
})
export class SettingsComponent {
  constructor(private storage: LocalStorageService) {}
}

Practical Angular Example

Let's build a complete example with a data service and HTTP integration:

user.model.ts

export interface User {
  id: number;
  name: string;
  email: string;
}

user.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { User } from './user.model';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private apiUrl = 'https://api.example.com/users';

  // HttpClient is injected automatically
  constructor(private http: HttpClient) {}

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.apiUrl);
  }

  getUserById(id: number): Observable<User> {
    return this.http.get<User>(`${this.apiUrl}/${id}`);
  }

  createUser(user: Omit<User, 'id'>): Observable<User> {
    return this.http.post<User>(this.apiUrl, user);
  }

  updateUser(id: number, user: Partial<User>): Observable<User> {
    return this.http.patch<User>(`${this.apiUrl}/${id}`, user);
  }

  deleteUser(id: number): Observable<void> {
    return this.http.delete<void>(`${this.apiUrl}/${id}`);
  }
}

notification.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class NotificationService {
  show(message: string, type: 'success' | 'error' | 'info' = 'info'): void {
    // In a real app, this might use a toast library
    console.log(`[${type.toUpperCase()}]: ${message}`);
  }

  success(message: string): void {
    this.show(message, 'success');
  }

  error(message: string): void {
    this.show(message, 'error');
  }
}

user-list.component.ts

import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';
import { NotificationService } from './notification.service';
import { User } from './user.model';

@Component({
  selector: 'app-user-list',
  template: `
    <div class="user-list">
      <h2>Users</h2>
      <button (click)="loadUsers()">Refresh</button>

      <div *ngIf="loading">Loading...</div>

      <ul *ngIf="!loading">
        <li *ngFor="let user of users">
          {{ user.name }} ({{ user.email }})
          <button (click)="deleteUser(user.id)">Delete</button>
        </li>
      </ul>
    </div>
  `
})
export class UserListComponent implements OnInit {
  users: User[] = [];
  loading = false;

  // Multiple services injected via constructor
  constructor(
    private userService: UserService,
    private notificationService: NotificationService
  ) {}

  ngOnInit(): void {
    this.loadUsers();
  }

  loadUsers(): void {
    this.loading = true;
    this.userService.getUsers().subscribe({
      next: (users) => {
        this.users = users;
        this.loading = false;
        this.notificationService.success('Users loaded successfully');
      },
      error: (error) => {
        this.loading = false;
        this.notificationService.error('Failed to load users');
        console.error(error);
      }
    });
  }

  deleteUser(id: number): void {
    this.userService.deleteUser(id).subscribe({
      next: () => {
        this.users = this.users.filter(user => user.id !== id);
        this.notificationService.success('User deleted');
      },
      error: (error) => {
        this.notificationService.error('Failed to delete user');
        console.error(error);
      }
    });
  }
}

Best Practices for Angular DI

1. Use providedIn: 'root' for singleton services: This is tree-shakeable and ensures only one instance exists.

2. Keep services focused: Each service should have a single, well-defined responsibility (Single Responsibility Principle).

3. Use interfaces for abstraction: Define interfaces for your services to make them easier to mock in tests.
   

export interface IUserService {
  getUsers(): Observable<User[]>;
  getUserById(id: number): Observable<User>;
}

@Injectable({
  providedIn: 'root'
})
export class UserService implements IUserService {
  // Implementation
}

1. Leverage dependency injection for testing: Angular's DI makes unit testing straightforward.

import { TestBed } from '@angular/core/testing';
import { UserService } from './user.service';

describe('UserListComponent', () => {
  let component: UserListComponent;
  let mockUserService: jasmine.SpyObj<UserService>;

  beforeEach(() => {
    // Create mock service
    mockUserService = jasmine.createSpyObj('UserService', ['getUsers', 'deleteUser']);

    TestBed.configureTestingModule({
      declarations: [UserListComponent],
      providers: [
        { provide: UserService, useValue: mockUserService }
      ]
    });

    component = TestBed.createComponent(UserListComponent).componentInstance;
  });

  it('should load users on init', () => {
    mockUserService.getUsers.and.returnValue(of([/* mock data */]));
    component.ngOnInit();
    expect(mockUserService.getUsers).toHaveBeenCalled();
  });
});

1. Use injection tokens for non-class dependencies: When you need to inject primitive values or configuration objects.

import { InjectionToken } from '@angular/core';

export const API_URL = new InjectionToken<string>('api.url');

// In module
@NgModule({
  providers: [
    { provide: API_URL, useValue: 'https://api.example.com' }
  ]
})
export class AppModule {}

// In service
@Injectable()
export class ApiService {
  constructor(@Inject(API_URL) private apiUrl: string) {}
}

1. Understand provider scope: Be mindful of where you provide services to control their lifecycle and sharing behavior.

Conclusion

Dependency injection is a cornerstone of modern application development, and its implementation across TypeScript, NestJS, and Angular demonstrates its versatility and power. By embracing DI, you unlock numerous benefits that transform how you write and maintain code.

Key Takeaways

Cleaner, More Maintainable Code: Dependency injection eliminates tight coupling between components, making your codebase easier to understand, modify, and extend. When dependencies are explicitly declared and injected, the relationships between classes become transparent.

Enhanced Testability: With DI, testing becomes significantly simpler. You can easily substitute real dependencies with mocks or stubs, enabling isolated unit tests that run quickly and reliably.

Improved Scalability: As your application grows, dependency injection helps manage complexity. You can refactor implementations without touching dependent code, add new features without breaking existing functionality, and organize your code into modular, reusable components.

Framework-Native Support: Both NestJS and Angular provide robust, built-in DI containers that handle the heavy lifting. You don't need to reinvent the wheel—leverage these battle-tested systems to focus on building features rather than infrastructure.

Moving Forward

Whether you're building a RESTful API with NestJS or a dynamic single-page application with Angular, implementing dependency injection should be a fundamental practice. Start small—refactor a few tightly coupled classes to use constructor injection. As you gain confidence, explore more advanced patterns like factory providers, injection tokens, and hierarchical injectors.

The investment in learning and applying dependency injection pays dividends throughout your project's lifetime. Your future self (and your teammates) will thank you for writing code that's easier to test, maintain, and scale.

Call to Action

Share Your Experience: Have you implemented dependency injection in your projects? What challenges did you face, and how did you overcome them? Drop a comment below—we'd love to hear about your journey and learn from your experiences.

Questions Welcome: If you're new to dependency injection or stuck on a particular implementation, ask your questions in the comments. The developer community thrives on shared knowledge and collaboration.

Spread the Knowledge: If you found this guide helpful, share it with fellow developers who might benefit from understanding dependency injection better. Whether they're just starting with TypeScript or are seasoned Angular/NestJS developers, there's always something new to learn about building better software.

Keep Learning: Dependency injection is just one piece of the software design puzzle. Explore related patterns like the Repository pattern, Factory pattern, and SOLID principles to further enhance your development skills.