Skip to main content

​
Prerequisites

Before you begin, ensure you have the following installed:
  • Node.js (v20 or higher recommended)
  • npm 11.6.4 or higher
  • Angular CLI 21.2.0 or higher
This project uses [email protected] as specified in the packageManager field. The package manager will be automatically used when running npm commands.

​
Clone and Install

1

Clone the repository

Clone the Count App repository to your local machine:
git clone https://github.com/GIODIROSA/count-app-angular.git
cd count-app-angular
2

Install dependencies

Install all required dependencies using npm:
npm install
This will install:
  • Angular 21.2.0 framework and dependencies
  • Tailwind CSS 4.1.12 for styling
  • Vitest 4.0.8 for testing
  • Express 5.1.0 for SSR server
  • All other required packages from package.json
3

Start the development server

Run the development server:
npm start
Or using the Angular CLI directly:
ng serve
The application will be available at http://localhost:4200/

​
Project Structure

The Count App follows the standard Angular project structure: 
count-app-angular/
├── src/
│   ├── app/              # Application components and logic
│   ├── index.html        # Main HTML template
│   ├── main.ts           # Browser entry point
│   ├── main.server.ts    # Server entry point for SSR
│   ├── server.ts         # Express server configuration
│   └── styles.css        # Global styles (Tailwind CSS)
├── public/               # Static assets
├── .vscode/              # VSCode configuration
├── angular.json          # Angular CLI configuration
├── package.json          # Project dependencies and scripts
├── tsconfig.json         # TypeScript configuration
└── .postcssrc.json       # PostCSS configuration for Tailwind

​
Key Directories

  • src/app/: Contains your Angular components, services, and application logic
  • public/: Static assets that are copied directly to the output directory
  • dist/: Build output directory (generated after running ng build)

​
VSCode Configuration

The project includes VSCode configuration files in the .vscode/ directory: Install the Angular Language Service extension for the best development experience:
.vscode/extensions.json
{
  "recommendations": ["angular.ng-template"]
}

​
Debug Configuration

The project includes pre-configured launch configurations: Launch Development Server
  • Name: ng serve
  • Opens Chrome and automatically starts the dev server
  • URL: http://localhost:4200/
Launch Tests
  • Name: ng test
  • Opens Chrome and runs tests
  • URL: http://localhost:9876/debug.html
To use these, open the Run and Debug panel in VSCode (Ctrl+Shift+D) and select the configuration.

​
Available Scripts

The following npm scripts are available in package.json: 
npm start
# Starts the Angular dev server at localhost:4200

​
TypeScript Configuration

The project uses strict TypeScript settings for better type safety:
  • Strict mode enabled
  • No implicit returns
  • Isolated modules
  • ES2022 target
These strict settings help catch errors early and improve code quality.

​
Next Steps

Testing

Learn how to write and run tests with Vitest

Building

Build your app for production deployment

Build docs developers (and LLMs) love

Get started for freeTalk to us