Angular Module Design

by aj-geddes3f5182cfd739No license355 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 7 months ago

Design Angular modules using feature modules, lazy loading, and dependency injection. Use when organizing large Angular applications with proper separation of concerns.

Instructions onlySoftware Development

AI-generated overview

Guides Angular module architecture using feature modules, lazy loading, and dependency injection.

What it does: This skill provides guidance for architecting Angular applications around feature modules, lazy-loaded routes, services with RxJS, and smart/presentational component separation. It includes a quick-start NgModule example plus reference guides covering module structure, routing, services, component patterns, and dependency injection providers. It also ships a component template file and a set of do/don't best practices. It produces design guidance and code patterns rather than running tools.
When to use it: Use it when organizing a large Angular application, splitting it into feature modules, adding lazy loading, or deciding how to structure services, RxJS state, and dependency injection providers.
Requirements: No scripts or runtime tools are required; it is instructions and reference documents only. Working with the examples assumes familiarity with Angular and TypeScript.

Overview

Architect scalable Angular applications using feature modules, lazy loading, services, and RxJS for reactive programming patterns.

When to Use

Large Angular applications
Feature-based organization
Lazy loading optimization
Dependency injection patterns
Reactive state management

Quick Start

Minimal working example:

typescript

// users.module.tsimport { NgModule } from "@angular/core";import { CommonModule } from "@angular/common";import { ReactiveFormsModule } from "@angular/forms";import { UsersRoutingModule } from "./users-routing.module";import { UsersListComponent } from "./components/users-list/users-list.component";import { UserDetailComponent } from "./components/user-detail/user-detail.component";import { UsersService } from "./services/users.service";
@NgModule({  declarations: [UsersListComponent, UserDetailComponent],  imports: [CommonModule, ReactiveFormsModule, UsersRoutingModule],  providers: [UsersService],})export class UsersModule {}

// users.module.tsimport { NgModule } from "@angular/core";import { CommonModule } from "@angular/common";import { ReactiveFormsModule } from "@angular/forms";import { UsersRoutingModule } from "./users-routing.module";import { UsersListComponent } from "./components/users-list/users-list.component";import { UserDetailComponent } from "./components/user-detail/user-detail.component";import { UsersService } from "./services/users.service";
@NgModule({  declarations: [UsersListComponent, UserDetailComponent],  imports: [CommonModule, ReactiveFormsModule, UsersRoutingModule],  providers: [UsersService],})export class UsersModule {}

Reference Guides

Detailed implementations in the references/ directory:

Guide	Contents
Feature Module Structure [blocked]	Feature Module Structure
Lazy Loading Routes [blocked]	Lazy Loading Routes
Service with RxJS [blocked]	Service with RxJS
Smart and Presentational Components [blocked]	Smart and Presentational Components
Dependency Injection and Providers [blocked]	Dependency Injection and Providers

Best Practices

✅ DO

Follow established patterns and conventions
Write clean, maintainable code
Add appropriate documentation
Test thoroughly before deploying

❌ DON'T

Skip testing or validation
Ignore error handling
Hard-code configuration values

Source and attribution

Source:aj-geddes/useful-ai-promptsinskills/angular-module-designat commit3f5182c

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Angular Module Design

Angular Module Design

Table of Contents

Overview

When to Use

Quick Start

Reference Guides

Best Practices

✅ DO

❌ DON'T

Source and attribution

More from aj-geddes/useful-ai-prompts

Xss Prevention

Wireframe Prototyping

Web Performance Optimization

Vue Application Structure

Visual Regression Testing

User Persona Creation

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices