Angular Folder Structure Standards
Standard Metadata
- Area: Angular
- Owner: Frontend Steering Group
- Last reviewed: 2026-09-09
- Next review due from: 2026-12-01
- Enforcement: Code review
- Status: Active
Define separate files for component HTML and styles · NG-01.1 · MUST
There must be separate files for the component html and styles, to ensure the component typescript files only deal with the logic defined within them.
This has the added benefit of providing better intellisense and syntax highlighting in your IDE.
Define functionality under the components folder · NG-01.2 · SHOULD
project
│ angular.json
│ package.json
│ ...
│
└─── src
│ │ main.ts
│ │ index.html
│ │ ...
│ │
│ └─── app
│ | │
│ | │
| │ └─── components
| │ | │
| │ | │
| │ | └─── users
| | | | users.module.ts
| | | | users-routing.module.ts
| | | | ...
| | | |
| | | └─── components
| | | | | users-add-dialog.component.ts
| | | | | users-add-dialog.component.html
| | | | | ...
| | | |
| | | └─── pages
| | | | | users.component.ts
| | | | | users.component.html
| | | | | ...
| | |
| | |
| | └─── pipes
| | └─── guards
| | └─── interceptors
| | └─── directives
| | └─── services
| | └─── models
| | └─── ....Larger projects should define sub-folders by functionality or CRUD action · NG-01.3 · SHOULD
project
│ angular.json
│ package.json
│ ...
│
└─── src
│ │ main.ts
│ │ index.html
│ │ ...
│ │
│ └─── app
│ | │
│ | │
| │ └─── components
| │ | │
| │ | │
| │ | └─── users
| | | | users.module.ts
| | | | users-routing.module.ts
| | | | ...
| | | |
| | | └─── components
| | | | | add
| | | | | | users-add-dialog.component.ts
| | | | | | users-add-dialog.component.html
| | | | | ...
| | | |
| | | └─── pages
| | | | | search
| | | | | | users.component.ts
| | | | | | users.component.html
| | | | | ...
| | |
| | |
| | └─── pipes
| | └─── guards
| | └─── interceptors
| | └─── directives
| | └─── services
| | └─── models
| | └─── ....