How To Install Angular on AlmaLinux 10

Angular has become one of the most popular TypeScript-based frameworks for building dynamic, scalable web applications. When combined with AlmaLinux 10, developers get a robust, enterprise-grade development environment that offers stability, security, and performance. This comprehensive guide walks through every step needed to install Angular on AlmaLinux 10, from initial system preparation to advanced configuration and optimization techniques.

Understanding Angular and System Requirements

Angular is a powerful, open-source web application framework developed by Google that uses TypeScript as its primary programming language. The framework follows a component-based architecture, making it ideal for building complex, maintainable applications. Angular’s declarative approach to UI development, combined with its powerful CLI tools, dependency injection system, and comprehensive testing utilities, makes it a preferred choice for enterprise applications.

Angular 14 and later versions include groundbreaking features such as standalone components, typed reactive forms, and enhanced Angular CLI commands. These improvements streamline development workflows while maintaining backward compatibility. The framework’s robust ecosystem includes Angular Material for UI components, Angular Universal for server-side rendering, and Angular PWA support for progressive web applications.

For optimal Angular development on AlmaLinux 10, your system needs Node.js version 18.13 or higher. The Angular CLI requires a minimum of 4GB RAM, though 8GB is recommended for larger projects. Storage requirements vary based on project complexity, but allocating at least 10GB for development tools and dependencies ensures smooth operation. Network connectivity is essential for downloading packages and accessing Angular’s extensive documentation and community resources.

Browser compatibility remains crucial for Angular applications. Modern versions support Chrome 109+, Firefox 102+, Safari 15.4+, and Edge 109+. Development servers typically run on localhost port 4200, requiring proper firewall configuration for external access during development phases.

AlmaLinux 10 Overview and Preparation

AlmaLinux 10 “Purple Lion” represents a significant advancement in enterprise Linux distributions. Built on RHEL 10 compatibility, it includes kernel 6.12 with enhanced security features, x86-64-v2 architecture support for improved performance, and frame pointers support for better debugging capabilities. These improvements create an ideal environment for modern web development workflows.

The distribution’s focus on developer productivity includes updated package repositories, improved container support, and enhanced development tools integration. AlmaLinux 10’s long-term support lifecycle ensures stability for production applications while providing access to cutting-edge development technologies.

Before beginning the Angular installation process, ensure your AlmaLinux 10 system is properly configured. Access your server via SSH using a user account with sudo privileges. If connecting remotely, use the following command structure:

ssh username@your-server-ip -p port-number

Replace placeholders with your actual server credentials. Once connected, update your system packages to ensure compatibility and security:

sudo dnf update -y
sudo dnf upgrade -y

Install essential development tools and dependencies that Angular requires:

sudo dnf groupinstall "Development Tools" -y
sudo dnf install curl wget git unzip -y

Configure your firewall to allow development server access. Angular’s development server runs on port 4200 by default:

sudo firewall-cmd --zone=public --add-port=4200/tcp --permanent
sudo firewall-cmd --reload

Installing Node.js on AlmaLinux 10

Node.js serves as the runtime environment for Angular development, providing the JavaScript engine and npm package manager necessary for project creation and dependency management. AlmaLinux 10 offers multiple installation methods, each with distinct advantages for different development scenarios.

The most straightforward approach uses AlmaLinux’s module system, which provides tested, stable Node.js versions. First, examine available Node.js streams:

dnf module list nodejs

This command displays available Node.js versions with their respective profiles. For Angular development, select the LTS (Long Term Support) version. Install Node.js using the module system:

sudo dnf module install nodejs:18/common -y

Alternative installation methods include using NodeSource repositories for access to the latest Node.js releases. Add the NodeSource repository:

curl -fsSL https://rpm.nodesource.com/setup_lts.x | sudo bash -
sudo dnf install nodejs -y

Verify your Node.js installation by checking version information:

node --version
npm --version

These commands should display version numbers, confirming successful installation. Configure npm for optimal development workflow by setting up a global packages directory in your home folder:

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc
source ~/.bashrc

This configuration prevents permission issues when installing global packages and maintains a clean system environment.

Installing Angular CLI

The Angular Command Line Interface (CLI) is the primary tool for creating, building, testing, and deploying Angular applications. It streamlines development workflows through code generation, build optimization, and testing automation.

Install Angular CLI globally using npm:

npm install -g @angular/cli

