Frontend technology overview
Frontend technology overview
Avaplace applications and libraries developed by AvaSpace core team are built on Angular 19 and TypeScript 5.8.
Requirements
Minimal System Requirements
| Tool | Minimum Version | Recommended Version |
|---|---|---|
| Node.js | 18.19.1 | 20.x LTS |
| npm | 10.2.4 | 10.x |
Note: These versions are required for Angular 19 compatibility. Using older versions may result in build errors or compatibility issues.
Platform Libraries
Avaplace applications are built on Avaplace core libraries providing common functionality to developed apps. They contain common components, services, models, pipes, functions, etc.
Avaspace core libraries:
| Name | Description | Package name |
|---|---|---|
| Authentication | Captcha support, authentication-specific pages (register, password reset, etc.) | @asol-platform/authentication |
| Core | Core models, pipes, functions, translations | @asol-platform/core |
| Controls | All UI kit 2.0 components | @asol-platform/controls |
| Common | Complete application layout, menus, app-wrapper, and base platform routing solutions | @asol-platform/common |
| Guidance | Guidance library for better onboarding and user navigation | @asol-platform/guidance |
| Services | HTTP client wrapper, image service, file service, services for token handling and authentication | @asol-platform/services |
AVASpace also uses third-party libraries to support development:
Runtime Libraries
| Name | Description | Link |
|---|---|---|
| Angular Material | UI components library | material.angular.io |
| Bootstrap v5 | CSS utilities (may be removed) | getbootstrap.com |
| Module Federation | Micro-frontend architecture | @angular-architects/module-federation |
| Day.js | Date manipulation | day.js.org |
| RxJS | Reactive programming | rxjs.dev |
Development Tools
| Name | Description | Link |
|---|---|---|
| TypeScript | Type-safe JavaScript | typescriptlang.org |
| SCSS | CSS preprocessor | sass-lang.com |
| ESLint | Code linting | eslint.org |
| Prettier | Code formatting | prettier.io |
| ngx-build-plus | Angular build extensions | ngx-build-plus |
| Jasmine | Testing framework | jasmine.github.io |
| Karma | Test runner | karma-runner.github.io |
| webpack-bundle-analyzer | Bundle analysis tool | github.com/webpack-contrib/webpack-bundle-analyzer |
Platform Library Dependencies
Some libraries are included as peer dependencies of platform libraries and may not be directly used in your application:
| Name | Description | Used by Library |
|---|---|---|
| angular-oauth2-oidc | OAuth2/OIDC authentication | Services |
| ng-recaptcha-2 | reCAPTCHA integration | Authentication |
| ngx-image-cropper | Image cropping functionality | Controls |
| google-libphonenumber | Phone number validation | Controls |
| colord | Color manipulation | Controls |
| Application Insights | Telemetry and logging | Services |