Skip to content

Architecture

Folder structure

The application is located in the src/app folder and is structured as follows:

app
├── core
│   ├── guards
│   └── services
├── domains
│   ├── home
│   ├── forgot-password
│   ├── login
│   ├── profile
│   ├── register
│   ├── settings
│   ├── tabs
│   └── tasks
├── shared
│   ├── directives
│   └── shared.module.ts
├── store
├── widgets
│   ├── directives
│   ├── pipes
│   └── transloco
├── app.component.html
├── app.component.scss
├── app.component.ts
└── routes.ts

core

The core folder contains services and guards that are used throughout the application.

domains

The domains folder contains the different domain NgModules, which are used to organize the code related to a certain feature of the application.

shared

The shared folder contains the shared NgModules, which is used to share a set of commonly used components, directives, and pipes across the application.

store

The store folder contains the elf store, which is a state management library for Angular applications.

widgets

The widgets folder contains multiple widget NgModules, that are used to share individual components, directives, and pipes across the application.

Runtime optimization

OnPush change detection

Change detection is the process of determining if the application state has changed, and if any DOM needs to be updated.

This starter template uses the OnPush change detection strategy to improve performance.

Angular standalone APIs

This starter template uses the new standalone APIs which are available since Angular 14. They provide a simplified way to build Angular components by reducing the need for NgModules. See Getting started with standalone components for more information.

Ionic components

Please make sure to import Ionic components from @ionic/angular/standalone instead of @ionic/angular.

Example:

import { IonButton } from '@ionic/angular/standalone';