For systems requiring elevated privileges, use:

sudo npm install -g @angular/cli

The installation process downloads the latest stable Angular CLI version and makes it available system-wide. During installation, you may see prompts about analytics data collection. Respond according to your privacy preferences.

Verify the Angular CLI installation:

ng --version

This command displays detailed information about your Angular CLI installation, including version numbers for Angular core packages, Node.js, and npm. The output also shows your operating system and CPU architecture.

Configure Angular CLI preferences for improved development experience:

ng config -g cli.analytics false
ng config -g cli.packageManager npm

These commands disable analytics collection and set npm as the default package manager. You can customize additional settings based on your development preferences.

Creating Your First Angular Project

Angular project creation involves several configuration decisions that affect your application’s architecture and capabilities. The Angular CLI simplifies this process through interactive prompts and sensible defaults.

Create a new Angular workspace and application:

ng new my-angular-app

The CLI presents several configuration options during project creation:

• Routing: Choose ‘Yes’ to include Angular Router for single-page application navigation
• Stylesheet format: Select CSS, SCSS, Sass, Less, or Stylus based on your preferences
• Server-side rendering: Opt for SSR if you need search engine optimization
• Standalone components: Modern Angular applications benefit from standalone component architecture

Navigate to your project directory:

cd my-angular-app

Examine the generated project structure. Key directories include:

• src/app/: Contains application components, services, and modules
• src/assets/: Static assets like images and fonts
• src/environments/: Environment-specific configuration files
• angular.json: Angular workspace configuration
• package.json: Project dependencies and scripts

Start the development server:

ng serve

The development server compiles your application and watches for file changes. By default, it serves your application on http://localhost:4200. Open this URL in your web browser to see your running Angular application.

Configure the development server for enhanced functionality:

ng serve --host 0.0.0.0 --port 4200 --open

This command binds the server to all network interfaces, sets the port explicitly, and automatically opens your default browser.

Advanced Configuration and Optimization

Angular development environments benefit from careful configuration to maximize productivity and performance. Modern development workflows require integration with various tools and services.

Configure TypeScript for optimal development by editing tsconfig.json:

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true
  }
}

These settings enable strict type checking, reducing runtime errors and improving code quality.

Set up environment files for different deployment stages. Edit src/environments/environment.ts for development:

export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api',
  enableDebug: true
};

Create src/environments/environment.prod.ts for production:

export const environment = {
  production: true,
  apiUrl: 'https://api.yourapp.com',
  enableDebug: false
};

Configure Angular CLI settings in angular.json for build optimization:

{
  "projects": {
    "my-angular-app": {
      "architect": {
        "build": {
          "options": {
            "optimization": true,
            "sourceMap": false,
            "extractCss": true,
            "namedChunks": false,
            "aot": true,
            "extractLicenses": true,
            "vendorChunk": false,
            "buildOptimizer": true
          }
        }
      }
    }
  }
}

Implement performance optimization techniques including OnPush change detection strategy in components:

import { ChangeDetectionStrategy, Component } from '@angular/core';

