Angular Folder Structure Standards · NG-01
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 · IMPORTANT
components folder · NG-01.2 · IMPORTANTproject
│ 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
| | └─── ....