Skip to main content

​
Quick Start

The fastest way to run the application is using the start script: 
npm start
This command runs ng serve and starts the Angular development server.

​
Development Server

​
Default Configuration

When you run npm start, the application will:

Local Server

Start at http://localhost:4200

Live Reload

Automatically reload on file changes

Development Build

Use development configuration with source maps

Fast Compilation

Optimized for quick rebuild times

​
Development Build Features

The development configuration (angular.json) includes:
  • Source Maps: Enabled for easier debugging
  • No Optimization: Faster build times
  • Vendor Chunk: Separate vendor bundle for faster rebuilds
  • Named Chunks: Human-readable chunk names
  • No Build Optimizer: Skipped for speed

​
Running on Different Platforms

​
Web Browser (Default)

1

Start the Development Server

npm start
2

Open in Browser

Navigate to http://localhost:4200 in your web browser.The application will automatically reload if you change any source files.

​
iOS Simulator

To run on iOS, you’ll need Xcode installed on macOS.
1

Build the Web Assets

npm run build
2

Add iOS Platform

npx cap add ios
3

Sync and Open

npx cap sync ios
npx cap open ios
This opens Xcode where you can run the app in the iOS Simulator.

​
Android Emulator

To run on Android, you’ll need Android Studio installed.
1

Build the Web Assets

npm run build
2

Add Android Platform

npx cap add android
3

Sync and Open

npx cap sync android
npx cap open android
This opens Android Studio where you can run the app in an emulator or on a physical device.

​
Advanced Running Options

​
Watch Mode

For continuous builds during development: 
npm run watch
This runs ng build --watch --configuration development and rebuilds automatically on file changes.

​
Custom Port

To run on a different port: 
ng serve --port 4300

​
Production Configuration

To test with production configuration locally: 
ng serve --configuration production
Production configuration includes optimizations that make builds slower. Use this only when you need to test production-specific behavior.

​
Host Configuration

To access the dev server from other devices on your network: 
ng serve --host 0.0.0.0
Then access via http://<your-ip>:4200 from other devices.

​
Live Reload with Capacitor

For live reload during native development:
1

Start Dev Server

npm start
2

Update Capacitor Config

Temporarily modify capacitor.config.ts:
capacitor.config.ts
import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'io.ionic.starter',
  appName: 'Restaurant',
  webDir: 'www',
  server: {
    url: 'http://localhost:4200',
    cleartext: true
  }
};

export default config;
3

Sync and Run

npx cap sync
npx cap run ios
# or
npx cap run android
Remember to remove the server configuration before building for production.

​
Troubleshooting

If port 4200 is already in use:
ng serve --port 4300
Or find and kill the process using port 4200:
# macOS/Linux
lsof -ti:4200 | xargs kill -9

# Windows
netstat -ano | findstr :4200
taskkill /PID <PID> /F
Clear the Angular cache and rebuild:
rm -rf .angular
npm start
If native sync fails, try:
npx cap sync --deployment

​
Next Steps

Building

Learn how to create production builds

Testing

Run tests to ensure code quality

Build docs developers (and LLMs) love

Get started for freeTalk to us