Skip to main content
This guide will help you set up your local development environment for Air Tracker.

​
Prerequisites

Before you begin, ensure you have the following installed:
  • Node.js: Version 18.x or later
  • npm: Version 9.x or later (comes with Node.js)
  • Git: For version control
1
Install Node.js and npm
2
Download and install Node.js from nodejs.org. We recommend using the LTS (Long Term Support) version.
3
Verify your installation:
4
Terminal
node --version
npm --version
5
Install Angular CLI
6
Air Tracker uses Angular 20.2.x. Install the Angular CLI globally:
7
Terminal
npm install -g @angular/[email protected]
8
Verify the installation:
9
Terminal
ng version
10
Clone the Repository
11
Clone the Air Tracker frontend repository:
12
Terminal
git clone <repository-url>
cd air-tracker-frontend
13
Install Project Dependencies
14
Install all required npm packages:
15
Terminal
npm install
16
This will install:
17
  • Angular 20.2.x and Angular Material
  • Leaflet for map functionality
  • RxJS for reactive programming
  • Development tools (ESLint, Jasmine, Karma)

    • ​
    IDE Setup

    We recommend using Visual Studio Code for development.

    ​
    Required Extensions

    Install the following VSCode extension for the best development experience:
    • Angular Language Service (angular.ng-template) - Provides intellisense, code completion, and diagnostics for Angular templates
    You can install it from the VSCode Extensions marketplace or run: 
    code --install-extension angular.ng-template
    These extensions are highly recommended:
    • ESLint (dbaeumer.vscode-eslint) - JavaScript/TypeScript linting
    • Prettier (esbenp.prettier-vscode) - Code formatter
    • Angular Snippets - Code snippets for Angular
    • GitLens - Enhanced Git capabilities

    ​
    Alternative IDEs

    You can also use:
    • WebStorm by JetBrains (has built-in Angular support)
    • Sublime Text with appropriate plugins
    • Atom with Angular packages

    ​
    Project Structure Overview

    After setup, your project structure will look like this: 
    air-tracker-frontend/
├── src/
│   ├── app/
│   │   ├── core/              # Core services (viewport, api-config)
│   │   ├── features/          # Feature modules (flights)
│   │   └── shared/            # Shared components and utilities
│   ├── environments/          # Environment configurations
│   └── styles.scss           # Global styles
├── public/                    # Static assets
├── angular.json              # Angular workspace configuration
├── package.json              # npm dependencies and scripts
├── tsconfig.json             # TypeScript configuration
└── eslint.config.js          # ESLint configuration

    ​
    Key Dependencies

    ​
    Production Dependencies

    • @angular/core (^20.2.0) - Angular framework
    • @angular/material (^20.2.14) - Material Design components
    • @angular/cdk (^20.2.14) - Component Dev Kit
    • leaflet (^1.9.4) - Interactive maps
    • rxjs (~7.8.0) - Reactive extensions

    ​
    Development Dependencies

    • @angular/cli (^20.2.2) - Angular command line tools
    • typescript (~5.9.2) - TypeScript compiler
    • angular-eslint (21.0.1) - ESLint for Angular
    • jasmine-core (~5.9.0) - Testing framework
    • karma (~6.4.0) - Test runner

    ​
    Verify Your Setup

    Run the development server to verify everything is working: 
    npm start
    Open your browser to http://localhost:4200/. You should see the Air Tracker application running.

    ​
    Troubleshooting

    ​
    Port Already in Use

    If port 4200 is already in use, specify a different port: 
    ng serve --port 4201

    ​
    Node Version Issues

    If you encounter Node.js version issues, consider using nvm (Node Version Manager) to manage multiple Node.js versions.

    ​
    Dependency Installation Failures

    If npm install fails:
    1. Clear npm cache: npm cache clean --force
    2. Delete node_modules and package-lock.json
    3. Run npm install again

    ​
    Next Steps

    Now that your environment is set up:

    Build docs developers (and LLMs) love

    Get started for freeTalk to us