🚀 Angular 20 Naming & Structure Guide: Clean, Scalable, and Ready for the Future

With Angular 20 now officially out, the updated style guide brings some much-needed clarity and modernization to how we name files and structure projects. If you’re spinning up a new app or considering refactoring a legacy codebase, this breakdown will help you adopt the new conventions confidently.

---

✅ File Naming in Angular 20: Simpler, Smarter, Sharper

Angular is finally ditching verbose, redundant file names in favor of cleaner, role-focused naming — and I’m all for it.

🎯 Updated Naming Rules:

❌ No More Suffix Overload

Instead of long, repetitive filenames like user-profile.component.ts, we now go with:

• user-profile.ts ✅
• highlight.ts ✅
• auth-store.ts ✅ (replaces auth.service.ts)

💡 Note: The word “service” is out — the recommendation is to use domain-oriented or role-based names like *-store.ts, *-api.ts, or *-client.ts.

✅ Hyphenated Suffixes for Specific Types

For other Angular constructs, suffixes are still useful — but cleaner.

Examples:

• auth-guard.ts (was auth.guard.ts)
• currency-pipe.ts (was currency.pipe.ts)
• shared-module.ts (was shared.module.ts)

---

🧱 Project Structure: Domain-Driven & Maintainable

Angular 20 pushes a more scalable, modular approach — goodbye massive features/ folder, hello structure that mirrors how your product works.

📁 Top-Level Layout

src/
└── app/
    ├── core/       → global, non-business features
    ├── domains/    → business-specific features
    └── shared/     → dumb, reusable logic and UI

---

🔐 core/ — Global Features, Auth, Layout, etc.

This is where you’ll keep things like authentication logic, layout, guards, and global stores.

src/
└── app/
    └── core/
        ├── auth/
        │   ├── guards/
        │   │   └── auth-guard.ts
        │   ├── models/
        │   │   └── user.model.ts
        │   ├── stores/
        │   │   └── auth-store.ts
        │   ├── auth.routes.ts
        │   └── pages/
        │       └── login/
        │           ├── login.ts
        │           ├── login.html
        │           └── login.css
        └── layout/

💡 Keep pages/ only for routed components. Use models/, stores/, and guards/ to stay organized.

---

💼 domains/ — Business Logic, Organized by Feature

No more dumping all features into one bucket. Angular 20 encourages organizing around real product domains.

Example for a job board:

src/
└── app/
    └── domains/
        ├── jobs/
        │   ├── pages/
        │   │   ├── job-list/
        │   │   └── job-detail/
        │   ├── models/
        │   ├── stores/
        │   ├── services/
        │   └── jobs.routes.ts
        ├── events/
        └── groups/

✅ Benefits:

• Keeps concerns separated
• Easier for teams to work independently
• Code is easier to test, scale, and refactor

---

♻️ shared/ — Dumb UI + Reusable Utilities

If a component doesn’t need to know where data comes from, it belongs here.

src/
└── app/
    └── shared/
        ├── components/
        │   └── notification/
        │       ├── notification.ts
        │       ├── notification.html
        │       └── notification.css
        ├── pipes/
        │   └── format-date-p.ts
        └── utils/
            └── string-utils.ts

📌 Rule of Thumb: Shared logic is stateless, presentation-focused, and reused across domains.

---

🆕 Reminder: Angular Is Standalone by Default Now

Since Angular 17, the CLI defaults to Standalone Components — no NgModules needed.

src/
└── app/
    ├── app.ts           # Standalone root component
    ├── app.routes.ts    # Route config
    └── app.config.ts    # App-wide setup

This shift reduces boilerplate and makes it easier to adopt a component-first, modular mindset.

---

🧠 Final Thoughts

Angular 20 doesn’t just introduce new features — it encourages you to write cleaner, more intentional code. With simplified naming and a domain-driven project structure, your app becomes:

✅ Easier to scale
✅ Easier to test
✅ Easier to onboard new devs

Whether you’re starting fresh or modernizing an existing codebase, this is the perfect opportunity to align with the latest best practices.

---

✍️ Coming Soon:

Follow along for more Angular 20 content, including:

• Advanced usage of Angular Signals
• Migrating legacy projects to standalone components
• Clean state management without NgRx