# packtpublishing/angular-projects-4e architecture

> Architecture diagram of the GitHub repository packtpublishing/angular-projects-4e, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-17). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/packtpublishing/angular-projects-4e
- Repository: https://github.com/packtpublishing/angular-projects-4e

## Overview

1. **Overall shape**
   - This repository is a collection of **chapter-sized Angular projects**, not one single app.
   - Each chapter folder (`ch01` … `ch10`) is its own self-contained example with its own `package.json`, `angular.json`, TypeScript config, source tree, and tests.
   - The top-level repo is therefore a **teaching/workbook container**; the real architecture lives inside each chapter.

2. **Common Angular app structure**
   - Most chapters use the same Angular runtime pattern: `src/main.ts` boots the app, `src/app/app.config.ts` wires providers, and `src/app/app.routes.ts` defines route entry points.
   - `src/app/app.ts`, `app.html`, and `app.scss` form the shell/layout layer around the feature modules/components.
   - The apps are organized around **standalone components and route-driven features**, rather than large NgModule-based application layers.

3. **Shared UI concern across chapters**
   - Many chapters include `chapter-title.component.ts` and `chapter-title.service.ts`.
   - This is a small shared presentation/service boundary used to keep chapter pages visually consistent and to centralize page-title behavior.
   - In architecture terms, it sits at the “app shell / shared UI” layer, above individual feature domains.

4. **Feature-by-feature organization**
   - Each chapter introduces one or more **feature folders** under `src/app/` that model the book’s domain example.
   - Examples include `issue-list`, `issue-reporter`, `order`, `product-list`, `product-detail`, `cart`, `booking`, `employee-builder`, `shifts`, and `pages/*`.
   - These feature folders typically contain a component class, template, stylesheet, and spec, making each feature a clean UI boundary for its domain.

5. **Data and domain models**
   - The apps use small TypeScript model files such as `issue.ts`, `product.ts`, `item.ts`, `ticket.ts`, `employee.ts`, and `reservation.entity.ts` to define the shape of domain data.
   - Several chapters also include service/data helper files like `issues.ts`, `products.ts`, `data.ts`, `parking.ts`, and `menu.ts`.
   - This indicates a layered flow of **model → service/data source → feature component → template**.

6. **Mock and local data sources**
   - Some chapters use local mock data in `public/` or repo-local JSON files such as `ch07/db.json`.
   - `ch02/public/mock-issues.ts`, for example, provides a fixture-like data source for the issue workflow.
   - These local data artifacts act as the boundary between UI logic and backend-like input without requiring a real remote service.

7. **Route-centric chapter examples**
   - Later chapters emphasize routing more explicitly, including nested routes under `src/app/pages/*` in `ch05`.
   - This suggests a UI architecture where the route tree is the primary composition mechanism, and each route maps to a feature page.
   - The chapter apps are structured to demonstrate navigation boundaries, lazy-ish page grouping, and page-level composition.

8. **Chapter 6: split client/server architecture**
   - `ch06` is the clearest full-stack split: it contains a **client Angular app** and a **server NestJS app**.
   - The client lives under `ch06/client`, while the server lives under `ch06/server`.
   - The server includes `reservations` with controller/service/module/dto/entity layers, plus an `ai` subservice, so it acts as the backend domain and API boundary for the client.

9. **Chapter 6 backend boundary**
   - The NestJS server is organized in a classic service-controller-module layout:
     - `reservations.controller.ts` handles HTTP/API entry points,
     - `reservations.service.ts` contains business logic,
     - DTO and entity files define transport and persistence shapes,
     - `ai.service.ts` is a specialized backend dependency.
   - This is the main non-UI subsystem in the repo and the only explicit API server with clear internal layering.

10. **Chapter 7: server-side rendering variant**
   - `ch07` introduces Angular SSR-style entry points such as `main.server.ts`, `server.ts`, `app.config.server.ts`, and `app.routes.server.ts`.
   - This means the app has both client and server execution paths, with the server rendering layer wrapping the same app features.
   - From an architecture standpoint, it is still one Angular app, but with an extra **server rendering/runtime boundary**.

11. **Deployment/infrastructure hints**
   - `ch03/firebase.json` suggests Firebase deployment or hosting is part of that chapter’s example.
   - `ch07/db.json` suggests local JSON-backed data serving or mock API usage in the SSR chapter.
   - These files are not core to every chapter, but they matter when diagramming runtime/environment boundaries.

