Skip to main content

​
System Requirements

Before installing Angular Bases, ensure your system meets the following requirements:

Node.js

Version 18.x or higherRequired for running Angular CLI and development tools

Package Manager

npm 11.x+, yarn, or pnpmnpm 11.10.0 is the configured package manager

Operating System

Windows, macOS, or LinuxCompatible with all major operating systems

Memory

4GB RAM minimum8GB recommended for smooth development
Angular 21 requires Node.js version 18.19.0 or newer. Check your version with node --version.

​
Installation Steps

1

Verify Node.js Installation

First, check that Node.js and npm are installed on your system:
node --version
npm --version
You should see output like:
v18.x.x  # or higher
11.x.x   # or higher
If Node.js is not installed, download it from nodejs.org or use a version manager like nvm.
2

Clone the Repository

Clone the Angular Bases repository to your local machine:
git clone https://github.com/miguel14Cat/angular.git
cd angular
Alternatively, you can fork the repository first if you plan to make contributions.
3

Install Project Dependencies

Install all required dependencies using your preferred package manager:
npm install
This process will install:Core Dependencies:
  • @angular/core (21.1.0) - Angular framework
  • @angular/common (21.1.0) - Common Angular directives and pipes
  • @angular/router (21.1.0) - Client-side routing
  • @angular/forms (21.1.0) - Form handling
  • rxjs (7.8.0) - Reactive programming library
Development Dependencies:
  • @angular/cli (21.1.4) - Angular command-line interface
  • @angular/compiler-cli (21.1.0) - Angular compiler
  • typescript (5.9.2) - TypeScript compiler
  • vitest (4.0.8) - Unit testing framework
Installation typically takes 1-3 minutes depending on your internet connection and system performance.
4

Configure Your IDE (Optional)

For the best development experience, configure your IDE with Angular support:Install these extensions:
  • Angular Language Service - IntelliSense for Angular templates
  • Angular Snippets - Code snippets for Angular development
  • Prettier - Code formatting (already configured in project)
The project includes VS Code configuration in .vscode/ with recommended extensions and debugging settings.

​
Other IDEs

  • WebStorm: Built-in Angular support, no additional setup needed
  • Sublime Text: Install TypeScript and Angular packages

​
Verify Installation

After installation, verify everything is set up correctly:
1

Check Angular CLI

Verify the Angular CLI is working:
ng version
You should see output showing Angular CLI 21.1.4 and Angular 21.1.0.
2

Start Development Server

Launch the development server:
npm start
Wait for the compilation to complete. You should see:
** Angular Live Development Server is listening on localhost:4200 **
✔ Browser application bundle generation complete.
3

Open in Browser

Navigate to http://localhost:4200/ in your browser.You should see the Counter page load successfully with the navigation bar.
If the page doesn’t load, check the terminal for error messages and ensure no other application is using port 4200.
4

Run Tests

Verify the testing setup:
npm test
The Vitest test runner should start and execute any existing tests.

​
Project Configuration

Angular Bases uses the following configuration:

​
TypeScript Configuration

  • Target: ES2022
  • Strict Mode: Enabled with comprehensive type checking
  • Experimental Decorators: Enabled for Angular components

​
Angular Configuration

  • Project Type: Application
  • Builder: @angular/build:application
  • Package Manager: npm
  • Analytics: Disabled

​
Build Options

  • Development: Source maps enabled, optimizations disabled
  • Production: Output hashing, tree shaking, minification
  • Budget: 500kB warning, 1MB error for initial bundle
The project uses Angular’s modern standalone components architecture with signals for state management.

​
Additional Tools

​
Prettier Configuration

The project includes Prettier for code formatting: 
{
  "printWidth": 100,
  "singleQuote": true,
  "overrides": [
    {
      "files": "*.html",
      "options": {
        "parser": "angular"
      }
    }
  ]
}

​
Available Scripts

After installation, you have access to these npm scripts: 
npm start
# Runs ng serve

​
Next Steps

Now that you have Angular Bases installed, explore these resources:

Quick Start Guide

Get up and running with the basics

Project Structure

Understand the codebase organization

Core Concepts

Learn about signals and Angular patterns

Components

Explore component APIs and methods

​
Troubleshooting

​
Common Installation Issues

On Linux/macOS, avoid using sudo. Instead, configure npm to use a different directory:
mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
export PATH=~/.npm-global/bin:$PATH
Add the export line to your .bashrc or .zshrc file.
If ng command is not recognized:
  1. Ensure npm’s bin directory is in your PATH
  2. Try installing Angular CLI globally: npm install -g @angular/cli
  3. Restart your terminal
If you see TypeScript version warnings:
npm install typescript@~5.9.2 --save-dev
This ensures you’re using the exact TypeScript version configured for the project.
Specify a different port:
ng serve --port 4201
Or stop the process using port 4200:
# On macOS/Linux
lsof -ti:4200 | xargs kill

# On Windows
netstat -ano | findstr :4200
taskkill /PID <PID> /F
For more help, check the Angular CLI documentation or open an issue on the project repository.

Build docs developers (and LLMs) love

Get started for freeTalk to us