103 lines
3.3 KiB
Markdown
103 lines
3.3 KiB
Markdown
# AngularFolderStructure
|
|
|
|
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.0.1.
|
|
|
|
The purpose of this project is to showcase a recommended folder structure for a small to medium project. (1 developer, 6m - 2y)
|
|
|
|
## Setup steps
|
|
|
|
Generate a new angular project by using the command `ng new my-project`
|
|
|
|
Add support for eslint with the command `ng add @angular-eslint/schematics`
|
|
|
|
Install the `Sheriff` eslint plugin. `Sheriff` is used to enforce module boundries in a folder structure via eslint rules. `npm i @softarc/eslint-plugin-sheriff --save-dev`.
|
|
|
|
Add the `sheriff.config.ts` file in the root and update the `.eslint.config.js` file configuration
|
|
|
|
## Folder structure
|
|
|
|
Under `src/app/` the following folder structure will be created.
|
|
|
|
```
|
|
src
|
|
└── app
|
|
├── [domain1]
|
|
│ ├── data
|
|
│ ├── feature-[fname1]
|
|
│ ├── feature-[fname2]
|
|
│ └── ui-[lib-name1]
|
|
└── shared
|
|
├── ui-[lib-name2]
|
|
├── util-[lib-name3]
|
|
└── util-[lib-name4]
|
|
```
|
|
|
|
There are 4 library types that can be created:
|
|
|
|
- `util`- contains only helper functions. Cannot import `ui`, `data` or `feature` type libraries.
|
|
- `ui` - contains reusable `dumb` components. Cannot import `data` or `feature` type libraries.
|
|
- `feature` - implements a use case using `smart` components. Can import `ui`, `data` and `util` library types from its own domain and from `shared` domain.
|
|
- `data` - data accesses, e.g. via HTTP or WebSockets, Stores/State management. Can only import `util` type libraries.
|
|
|
|
<!-- I need to look into this ....
|
|
- optional `shell` - provides the entry point for a domain. Routes, modules and providers.
|
|
- optional `api`- functionalities exposed for other domains.
|
|
-->
|
|
|
|
> Imports between domains (`shared` domain excluded) is explicitly forbidden. `shared` domain is special. All other domains may import from this domain if the library type permits it.
|
|
|
|
## Development server
|
|
|
|
To start a local development server, run:
|
|
|
|
```bash
|
|
ng serve
|
|
```
|
|
|
|
Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
|
|
|
|
## Code scaffolding
|
|
|
|
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
|
|
|
```bash
|
|
ng generate component component-name
|
|
```
|
|
|
|
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
|
|
|
```bash
|
|
ng generate --help
|
|
```
|
|
|
|
## Building
|
|
|
|
To build the project run:
|
|
|
|
```bash
|
|
ng build
|
|
```
|
|
|
|
This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
|
|
|
|
## Running unit tests
|
|
|
|
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
|
|
|
```bash
|
|
ng test
|
|
```
|
|
|
|
## Running end-to-end tests
|
|
|
|
For end-to-end (e2e) testing, run:
|
|
|
|
```bash
|
|
ng e2e
|
|
```
|
|
|
|
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
|
|
|
## Additional Resources
|
|
|
|
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|