Skip to main content

​
Starting the Development Server

The easiest way to start the application is using the Angular CLI: 
npm start
All of these commands execute ng serve which starts the Angular development server.
The development server uses the development configuration by default, which includes source maps and disables optimization for faster builds.

​
Accessing the Application

Once the server is running, you can access the application at: 
http://localhost:4200
The Angular CLI will automatically open your default browser. You should see the Karma Ecommerce application with authentication features (login/register pages).
Remember that the backend API must be running on http://localhost:8080 for the application to function properly. Authentication and data fetching will fail without the backend.

​
Available Scripts

The following npm scripts are available in package.json:

​
Development Scripts

start

Starts the development server on port 4200
npm start

build

Builds the application for production
npm run build

watch

Builds and watches for changes in development mode
npm run watch

test

Runs unit tests with Karma and Jasmine
npm test

​
Script Details

npm start or ng serve
  • Starts the development server
  • Enables hot module replacement (HMR)
  • Runs on http://localhost:4200
  • Uses development configuration (unoptimized, with source maps)
npm run build
  • Creates a production build
  • Optimizes and minifies code
  • Outputs to dist/ directory
  • Enables output hashing for cache busting
  • Enforces bundle size budgets (500kB warning, 1MB error for initial bundle)
npm run watch
  • Continuously builds the application
  • Watches for file changes
  • Uses development configuration
  • Useful for testing build output without running the dev server
npm test
  • Launches Karma test runner
  • Runs all *.spec.ts files
  • See Testing for more details

​
Hot Reload

The development server includes hot module replacement (HMR) functionality:
  • Automatic Reload: When you save changes to any source file, the application automatically reloads
  • Fast Refresh: Most changes are reflected within 1-2 seconds
  • Preserved State: In many cases, application state is preserved during reload
Keep the browser console open during development to catch any errors or warnings that might appear during hot reload.

​
Port Configuration

By default, the application runs on port 4200. To use a different port: 
ng serve --port 4300
Common options:
  • --port <number> - Specify a different port
  • --open or -o - Automatically open the browser
  • --host <hostname> - Specify the host (default: localhost)
  • --ssl - Serve using HTTPS

​
Common Issues and Troubleshooting

If you see an error that port 4200 is already in use:Option 1: Kill the existing process
# On macOS/Linux
lsof -ti:4200 | xargs kill -9

# On Windows (PowerShell)
Get-Process -Id (Get-NetTCPConnection -LocalPort 4200).OwningProcess | Stop-Process
Option 2: Use a different port
ng serve --port 4300
If you see errors related to HTTP requests or authentication:
  1. Verify the backend is running: 
    curl http://localhost:8080/health
# or check in browser
  2. Check CORS configuration on the backend
  3. Verify the API endpoints match what the frontend expects
  4. Check the browser console for specific error messages
If you encounter compilation errors after pulling new changes:
  1. Clear the Angular cache: 
    rm -rf .angular/cache
  2. Reinstall dependencies: 
    rm -rf node_modules package-lock.json
npm install
  3. Restart the development server
If you experience slow build times:
  • Close unnecessary applications to free up system resources
  • Increase Node.js memory limit: 
    NODE_OPTIONS=--max_old_space_size=8192 ng serve
  • Consider using --poll if file watching isn’t working: 
    ng serve --poll=2000

​
Development Workflow

A typical development workflow:
1

Start the backend

Ensure your backend API is running on port 8080
2

Start the frontend

Run npm start in the project directory
3

Make changes

Edit your code - changes will be reflected automatically
4

Test your changes

Use the browser to test functionality and check the console for errors
5

Run tests

Before committing, run npm test to ensure all tests pass

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us