How To Install Angular on Rocky Linux 10
Angular has emerged as one of the most powerful frontend frameworks for building dynamic, scalable web applications. Developed and maintained by Google, this TypeScript-based platform offers developers a comprehensive toolkit for creating single-page applications (SPAs) with robust architecture and exceptional performance. Whether you’re building enterprise-grade applications, progressive web apps, or complex user interfaces, Angular provides the structure and tools necessary for professional development.
Rocky Linux 10, as an enterprise-grade operating system compatible with Red Hat Enterprise Linux, delivers the stability and security required for modern web development environments. This tutorial will guide you through the complete process of installing Angular on Rocky Linux 10, from initial system preparation to creating and running your first Angular application.
What is Angular?
Angular represents a complete rewrite of the original AngularJS framework, bringing modern web development capabilities to frontend engineering. This open-source platform uses TypeScript as its primary language, offering strong typing, enhanced IDE support, and improved code maintainability compared to traditional JavaScript frameworks.
The framework’s component-based architecture allows developers to build reusable UI elements that encapsulate logic, templates, and styles. Angular’s powerful features include two-way data binding for automatic synchronization between model and view, dependency injection for better code organization, and a sophisticated routing system for creating multi-page experiences within single-page applications.
Developers choose Angular for enterprise applications because it provides everything needed out of the box. The framework includes built-in form validation, HTTP client services, RxJS integration for reactive programming, and comprehensive testing utilities. Angular CLI streamlines project creation, component generation, and build optimization, making it an ideal choice for teams requiring consistent development workflows.
Prerequisites
Before beginning the Angular installation process on Rocky Linux 10, ensure you have the following requirements in place:
- A Rocky Linux 10 server or desktop installation with minimum 2GB RAM, 2 CPU cores, and 20GB storage space
- Root or sudo privileges for system-level operations
- Stable internet connection for downloading packages and dependencies
- Basic familiarity with Linux command-line interface and terminal operations
- SSH access configured if working with remote servers
- Optional: understanding of firewall configuration for network access
Step 1: Update System Packages
Keeping your Rocky Linux 10 system up to date ensures compatibility with modern development tools and patches known security vulnerabilities. Start by refreshing the package cache and upgrading all installed packages to their latest versions.
Open your terminal and execute the following commands:
sudo dnf makecache --refreshThis command updates the DNF package manager’s metadata cache. Next, upgrade all system packages:
sudo dnf update -yThe -y flag automatically confirms the installation without prompting for user input. Install essential utilities that will be needed throughout the development process:
sudo dnf install -y curl wget dnf-utils gitThese tools provide functionality for downloading files, managing repositories, and version control. If kernel updates were applied during the system upgrade, consider rebooting your server:
sudo rebootAfter the reboot, reconnect to your system and proceed to the next step.
Step 2: Install Node.js on Rocky Linux 10
Node.js serves as the runtime environment for Angular CLI and provides npm (Node Package Manager), which is essential for managing JavaScript packages and dependencies. Angular requires Node.js to run its development server, build tools, and testing framework.
Method 1: Install Node.js from NodeSource Repository (Recommended)
The NodeSource repository provides the latest stable versions of Node.js, which ensures compatibility with current Angular releases. Add the NodeSource repository for Node.js 22.x:
curl -fsSL https://rpm.nodesource.com/setup_22.x | sudo bash -This script configures the repository and imports the necessary GPG keys. Install Node.js with the following command:
sudo dnf install -y nodejsThe installation process includes both Node.js runtime and npm package manager. Verify the installation by checking the installed versions:
node -vExpected output: v22.x.x or similar
npm -vExpected output: 10.x.x or higher
Update npm to Latest Version
Although npm comes bundled with Node.js, updating to the latest version ensures access to the newest features and security patches:
sudo npm install -g npm@latestThe -g flag installs packages globally, making them available system-wide. Confirm the updated npm version:
npm -vAlternative Installation Methods
Method 2: Rocky Linux AppStream Repository
Rocky Linux 10 includes Node.js in its default repositories, though versions may be older:
sudo dnf module list nodejs
sudo dnf module enable nodejs:22
sudo dnf install nodejsMethod 3: Node Version Manager (NVM)
For developers who need to manage multiple Node.js versions, NVM offers flexible version switching:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
source ~/.bashrc
nvm install 22
nvm use 22This approach is particularly useful for testing applications across different Node.js versions.
Step 3: Install Angular CLI Globally
Angular CLI (Command Line Interface) is the official tool for initializing, developing, and maintaining Angular applications. It provides commands for generating components, services, modules, and other Angular building blocks while enforcing best practices and consistent project structure.
Install Angular CLI globally using npm:
sudo npm install -g @angular/cliThe installation downloads Angular CLI and its dependencies, which may take several minutes depending on your internet connection speed. Global installation makes the ng command available throughout your system for creating projects in any directory.
After installation completes, verify Angular CLI is properly installed:
ng versionThis command displays comprehensive version information including:
Angular CLI: 20.3.x
Node: 22.x.x
Package Manager: npm 10.x.x
OS: linux x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.x.x
@angular-devkit/core x.x.x
@angular-devkit/schematics x.x.x
@schematics/angular x.x.xThe output confirms Angular CLI installation along with critical development dependencies. If you encounter permission errors, consider using Node Version Manager (NVM) instead of installing packages with sudo.
Step 4: Configure Git for Angular Projects
Git configuration is required before creating Angular projects because Angular CLI initializes every new project as a Git repository by default. This promotes version control best practices from the start of development.
Set your global Git identity with your name and email address:
git config --global user.email "your.email@example.com"
git config --global user.name "Your Full Name"Replace the placeholder values with your actual information. Verify the configuration:
git config --listThis displays all Git configuration settings. Your user.name and user.email should appear in the output. These credentials will be associated with all commits you make in Angular projects and other Git repositories.
Step 5: Create Your First Angular Application
With all prerequisites satisfied, you can now create your first Angular application using Angular CLI. Navigate to your preferred development directory:
cd ~Or create a dedicated development directory:
mkdir ~/angular-projects
cd ~/angular-projectsGenerate a new Angular project using the ng new command:
ng new my-angular-appAngular CLI will prompt you with several configuration questions:
Would you like to add Angular routing?
Type Y for Yes if you plan to create a multi-view application with navigation, or N for No for simple single-page applications. Routing is recommended for most projects.
Which stylesheet format would you like to use?
Choose from CSS, SCSS, Sass, or Less. SCSS is popular for its additional features while maintaining CSS compatibility.
Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)?
Select based on your application requirements. SSR improves SEO and initial load performance but adds complexity.
After answering these prompts, Angular CLI creates the project structure and installs all necessary dependencies via npm. The process typically takes 2-5 minutes depending on internet speed.
Understanding the Project Structure
Angular CLI generates a comprehensive project structure:
- src/ – Contains application source code, components, services, and assets
- node_modules/ – Stores all npm package dependencies
- angular.json – Workspace configuration file defining build options and project settings
- package.json – Lists project dependencies and npm scripts
- tsconfig.json – TypeScript compiler configuration
- README.md – Project documentation
Navigate into your newly created project directory:
cd my-angular-appYour Angular application is now ready for development.
Step 6: Run Angular Development Server
Angular includes a built-in development server with live reload capabilities, allowing you to see changes instantly as you modify code. Start the development server with the following command:
ng serveFor server environments where you need to access the application from remote locations, bind the development server to all network interfaces:
ng serve --host 0.0.0.0 --port 8080The --host 0.0.0.0 flag allows connections from any IP address, while --port 8080 specifies a custom port. You can also use --open to automatically launch a browser window:
ng serve --openDuring the initial compilation, you’ll see output similar to:
Initial chunk files | Names | Raw size
polyfills.js | polyfills | 314.27 kB |
main.js | main | 50.83 kB |
styles.css | styles | 95 bytes |
| Initial total | 365.17 kB
Application bundle generation complete. [1.234 seconds]
✔ Compiled successfully.
Watch mode enabled. Watching for file changes...
➜ Local: http://localhost:4200/
➜ press h + enter to show helpOpen your web browser and navigate to http://localhost:4200 for local access, or http://your-server-ip:8080 if accessing remotely. You’ll see the Angular welcome page with the Angular logo and helpful getting-started links.
The development server features hot module replacement, automatically recompiling and refreshing the browser when you save changes to source files. Press Ctrl+C in the terminal to stop the development server.
Step 7: Build Angular Application for Production
Development and production builds differ significantly in optimization and performance characteristics. Production builds apply Ahead-of-Time (AOT) compilation, tree shaking, minification, and other optimizations to reduce bundle sizes and improve runtime performance.
Create a production-ready build with the following command:
ng build --configuration productionOr use the shorter syntax:
ng build --prodThe build process compiles TypeScript to JavaScript, optimizes assets, and generates static files in the dist/ directory:
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.
Initial chunk files | Names | Raw size | Estimated transfer size
main.a1b2c3d4.js | main | 234.56 kB | 65.43 kB
polyfills.e5f6g7h8.js | polyfills | 36.21 kB | 11.84 kB
styles.i9j0k1l2.css | styles | 0 bytes | 0 bytes
| Initial total | 270.77 kB | 77.27 kB
Build at: 2025-11-24T02:30:45.123Z - Hash: a1b2c3d4e5f6g7h8 - Time: 12345msThe optimized files are located in dist/my-angular-app/. These static files can be deployed to any web server like Nginx, Apache, or cloud hosting platforms.
To analyze bundle sizes and identify optimization opportunities:
ng build --stats-jsonThis generates a stats.json file you can analyze with tools like webpack-bundle-analyzer.
Step 8: Configure PM2 Process Manager (Optional)
PM2 is a production-grade process manager for Node.js applications, offering features like automatic restarts, load balancing, and application monitoring. While not typically used for Angular development servers in production, PM2 is valuable for long-running development environments.
Install PM2 globally via npm:
sudo npm install -g pm2Start your Angular development server with PM2:
pm2 start "ng serve --host 0.0.0.0 --port 8080" --name my-angular-appPM2 displays a status table showing your application’s information:
┌────┬────────────────────┬──────────┬──────┬───────────┬──────────┐
│ id │ name │ mode │ ↺ │ status │ cpu │
├────┼────────────────────┼──────────┼──────┼───────────┼──────────┤
│ 0 │ my-angular-app │ fork │ 0 │ online │ 0% │
└────┴────────────────────┴──────────┴──────┴───────────┴──────────┘Essential PM2 Commands
Monitor your application status:
pm2 statusView application logs in real-time:
pm2 logs my-angular-appStop the application:
pm2 stop my-angular-appRestart the application:
pm2 restart my-angular-appRemove the application from PM2:
pm2 delete my-angular-appAccess the real-time monitoring dashboard:
pm2 monitConfigure PM2 to start automatically on system boot:
pm2 startupFollow the instructions displayed, then save the current process list:
pm2 savePM2 will now automatically restart your Angular application after server reboots.
Step 9: Configure Firewall for Network Access
Rocky Linux 10 uses firewalld for firewall management. If you’re running Angular’s development server and need to access it from remote machines, you must open the appropriate ports.
Check firewall status:
sudo firewall-cmd --stateOpen port 4200 (Angular’s default development port):
sudo firewall-cmd --permanent --add-port=4200/tcpIf you’re using a custom port (e.g., 8080), open that instead:
sudo firewall-cmd --permanent --add-port=8080/tcpReload firewall rules to apply changes:
sudo firewall-cmd --reloadVerify the rule was added:
sudo firewall-cmd --list-allYou should see your port listed under ports:. For production deployments, configure a reverse proxy (Nginx or Apache) and open only ports 80 (HTTP) and 443 (HTTPS) instead of exposing the development server directly.
Essential Angular CLI Commands
Angular CLI provides numerous commands for efficient application development:
Generation Commands
Create a new component:
ng generate component component-nameGenerate a service:
ng generate service service-nameCreate a module:
ng generate module module-nameGenerate a directive:
ng generate directive directive-nameCreate a pipe:
ng generate pipe pipe-nameTesting and Quality Commands
Run unit tests:
ng testExecute end-to-end tests:
ng e2eLint your code:
ng lintMaintenance Commands
Update Angular dependencies:
ng updateAdd Angular packages:
ng add @angular/materialShorthand Syntax
Angular CLI supports abbreviated commands:
ng ginstead ofng generateng sinstead ofng serveng binstead ofng build
Get help for any command:
ng help
ng generate --helpThese commands streamline development and enforce Angular best practices.
Troubleshooting Common Installation Issues
Permission Denied Errors
If you encounter permission errors during npm installations, avoid using sudo with npm commands. Instead, either use NVM to manage Node.js installations, or reconfigure npm’s global directory:
mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc
source ~/.bashrcCommand Not Found: ng
If the ng command isn’t recognized after installing Angular CLI, add npm’s global bin directory to your PATH:
echo 'export PATH="$(npm config get prefix)/bin:$PATH"' >> ~/.bashrc
source ~/.bashrcPort Already in Use
When the default port 4200 is occupied, either specify a different port:
ng serve --port 4300Or identify and terminate the process using port 4200:
sudo lsof -i :4200
sudo kill -9 <PID>Node.js Version Compatibility
Angular requires specific Node.js versions. Angular 20.x requires Node.js 18.19 or 20.x. Check Angular’s official documentation for version compatibility and install the appropriate Node.js version if needed.
npm Install Failures
If package installations fail due to network issues:
npm cache clean --force
npm installFor persistent problems, try a different npm registry:
npm config set registry https://registry.npmjs.org/TypeScript Compilation Errors
Update TypeScript to a compatible version:
npm install typescript@latestReview tsconfig.json for configuration issues and consult Angular’s TypeScript compatibility matrix.
Congratulations! You have successfully installed Angular. Thanks for using this tutorial for installing Angular open-source web framework on your Rocky Linux 10 system. For additional or useful information, we recommend you check the official Angular website.
