# 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.