Angular Zero: Project Structure, Code Reuse, and Modular Best Practices

In this chapter, we’ll explore code reuse and modularization in Angular projects. These practices not only enhance code maintainability and readability but also significantly improve team collaboration efficiency. In the previous chapter, we discussed component design principles; modularization is a natural extension of that—ensuring our application remains well-structured and scalable.

1. What Is a Module?

In Angular, a module is a collection that groups related components, directives, pipes, and services. Modularization helps decompose an application into distinct functional blocks, enabling those blocks to be reused across different contexts. Every Angular application must have at least one root module—typically AppModule.

Example: Creating a Module

Suppose we’re building an e-commerce application with a dedicated product management feature area. We can encapsulate this functionality in a ProductModule.

// product.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';

@NgModule({
  declarations: [
    ProductListComponent,
    ProductDetailComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    ProductListComponent,
    ProductDetailComponent
  ]
})
export class ProductModule { }

Here, we define a ProductModule containing two components: ProductListComponent and ProductDetailComponent. By grouping them in a single module, we can easily import and reuse these components elsewhere.

2. Best Practices for Code Reuse

2.1 Creating a Shared Module

To promote code reuse, create a shared module to house common components, directives, and pipes. This avoids redundant imports and duplication across modules.

// shared.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ExampleComponent } from './example/example.component';

@NgModule({
  declarations: [
    ExampleComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    ExampleComponent
  ]
})
export class SharedModule { }

By placing reusable components in SharedModule, other modules can simply import it:

// another.module.ts
import { NgModule } from '@angular/core';
import { SharedModule } from '../shared/shared.module';

@NgModule({
  imports: [
    SharedModule
  ]
})
export class AnotherModule { }

2.2 Reusing Services

Services in Angular encapsulate business logic. To enable service reuse across components, provide them at the module or application level.

// product.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class ProductService {
  getProducts() {
    // Fetch product data via API here
  }
}

Here, ProductService is provided in the root injector (providedIn: 'root'), making it available globally throughout the application.

3. Component Reuse and Parameterization

Component reuse isn’t limited to modules—it’s also achieved through input properties and output events. For instance, consider a generic CardComponent that displays various types of content.

// card.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-card',
  template: `
    <div class="card">
      <h3>{{ title }}</h3>
      <p>{{ content }}</p>
    </div>
  `,
  styles: ['.card { border: 1px solid #ccc; padding: 10px; margin: 10px; }']
})
export class CardComponent {
  @Input() title: string;
  @Input() content: string;
}

This component can be reused flexibly:

<app-card title="Product Name" content="Product Description"></app-card>
<app-card title="User Name" content="User Description"></app-card>

4. Lazy Loading Modules

Angular supports lazy loading—loading modules only when needed—which dramatically improves application performance. Lazy loading is commonly integrated with routing—for example, lazily loading a user management module.

Example: Lazy-Loaded Module

Configure lazy loading in your route definitions:

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'products', loadChildren: () => import('./product/product.module').then(m => m.ProductModule) }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

In this example, ProductModule loads only when the user navigates to /products.

Conclusion

Thoughtful code reuse and modularization are foundational to building efficient, maintainable Angular applications. Leveraging modules, shared modules, and lazy loading allows us to manage and scale code effectively. While every application’s structure may vary, prioritizing modularity and reuse during design consistently elevates code quality and development velocity.

In the next chapter, we’ll cover how to publish and deploy Angular applications—including best practices for building and packaging—so stay tuned for a streamlined, production-ready release workflow!