AngularFolderStructure

This project was generated using 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.

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:

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:

ng generate component component-name

For a complete list of available schematics (such as components, directives, or pipes), run:

ng generate --help

Building

To build the project run:

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 test runner, use the following command:

ng test

Running end-to-end tests

For end-to-end (e2e) testing, run:

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

3.3 KiB Raw Permalink Blame History