Angular 16 Dashboard

User dashboard panel.

Requirements

Make sure you have the following programs installed before running the application:

• Node (v22.2.0)
• Angular CLI (v16.2.10)

Development server

Run the next command for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

ng serve

Code scaffolding

Run the next command for generate a new component with lazy loading.

ng generate module modules/[name-module] --route [name-path] --module [name-module-main]
ng g m modules/mod# --route mod# --module app.module.ts

Build

Run the next command for build the project. The build artifacts will be stored in the dist/ directory.

ng build

Running unit tests

Run the next command for execute the unit tests via Karma.

ng test

Running unit tests with coverage

Run the next command for execute the unit tests via Karma The report is a bunch of HTML files you can open with a browser. Start by opening coverage/index.html in the browser of your choice.

ng test --code-coverage

Running end-to-end tests

Run the next command for execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

ng e2e

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

Architecture

src/
|-- app/
|   |-- core/
|   |-- shared/
|   |   |-- components/
|   |   |-- directives/
|   |   |-- guards/
|   |   |-- interceptors/
|   |   |-- pipes/
|   |   |-- services/
|   |-- modules/
|   |   |-- module1/
|   |   |   |-- components/
|   |   |   |-- models/
|   |   |   |-- services/
|   |   |   |-- module1-routing.module.ts
|   |   |   |-- module1.module.ts
|   |-- app-routing.module.ts
|   |-- app.component.ts
|   |-- app.module.ts
|-- assets/
|-- environments/

Technology Stack and Features

• ⚡ Angular for the frontend version 16.2.10.
  • 🎨 Boostrap 5 for styles.
  • 🔍 Font awesome for icons.
  • 🧰 Google fonts for family font.
  • ✅ Karma for unit test.
• 🐋 Docker Compose for development and production.

Author

• @AndresOrozcoDev