# nihira2020/angular17_authapp architecture

> Architecture diagram of the GitHub repository nihira2020/angular17_authapp, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/nihira2020/angular17_authapp
- Repository: https://github.com/nihira2020/angular17_authapp

## Overview

Authapp is an Angular frontend for account authentication, user/role administration, and customer management. Users enter through the routed application: they can register and confirm an OTP, sign in, or use password recovery; authenticated users can then manage customers, users, and role permissions. The services issue HTTP requests to an external API, while a route guard checks local login state and requests menu permission. Major screen capabilities are represented from the route table and component tree; only the sampled components and services support detailed call edges.

Main entry points: [`src/app/app.routes.ts`](https://github.com/nihira2020/angular17_authapp/blob/master/src/app/app.routes.ts) (Route table), [`src/app/_service/user.service.ts`](https://github.com/nihira2020/angular17_authapp/blob/master/src/app/_service/user.service.ts) (User service), [`src/app/app.component.ts`](https://github.com/nihira2020/angular17_authapp/blob/master/src/app/app.component.ts) (Angular shell), [`src/app/_service/customer.service.ts`](https://github.com/nihira2020/angular17_authapp/blob/master/src/app/_service/customer.service.ts) (Customer service)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Application shell"]
  node_shell["Angular shell<br/>[app.component.ts]"]
  node_routes["Route table<br/>[app.routes.ts]"]
  node_home["Home<br/>[home.component.ts]"]
  node_menu["App menu"]
end

subgraph group_auth["Authentication"]
  node_authscreens["Auth screens"]
  node_register["Register"]
  node_otp["Confirm OTP"]
  node_login["Login<br/>[login.component.ts]"]
  node_forgot["Forgot password"]
  node_reset["Reset password"]
  node_updatepassword["Update password"]
end

subgraph group_admin["User administration"]
  node_users["User list<br/>[user.component.ts]"]
  node_userupdate["User update"]
  node_userrole["Role permissions"]
end

subgraph group_customers["Customer management"]
  node_customers["Customer list"]
  node_customerform["Customer form"]
  node_customer_service["Customer service"]
end

subgraph group_access["Access and API"]
  node_guard["Auth guard<br/>[auth.guard.ts]"]
  node_user_service["User service<br/>[user.service.ts]"]
  node_interceptor["Token interceptor"]
  node_api{{"Backend API"}}
end

node_visitor(("User"))

node_visitor -->|"opens app"| node_shell
node_shell -->|"hosts outlet"| node_routes
node_routes -->|"routes to"| node_home
node_routes -->|"routes to"| node_register
node_routes -->|"routes to"| node_login
node_routes -->|"routes to"| node_otp
node_routes -->|"routes to"| node_forgot
node_routes -->|"routes to"| node_reset
node_routes -->|"routes to"| node_updatepassword
node_routes -->|"routes to"| node_customers
node_routes -->|"routes to"| node_customerform
node_routes -->|"routes to"| node_users
node_routes -->|"routes to"| node_userrole
node_routes -->|"guards routes"| node_guard
node_shell -->|"renders"| node_menu
node_guard -->|"checks permission"| node_user_service
node_register -->|"submits registration"| node_user_service
node_otp -->|"confirms registration"| node_user_service
node_login -->|"requests login"| node_user_service
node_forgot -->|"requests recovery"| node_user_service
node_reset -->|"resets password"| node_user_service
node_updatepassword -->|"updates password"| node_user_service
node_users -->|"manages users"| node_user_service
node_userupdate -->|"updates user"| node_user_service
node_userrole -->|"manages permissions"| node_user_service
node_customerform -->|"creates or edits"| node_customer_service
node_customers -->|"manages customers"| node_customer_service
node_user_service -->|"HTTP requests"| node_api
node_customer_service -->|"HTTP requests"| node_api
node_interceptor -->|"intercepts requests"| node_api

click node_shell "https://github.com/nihira2020/angular17_authapp/blob/master/src/app/app.component.ts"
click node_routes "https://github.com/nihira2020/angular17_authapp/blob/master/src/app/app.routes.ts"
click node_guard "https://github.com/nihira2020/angular17_authapp/blob/master/src/app/_guard/auth.guard.ts"
click node_authscreens "https://github.com/nihira2020/angular17_authapp/tree/master/src/app/component"
click node_register "https://github.com/nihira2020/angular17_authapp/blob/master/src/app/component/register/register.component.ts"
click node_otp "https://github.com/nihira2020/angular17_authapp/blob/master/src/app/component/confirmotp/confirmotp.component.ts"
click node_login "https://github.com/nihira2020/angular17_authapp/blob/master/src/app/component/login/login.component.ts"
click node_forgot "https://github.com/nihira2020/angular17_authapp/blob/master/src/app/component/forgetpassword/forgetpassword.component.ts"
click node_reset "https://github.com/nihira2020/angular17_authapp/blob/master/src/app/component/resetpassword/resetpassword.component.ts"
click node_updatepassword "https://github.com/nihira2020/angular17_authapp/blob/master/src/app/component/updatepassword/updatepassword.component.ts"
click node_home "https://github.com/nihira2020/angular17_authapp/blob/master/src/app/component/home/home.component.ts"
click node_customers "https://github.com/nihira2020/angular17_authapp/blob/master/src/app/component/customer/customer.component.ts"
click node_customerform "https://github.com/nihira2020/angular17_authapp/blob/master/src/app/component/addcustomer/addcustomer.component.ts"
click node_users "https://github.com/nihira2020/angular17_authapp/blob/master/src/app/component/user/user.component.ts"
click node_userupdate "https://github.com/nihira2020/angular17_authapp/blob/master/src/app/component/userupdate/userupdate.component.ts"
click node_userrole "https://github.com/nihira2020/angular17_authapp/blob/master/src/app/component/userrole/userrole.component.ts"
click node_menu "https://github.com/nihira2020/angular17_authapp/blob/master/src/app/component/appmenu/appmenu.component.ts"
click node_user_service "https://github.com/nihira2020/angular17_authapp/blob/master/src/app/_service/user.service.ts"
click node_customer_service "https://github.com/nihira2020/angular17_authapp/blob/master/src/app/_service/customer.service.ts"
click node_interceptor "https://github.com/nihira2020/angular17_authapp/blob/master/src/app/_service/token.interceptor.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_shell,node_routes,node_home,node_menu,node_visitor toneBlue
class node_authscreens,node_register,node_otp,node_login,node_forgot,node_reset,node_updatepassword toneAmber
class node_users,node_userupdate,node_userrole toneMint
class node_customers,node_customerform,node_customer_service toneRose
class node_guard,node_user_service,node_interceptor,node_api toneIndigo
```

## Components

### Application shell

- [Angular shell](https://github.com/nihira2020/angular17_authapp/blob/master/src/app/app.component.ts): `src/app/app.component.ts`
- [Route table](https://github.com/nihira2020/angular17_authapp/blob/master/src/app/app.routes.ts): `src/app/app.routes.ts`
- [Home](https://github.com/nihira2020/angular17_authapp/blob/master/src/app/component/home/home.component.ts): `src/app/component/home/home.component.ts`
- [App menu](https://github.com/nihira2020/angular17_authapp/blob/master/src/app/component/appmenu/appmenu.component.ts): `src/app/component/appmenu/appmenu.component.ts`

### Authentication

- [Auth screens](https://github.com/nihira2020/angular17_authapp/tree/master/src/app/component): `src/app/component`
- [Register](https://github.com/nihira2020/angular17_authapp/blob/master/src/app/component/register/register.component.ts): `src/app/component/register/register.component.ts`
- [Confirm OTP](https://github.com/nihira2020/angular17_authapp/blob/master/src/app/component/confirmotp/confirmotp.component.ts): `src/app/component/confirmotp/confirmotp.component.ts`
- [Login](https://github.com/nihira2020/angular17_authapp/blob/master/src/app/component/login/login.component.ts): `src/app/component/login/login.component.ts`
- [Forgot password](https://github.com/nihira2020/angular17_authapp/blob/master/src/app/component/forgetpassword/forgetpassword.component.ts): `src/app/component/forgetpassword/forgetpassword.component.ts`
- [Reset password](https://github.com/nihira2020/angular17_authapp/blob/master/src/app/component/resetpassword/resetpassword.component.ts): `src/app/component/resetpassword/resetpassword.component.ts`
- [Update password](https://github.com/nihira2020/angular17_authapp/blob/master/src/app/component/updatepassword/updatepassword.component.ts): `src/app/component/updatepassword/updatepassword.component.ts`

### User administration

- [User list](https://github.com/nihira2020/angular17_authapp/blob/master/src/app/component/user/user.component.ts): `src/app/component/user/user.component.ts`
- [User update](https://github.com/nihira2020/angular17_authapp/blob/master/src/app/component/userupdate/userupdate.component.ts): `src/app/component/userupdate/userupdate.component.ts`
- [Role permissions](https://github.com/nihira2020/angular17_authapp/blob/master/src/app/component/userrole/userrole.component.ts): `src/app/component/userrole/userrole.component.ts`

### Customer management

- [Customer list](https://github.com/nihira2020/angular17_authapp/blob/master/src/app/component/customer/customer.component.ts): `src/app/component/customer/customer.component.ts`
- [Customer form](https://github.com/nihira2020/angular17_authapp/blob/master/src/app/component/addcustomer/addcustomer.component.ts): `src/app/component/addcustomer/addcustomer.component.ts`
- [Customer service](https://github.com/nihira2020/angular17_authapp/blob/master/src/app/_service/customer.service.ts): `src/app/_service/customer.service.ts`

### Access and API

- [Auth guard](https://github.com/nihira2020/angular17_authapp/blob/master/src/app/_guard/auth.guard.ts): `src/app/_guard/auth.guard.ts`
- [User service](https://github.com/nihira2020/angular17_authapp/blob/master/src/app/_service/user.service.ts): `src/app/_service/user.service.ts`
- [Token interceptor](https://github.com/nihira2020/angular17_authapp/blob/master/src/app/_service/token.interceptor.ts): `src/app/_service/token.interceptor.ts`
- **Backend API**

### Other components

- **User**

## Connections

- User → Angular shell: opens app
- Angular shell → Route table: hosts outlet
- Route table → Home: routes to
- Route table → Register: routes to
- Route table → Login: routes to
- Route table → Confirm OTP: routes to
- Route table → Forgot password: routes to
- Route table → Reset password: routes to
- Route table → Update password: routes to
- Route table → Customer list: routes to
- Route table → Customer form: routes to
- Route table → User list: routes to
- Route table → Role permissions: routes to
- Route table → Auth guard: guards routes
- Angular shell → App menu: renders
- Auth guard → User service: checks permission
- Register → User service: submits registration
- Confirm OTP → User service: confirms registration
- Login → User service: requests login
- Forgot password → User service: requests recovery
- Reset password → User service: resets password
- Update password → User service: updates password
- User list → User service: manages users
- User update → User service: updates user
- Role permissions → User service: manages permissions
- Customer form → Customer service: creates or edits
- Customer list → Customer service: manages customers
- User service → Backend API: HTTP requests
- Customer service → Backend API: HTTP requests
- Token interceptor → Backend API: intercepts requests