File contents Angular Module Design
Table of Contents
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:
// users.module.ts
import { 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
Feature Module Structure
Lazy Loading Routes
Lazy Loading Routes
Service with RxJS
Service with RxJS
Smart and Presentational Components
Smart and Presentational Components
Dependency Injection and Providers
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
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
1 --- 2 name: aj-geddes-useful-ai-prompts-angular-module-design 3 description: Angular Module Design 4 --- 5 6 # Angular Module Design 7 8 ## Table of Contents 9 10 - [Overview](#overview) 11 - [When to Use](#when-to-use) 12 - [Quick Start](#quick-start) 13 - [Reference Guides](#reference-guides) 14 - [Best Practices](#best-practices) 15 16 ## Overview 17 18 Architect scalable Angular applications using feature modules, lazy loading, services, and RxJS for reactive programming patterns. 19 20 ## When to Use 21 22 - Large Angular applications 23 - Feature-based organization 24 - Lazy loading optimization 25 - Dependency injection patterns 26 - Reactive state management 27 28 ## Quick Start 29 30 Minimal working example: 31 32 ```typescript 33 // users.module.ts 34 import { NgModule } from "@angular/core"; 35 import { CommonModule } from "@angular/common"; 36 import { ReactiveFormsModule } from "@angular/forms"; 37 import { UsersRoutingModule } from "./users-routing.module"; 38 import { UsersListComponent } from "./components/users-list/users-list.component"; 39 import { UserDetailComponent } from "./components/user-detail/user-detail.component"; 40 import { UsersService } from "./services/users.service"; 41 42 @NgModule({ 43 declarations: [UsersListComponent, UserDetailComponent], 44 imports: [CommonModule, ReactiveFormsModule, UsersRoutingModule], 45 providers: [UsersService], 46 }) 47 export class UsersModule {} 48 ``` 49 50 ## Reference Guides 51 52 Detailed implementations in the `references/` directory: 53 54 | Guide | Contents | 55 |---|---| 56 | [Feature Module Structure](references/feature-module-structure.md) | Feature Module Structure | 57 | [Lazy Loading Routes](references/lazy-loading-routes.md) | Lazy Loading Routes | 58 | [Service with RxJS](references/service-with-rxjs.md) | Service with RxJS | 59 | [Smart and Presentational Components](references/smart-and-presentational-components.md) | Smart and Presentational Components | 60 | [Dependency Injection and Providers](references/dependency-injection-and-providers.md) | Dependency Injection and Providers | 61 62 ## Best Practices 63 64 ### ✅ DO 65 66 - Follow established patterns and conventions 67 - Write clean, maintainable code 68 - Add appropriate documentation 69 - Test thoroughly before deploying 70 71 ### ❌ DON'T 72 73 - Skip testing or validation 74 - Ignore error handling 75 - Hard-code configuration values 76 77 --- 78 > Converted and distributed by [TomeVault](https://tomevault.io/claim/aj-geddes) — claim your Tome and manage your conversions. 79 <!-- tomevault:4.0:skill_md:2026-04-11 -->
tomevault-io/skills-registry/tree/main/aj-geddes--useful-ai-prompts--angular-module-design commit b23570a443
Frequently asked questions How do I install the Aj Geddes Useful AI Prompts Angular Module Design skill? Run npx skillmds@latest add tomevault-io/aj-geddes-useful-ai-prompts-angular-module-design in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
What does the Aj Geddes Useful AI Prompts Angular Module Design skill do? Angular Module Design It is listed under Coding & Dev Tools on SkillMD.
Is Aj Geddes Useful AI Prompts Angular Module Design safe to use? This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
Which AI agents work with Aj Geddes Useful AI Prompts Angular Module Design? This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Is Aj Geddes Useful AI Prompts Angular Module Design free to use? Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
Who published Aj Geddes Useful AI Prompts Angular Module Design? tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.