Skip to main content
This guide covers how to run, build, and develop the Air Tracker application locally.

​
Available npm Scripts

Air Tracker includes several npm scripts for common development tasks. These are defined in package.json: 
"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "ng test",
  "lint": "ng lint",
  "lint:fix": "ng lint --fix",
  "generate-logos": "node scripts/generate-logos.js"
}

​
Development Server

​
Starting the Server

To start the development server: 
npm start
The application will be available at http://localhost:4200/.

​
Development Features

When running in development mode, you get:
  • Hot Module Replacement (HMR) - Automatically reloads when you save changes
  • Source Maps - Debug TypeScript code directly in the browser
  • Detailed Error Messages - Comprehensive error information
  • No Optimization - Faster builds for quicker feedback
The development configuration is defined in angular.json: 
"development": {
  "optimization": false,
  "extractLicenses": false,
  "sourceMap": true
}

​
Custom Port

Run on a different port: 
ng serve --port 4201

​
Open Browser Automatically

ng serve --open

​
Building the Application

​
Production Build

Create an optimized production build: 
npm run build
The build artifacts will be stored in the dist/ directory.

​
Production Build Features

  • Optimization - Minified and tree-shaken code
  • AOT Compilation - Ahead-of-time compilation for better performance
  • Output Hashing - Cache-busting filenames
  • Bundle Budgets - Enforced size limits
Bundle budgets from angular.json: 
"budgets": [
  {
    "type": "initial",
    "maximumWarning": "1MB",
    "maximumError": "2MB"
  },
  {
    "type": "anyComponentStyle",
    "maximumWarning": "4kB",
    "maximumError": "8kB"
  }
]

​
Development Build

Create a development build without optimization: 
ng build --configuration development

​
Watch Mode

Watch mode rebuilds your application whenever files change: 
npm run watch
This is useful when:
  • Testing builds without running a server
  • Integrating with external tools
  • Debugging build issues

​
Debugging

​
Browser DevTools

  1. Open Chrome/Firefox DevTools (F12)
  2. Navigate to the Sources tab
  3. Find your TypeScript files under webpack:// → . → src
  4. Set breakpoints directly in TypeScript code

​
VS Code Debugging

Create .vscode/launch.json: 
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///./*": "${webRoot}/*"
      }
    }
  ]
}
Then:
  1. Start the dev server: npm start
  2. Press F5 in VS Code to launch Chrome with debugging
  3. Set breakpoints in your TypeScript files

​
Console Logging

The application uses structured logging. Example from the codebase: 
// flights-store.service.ts:184
catchError((err: unknown) => {
  console.error('❌ Polling failed:', err);
  this._error.set('Error fetching flights');
  // ...
})

​
Running Tests

Run unit tests while developing: 
npm test
See the Testing Guide for more details.

​
Linting

Lint your code to catch errors and maintain consistency: 
npm run lint
See the Code Style Guide for more details.

​
Environment Configuration

Air Tracker uses environment files for configuration:
  • src/environments/environment.ts - Development environment
  • src/environments/environment.production.ts - Production environment
During production builds, environment.ts is replaced with environment.production.ts: 
// angular.json production configuration
"fileReplacements": [
  {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.production.ts"
  }
]

​
Common Development Tasks

​
Generate New Components

ng generate component features/my-feature/my-component

​
Clear Build Cache

If you encounter build issues: 
rm -rf .angular/cache
npm run build

​
Update Dependencies

Check for outdated packages: 
npm outdated

​
Performance Tips

​
Faster Rebuilds

  • Close unnecessary applications to free up system resources
  • Use watch mode instead of restarting the server
  • Increase Node.js memory: NODE_OPTIONS=--max-old-space-size=4096 npm start

​
Faster Tests

Run tests for specific files: 
ng test --include='**/my-component.spec.ts'

​
Troubleshooting

​
Build Errors

If you see TypeScript errors:
  1. Ensure your IDE is using the workspace TypeScript version
  2. Check tsconfig.json for strict mode settings
  3. Clear the Angular cache: rm -rf .angular/cache

​
Module Not Found

If imports fail:
  1. Verify the file path is correct
  2. Check that the module is properly exported
  3. Restart the TypeScript language server

​
Hot Reload Not Working

If changes don’t auto-reload:
  1. Check that you’re saving files properly
  2. Restart the dev server
  3. Clear browser cache (Ctrl+Shift+R)

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us