12. **Testing and quality gates**
   - Each project includes co-located spec files next to components/services and root-level `app.spec.ts` or feature specs.
   - The server side in `ch06/server` also has `test/` and e2e Jest configuration, indicating separate unit and integration test layers.
   - This repo is strongly test-oriented at the feature boundary level rather than via one centralized test harness.

13. **What to draw as the main architecture**
   - For most chapters: draw a **single Angular frontend** with an app shell feeding route-based feature components, backed by local data/services.
   - For `ch06`: draw a **client–server split**, where the Angular client talks to a NestJS reservation API, which internally uses a service/module/DTO structure and an AI helper.
   - For `ch07`: draw an Angular app with both **browser and server rendering entry points**.

14. **Repository-level takeaway**
   - This repo is best understood as a **progressive set of reference architectures** rather than one evolving product.
   - The core recurring pattern is: Angular shell + routed feature pages + small domain models/services, with later chapters adding backend, SSR, and deployment variations.

Main entry points: [`ch06/server/src/reservations/reservations.module.ts`](https://github.com/packtpublishing/angular-projects-4e/blob/main/ch06/server/src/reservations/reservations.module.ts) (Reservations API), [`ch04/src/main.ts`](https://github.com/packtpublishing/angular-projects-4e/blob/main/ch04/src/main.ts) (Ch 04), [`ch06/client/src/main.ts`](https://github.com/packtpublishing/angular-projects-4e/blob/main/ch06/client/src/main.ts) (Ch 06 client), [`ch02/src/main.ts`](https://github.com/packtpublishing/angular-projects-4e/blob/main/ch02/src/main.ts) (Ch 02)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_workbook["Angular chapters"]
  node_shared_shell["Chapter shell<br/>shared-ui"]
  node_local_data[("Local data<br/>mock-data")]
  node_route_features["Routed pages<br/>route-driven-ui"]
  node_ch01["Ch 01<br/>angular app<br/>[main.ts]"]
  node_ch02["Ch 02<br/>angular app<br/>[main.ts]"]
  node_ch03["Ch 03<br/>angular app<br/>[main.ts]"]
  node_ch04["Ch 04<br/>angular app<br/>[main.ts]"]
  node_ch05["Ch 05<br/>angular app<br/>[main.ts]"]
  node_ch08["Ch 08<br/>angular app<br/>[main.ts]"]
  node_ch09["Ch 09<br/>angular app<br/>[main.ts]"]
  node_ch10["Ch 10<br/>angular app<br/>[main.ts]"]
end

subgraph group_fullstack["Chapter 6 backend"]
  node_ch06_client["Ch 06 client<br/>angular client<br/>[main.ts]"]
  node_reservations_api["Reservations API<br/>nest module"]
  node_reservations_controller["Controller<br/>http entry"]
  node_reservations_service["Service<br/>domain logic"]
  node_ai_service["AI helper<br/>backend helper<br/>[ai.service.ts]"]
end

subgraph group_ssr["Chapter 7 SSR"]
  node_ch07["Ch 07<br/>angular ssr app<br/>[main.ts]"]
  node_ssr_server["SSR runtime<br/>server render<br/>[main.server.ts]"]
end

node_repo["Workbook<br/>container"]

node_repo -->|"repeats"| node_shared_shell
node_repo -->|"uses"| node_local_data
node_repo -->|"organizes around"| node_route_features
node_repo -->|"contains"| node_ch01
node_repo -->|"contains"| node_ch02
node_repo -->|"contains"| node_ch03
node_repo -->|"contains"| node_ch04
node_repo -->|"contains"| node_ch05
node_repo -->|"contains"| node_ch06_client
node_repo -->|"contains"| node_reservations_api
node_repo -->|"contains"| node_ch07
node_repo -->|"contains"| node_ssr_server
node_repo -->|"contains"| node_ch08
node_repo -->|"contains"| node_ch09
node_repo -->|"contains"| node_ch10
node_ch02 -->|"uses"| node_shared_shell
node_ch02 -->|"feeds"| node_local_data
node_ch03 -->|"uses"| node_shared_shell
node_ch03 -->|"feeds"| node_local_data
node_ch04 -->|"uses"| node_shared_shell
node_ch04 -->|"splits into"| node_route_features
node_ch04 -->|"feeds"| node_local_data
node_ch05 -->|"splits into"| node_route_features
node_ch06_client -->|"uses"| node_shared_shell
node_ch06_client -->|"feeds"| node_local_data
node_ch06_client -->|"calls"| node_reservations_api
node_reservations_api -->|"exposes"| node_reservations_controller
node_reservations_api -->|"contains"| node_reservations_service
node_reservations_service -->|"depends on"| node_ai_service
node_reservations_api -.->|"parallel runtime"| node_ssr_server
node_ch07 -->|"uses"| node_shared_shell
node_ch07 -->|"paired with"| node_ssr_server

click node_ch01 "https://github.com/packtpublishing/angular-projects-4e/blob/main/ch01/src/main.ts"
click node_ch02 "https://github.com/packtpublishing/angular-projects-4e/blob/main/ch02/src/main.ts"
click node_ch03 "https://github.com/packtpublishing/angular-projects-4e/blob/main/ch03/src/main.ts"
click node_ch04 "https://github.com/packtpublishing/angular-projects-4e/blob/main/ch04/src/main.ts"
click node_ch05 "https://github.com/packtpublishing/angular-projects-4e/blob/main/ch05/src/main.ts"
click node_ch06_client "https://github.com/packtpublishing/angular-projects-4e/blob/main/ch06/client/src/main.ts"
click node_reservations_api "https://github.com/packtpublishing/angular-projects-4e/blob/main/ch06/server/src/reservations/reservations.module.ts"
click node_reservations_controller "https://github.com/packtpublishing/angular-projects-4e/blob/main/ch06/server/src/reservations/reservations.controller.ts"
click node_reservations_service "https://github.com/packtpublishing/angular-projects-4e/blob/main/ch06/server/src/reservations/reservations.service.ts"
click node_ai_service "https://github.com/packtpublishing/angular-projects-4e/blob/main/ch06/server/src/reservations/ai/ai.service.ts"
click node_ch07 "https://github.com/packtpublishing/angular-projects-4e/blob/main/ch07/src/main.ts"
click node_ssr_server "https://github.com/packtpublishing/angular-projects-4e/blob/main/ch07/src/main.server.ts"
click node_ch08 "https://github.com/packtpublishing/angular-projects-4e/blob/main/ch08/src/main.ts"
click node_ch09 "https://github.com/packtpublishing/angular-projects-4e/blob/main/ch09/src/main.ts"
click node_ch10 "https://github.com/packtpublishing/angular-projects-4e/blob/main/ch10/src/main.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_shared_shell,node_local_data,node_route_features,node_ch01,node_ch02,node_ch03,node_ch04,node_ch05,node_ch08,node_ch09,node_ch10 toneBlue
class node_ch06_client,node_reservations_api,node_reservations_controller,node_reservations_service,node_ai_service toneAmber
class node_ch07,node_ssr_server toneMint
class node_repo toneNeutral
```

## Components

### Angular chapters

Self-contained chapter projects, each with its own Angular app and local feature set.

- **Chapter shell**: shared-ui · Repeated app-shell layer: chapter title plus app config/routes/layout.
- **Local data**: mock-data · Repo-local fixtures, JSON, and in-app data modules used as backend substitutes.
- **Routed pages**: route-driven-ui · Standalone components organized as route entry points and page-level features.
- [Ch 01](https://github.com/packtpublishing/angular-projects-4e/blob/main/ch01/src/main.ts): angular app · Small standalone Angular chapter app. · `ch01/src/main.ts`
- [Ch 02](https://github.com/packtpublishing/angular-projects-4e/blob/main/ch02/src/main.ts): angular app · Issue workflow app with list and reporter features. · `ch02/src/main.ts`
- [Ch 03](https://github.com/packtpublishing/angular-projects-4e/blob/main/ch03/src/main.ts): angular app · Order/table workflow app. · `ch03/src/main.ts`
- [Ch 04](https://github.com/packtpublishing/angular-projects-4e/blob/main/ch04/src/main.ts): angular app · Product browsing and picking chapter app. · `ch04/src/main.ts`
- [Ch 05](https://github.com/packtpublishing/angular-projects-4e/blob/main/ch05/src/main.ts): angular app · Route-centered chapter with nested pages. · `ch05/src/main.ts`
- [Ch 08](https://github.com/packtpublishing/angular-projects-4e/blob/main/ch08/src/main.ts): angular app · Employee builder and shifts chapter app. · `ch08/src/main.ts`
- [Ch 09](https://github.com/packtpublishing/angular-projects-4e/blob/main/ch09/src/main.ts): angular app · Cart and data-driven chapter app. · `ch09/src/main.ts`
- [Ch 10](https://github.com/packtpublishing/angular-projects-4e/blob/main/ch10/src/main.ts): angular app · Small Angular chapter focused on button components. · `ch10/src/main.ts`

### Chapter 6 backend

Client/server split with a NestJS API behind the Angular client.

- [Ch 06 client](https://github.com/packtpublishing/angular-projects-4e/blob/main/ch06/client/src/main.ts): angular client · Booking UI that consumes a backend reservation API. · `ch06/client/src/main.ts`
- [Reservations API](https://github.com/packtpublishing/angular-projects-4e/blob/main/ch06/server/src/reservations/reservations.module.ts): nest module · Backend boundary exposing reservation endpoints. · `ch06/server/src/reservations/reservations.module.ts`
- [Controller](https://github.com/packtpublishing/angular-projects-4e/blob/main/ch06/server/src/reservations/reservations.controller.ts): http entry · HTTP/API entry point for reservation operations. · `ch06/server/src/reservations/reservations.controller.ts`
- [Service](https://github.com/packtpublishing/angular-projects-4e/blob/main/ch06/server/src/reservations/reservations.service.ts): domain logic · Business logic and orchestration for reservations. · `ch06/server/src/reservations/reservations.service.ts`
- [AI helper](https://github.com/packtpublishing/angular-projects-4e/blob/main/ch06/server/src/reservations/ai/ai.service.ts): backend helper · Specialized backend dependency used by the reservation workflow. · `ch06/server/src/reservations/ai/ai.service.ts`

### Chapter 7 SSR

Angular app with browser and server rendering entry points.

- [Ch 07](https://github.com/packtpublishing/angular-projects-4e/blob/main/ch07/src/main.ts): angular ssr app · Angular app with browser and server rendering paths. · `ch07/src/main.ts`
- [SSR runtime](https://github.com/packtpublishing/angular-projects-4e/blob/main/ch07/src/main.server.ts): server render · Server-side rendering entry points wrapping the Angular app. · `ch07/src/main.server.ts`

### Other components

- **Workbook**: container · Repository-level teaching workbook containing chapter-sized projects.

## Connections

- Workbook → Chapter shell: repeats · Common shell pattern reused across chapters.
- Workbook → Local data: uses · Many chapters rely on local fixtures or in-app data modules.
- Workbook → Routed pages: organizes around · Most chapter apps are composed from route-driven feature pages.
- Workbook → Ch 01: contains · Chapter 1 app.
- Workbook → Ch 02: contains · Chapter 2 app.
- Workbook → Ch 03: contains · Chapter 3 app.
- Workbook → Ch 04: contains · Chapter 4 app.
- Workbook → Ch 05: contains · Chapter 5 app.
- Workbook → Ch 06 client: contains · Chapter 6 Angular client.
- Workbook → Reservations API: contains · Chapter 6 NestJS server.
- Workbook → Ch 07: contains · Chapter 7 app.
- Workbook → SSR runtime: contains · Chapter 7 server rendering entry point.
- Workbook → Ch 08: contains · Chapter 8 app.
- Workbook → Ch 09: contains · Chapter 9 app.
- Workbook → Ch 10: contains · Chapter 10 app.
- Ch 02 → Chapter shell: uses · Issue chapters use the chapter-title shell.
- Ch 02 → Local data: feeds · Issue workflow is backed by mock issue data.
- Ch 03 → Chapter shell: uses · Order chapter uses the common shell.
- Ch 03 → Local data: feeds · Order data is modeled locally.
- Ch 04 → Chapter shell: uses · Product chapter uses the common shell.
- Ch 04 → Routed pages: splits into · Product list/detail/picking are routed features.
- Ch 04 → Local data: feeds · Products and resolver data are local to the chapter.
- Ch 05 → Routed pages: splits into · Nested page routes are the primary composition mechanism.
- Ch 06 client → Chapter shell: uses · Client uses the chapter shell pattern.
- Ch 06 client → Local data: feeds · Client data module supplies booking state.
- Ch 06 client → Reservations API: calls · Booking UI depends on the reservation backend.
- Reservations API → Controller: exposes · HTTP controller forms the API boundary.
- Reservations API → Service: contains · Service holds reservation business logic.
- Service → AI helper: depends on · Domain logic uses the AI helper.
- Reservations API → SSR runtime: parallel runtime · Both chapter 6 and 7 introduce non-browser runtime boundaries.
- Ch 07 → Chapter shell: uses · SSR chapter still uses the Angular shell layer.
- Ch 07 → SSR runtime: paired with · Browser app is wrapped by server rendering entry points.