@Component({
  selector: 'app-optimized',
  template: `<div>Optimized Component</div>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class OptimizedComponent {}

Configure lazy loading for feature modules to reduce initial bundle size:

const routes: Routes = [
  {
    path: 'feature',
    loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
  }
];

Production Deployment Considerations

Production deployment requires careful attention to security, performance, and reliability. Angular applications must be built with optimization flags and deployed using secure, scalable infrastructure.

Create production builds using Angular CLI:

ng build --configuration=production

This command generates optimized files in the dist/ directory, including minified JavaScript, CSS, and HTML files. The build process includes tree-shaking to remove unused code, ahead-of-time compilation for improved performance, and source map generation for debugging.

Configure web servers for Angular applications. For Apache, create a virtual host configuration:

<VirtualHost *:80>
    ServerName yourapp.com
    DocumentRoot /var/www/html/your-angular-app
    
    <Directory /var/www/html/your-angular-app>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
        
        RewriteEngine On
        RewriteBase /
        RewriteRule ^index\.html$ - [L]
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule . /index.html [L]
    </Directory>
</VirtualHost>

For Nginx, configure the server block:

server {
    listen 80;
    server_name yourapp.com;
    root /var/www/html/your-angular-app;
    index index.html;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

Implement HTTPS configuration for secure communication:

sudo certbot --nginx -d yourapp.com

Configure Content Security Policy headers to prevent XSS attacks:

<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; script-src 'self' 'unsafe-eval';">

Troubleshooting Common Issues

Angular development on AlmaLinux 10 may encounter various issues related to Node.js compatibility, permission problems, or configuration errors. Understanding common problems and their solutions accelerates development workflows.

Node.js Version Compatibility Issues

Angular requires specific Node.js versions for different releases. If you encounter version compatibility errors:

# Check current Node.js version
node --version

# Install specific Node.js version using nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
source ~/.bashrc
nvm install 18.19.0
nvm use 18.19.0

NPM Permission Problems

Global package installation may fail due to permission restrictions:

# Create npm global directory
mkdir ~/.npm-global
npm config set prefix '~/.npm-global'

# Add to PATH
echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc
source ~/.bashrc

Angular CLI Installation Failures

Network issues or corrupted packages may prevent Angular CLI installation:

# Clear npm cache
npm cache clean --force

# Reinstall Angular CLI
npm uninstall -g @angular/cli
npm install -g @angular/cli@latest

Development Server Connection Issues

If the development server fails to start or becomes inaccessible:

# Check port availability
sudo netstat -tlnp | grep :4200

# Kill existing processes
sudo pkill -f "ng serve"

# Start server with specific host binding
ng serve --host 0.0.0.0 --port 4200

Build and Compilation Errors

Memory-related build failures on systems with limited resources:

# Increase Node.js memory limit
export NODE_OPTIONS="--max_old_space_size=4096"

# Build with specific configuration
ng build --configuration=production --source-map=false

Best Practices and Security Considerations

Angular development requires adherence to security best practices and coding standards to create maintainable, secure applications. Implementing proper security measures from project inception prevents vulnerabilities and ensures robust application architecture.

Follow Angular’s official style guide for consistent code organization. Structure components using barrel exports:

// shared/index.ts
export * from './components';
export * from './services';
export * from './models';

Implement proper input validation and sanitization:

import { DomSanitizer } from '@angular/platform-browser';

constructor(private sanitizer: DomSanitizer) {}

sanitizeHtml(html: string): SafeHtml {
  return this.sanitizer.sanitize(SecurityContext.HTML, html);
}

Configure HTTP interceptors for authentication and error handling:

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authToken = localStorage.getItem('token');
    if (authToken) {
      req = req.clone({
        setHeaders: { Authorization: `Bearer ${authToken}` }
      });
    }
    return next.handle(req);
  }
}

Implement proper error boundaries and logging:

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
  handleError(error: Error): void {
    console.error('Global error:', error);
    // Send to logging service
  }
}

Configure Content Security Policy for XSS protection:

// In your main component or service
setCSPHeaders() {
  const meta = document.createElement('meta');
  meta.httpEquiv = 'Content-Security-Policy';
  meta.content = "default-src 'self'; script-src 'self' 'unsafe-eval';";
  document.head.appendChild(meta);
}

Advanced Topics and Future Considerations

Modern Angular applications benefit from advanced architectural patterns and performance optimization techniques. Server-side rendering with Angular Universal improves SEO and initial page load times:

ng add @nguniversal/express-engine
npm run build:ssr
npm run serve:ssr

Implement Progressive Web App features for offline functionality:

ng add @angular/pwa

This command adds service workers, manifest files, and icon sets for PWA compliance.

Configure state management with NgRx for complex applications:

ng add @ngrx/store
ng add @ngrx/effects
ng add @ngrx/entity

Implement micro-frontend architectures using Angular Elements:

import { createCustomElement } from '@angular/elements';

const customElement = createCustomElement(MyComponent, { injector });
customElements.define('my-custom-element', customElement);

Stay updated with Angular and AlmaLinux releases by monitoring official channels and implementing automated update processes. Configure dependabot or similar tools for dependency management:

# .github/dependabot.yml
version: 2
updates:
  - package-ecosystem: "npm"
    directory: "/"
    schedule:
      interval: "weekly"

Plan for long-term maintainability by implementing comprehensive testing strategies:

# Unit testing
ng test

# End-to-end testing
ng e2e

# Code coverage
ng test --code-coverage

Congratulations! You have successfully installed Angular. Thanks for using this tutorial for installing Angular on your AlmaLinux OS 10 system. For additional or useful information, we recommend you check the official Angular website.