Angular CLI Deployment and Usage Guide
Prerequisites
- Node.js - Install Node.js which includes Node Package Manager (npm)
- TypeScript - Required for Angular development (included with Angular CLI)
- Git - For cloning the repository
Installation
Installing Angular CLI Globally
npm install -g @angular/cli
Creating a New Angular Project
ng new [PROJECT_NAME]
cd [PROJECT_NAME]
Cloning and Setting Up the Angular CLI Repository
git clone https://github.com/angular/angular-cli.git
cd angular-cli
npm install
Configuration
Environment Variables
Angular CLI uses environment-specific configurations located in src/environments/. You can configure different settings for development and production environments.
API Keys and External Services
If your Angular application requires external services (e.g., Firebase, Google Maps), configure them in the appropriate environment files:
// src/environments/environment.ts
export const environment = {
production: false,
apiKey: 'YOUR_API_KEY_HERE'
};
TypeScript Configuration
The TypeScript configuration is defined in tsconfig.json. For Angular CLI projects, this is typically managed by the CLI, but you can customize it as needed.
Build & Run
Development Server
ng serve
This starts a development server with hot reload at http://localhost:4200/.
Building for Production
ng build --prod
This creates an optimized production build in the dist/ folder.
Building with Different Configurations
# Build for development
ng build
# Build for production with specific configuration
ng build --configuration=production
# Build with custom configuration
ng build --configuration=staging
Running Tests
# Run unit tests
ng test
# Run end-to-end tests
ng e2e
# Run tests in watch mode
ng test --watch
Deployment
Static Hosting (Recommended for Angular Applications)
Angular CLI builds static files that can be deployed to any static hosting service:
# Build for production
ng build --prod
# Deploy the dist/ folder to your hosting provider
Recommended Platforms:
- Vercel - Excellent for Angular applications with automatic deployments
- Netlify - Simple drag-and-drop deployment
- Firebase Hosting - Great for Angular applications with Firebase backend
- GitHub Pages - Free hosting for open-source projects
- AWS S3 + CloudFront - Scalable enterprise solution
Docker Deployment
Create a Dockerfile for containerized deployment:
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
Server-Side Rendering (SSR)
For applications requiring SSR, use Angular Universal:
ng add @nguniversal/express-engine
npm run build:ssr
npm run serve:ssr
Troubleshooting
Common Issues and Solutions
1. Node.js Version Compatibility
Issue: Angular CLI requires a specific Node.js version.
Solution: Ensure you have Node.js 16.x or higher installed.
node --version
npm install -g npm@latest
2. Port Already in Use
Issue: Port 4200 is already occupied when running ng serve.
Solution: Use a different port:
ng serve --port 4201
3. Dependencies Not Installing
Issue: npm install fails or hangs.
Solution: Clear npm cache and try again:
npm cache clean --force
npm install
4. Build Errors
Issue: Build fails with TypeScript or compilation errors.
Solution: Check the error messages carefully. Common issues include:
- Missing imports
- TypeScript configuration issues
- Circular dependencies
5. Angular CLI Version Issues
Issue: Commands not working or unexpected behavior.
Solution: Update Angular CLI:
npm update -g @angular/cli
6. Environment Configuration
Issue: Environment variables not being loaded correctly.
Solution: Ensure you're using the correct environment file:
ng build --configuration=production
7. Path Resolution Issues
Issue: Module resolution errors in TypeScript.
Solution: Check tsconfig.json and ensure paths are correctly configured. The Angular CLI uses a sophisticated path resolution system that may require adjustments for complex projects.
8. Memory Issues During Build
Issue: Builds fail due to memory constraints.
Solution: Increase Node.js memory limit:
node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build
Advanced Troubleshooting
For more complex issues, refer to the Angular CLI documentation and community resources: