Skip to main content

​
Get Started in 5 Minutes

Follow these steps to get Angular Bases up and running on your local machine.
1

Clone the Repository

First, clone the Angular Bases repository to your local machine:
git clone https://github.com/miguel14Cat/angular.git
cd angular
The project directory is named angular but the package name in package.json is bases.
2

Install Dependencies

Install all required dependencies using your preferred package manager:
npm install
This will install:
  • Angular 21.1.0 framework packages
  • Angular CLI 21.1.4 build tools
  • TypeScript 5.9.2 compiler
  • Vitest 4.0.8 testing framework
  • All other project dependencies
The project is configured to use npm 11.10.0 as the default package manager.
3

Start the Development Server

Launch the development server with hot module reloading:
npm start
The development server will start and you’ll see output similar to:
** Angular Live Development Server is listening on localhost:4200 **

✔ Browser application bundle generation complete.
Initial chunk files | Names         | Raw size
main.js             | main          | XX.XX kB
polyfills.js        | polyfills     | XX.XX kB
styles.css          | styles        | X.XX kB

Application bundle generation complete. [X.XXX seconds]
Watch mode enabled. Watching for file changes...
The server runs on http://localhost:4200/ by default and will automatically reload when you make changes to the source files.
4

Explore the Application

Open your browser and navigate to http://localhost:4200/. You’ll see the Angular Bases application with a navigation bar.

​
Available Pages

Counter

Route: /Demonstrates signal-based state management with increment and decrement operations. Features OnPush change detection strategy.

Hero

Route: /heroShows reactive form handling with signals. Manage hero properties like name and age with computed values.

Dragonball

Route: /dragonballBuilds dynamic character lists with signal updates. Add characters with validation and see signal array transformations.

​
Try These Features

Counter Page (Default landing page):
  • Click increment/decrement buttons to see signals in action
  • Notice how both regular and signal-based counters update
  • Observe the OnPush change detection behavior
Hero Page:
  • View the default hero (Ironman, age 45)
  • Change the hero to see signal updates
  • Reset the form to initial values
Dragonball Page:
  • Add new characters with name and power level
  • See the character list update reactively
  • Try validation by submitting empty or invalid values

​
What’s Next?

Project Structure

Learn about the codebase organization

Core Concepts

Deep dive into signals and Angular patterns

Build for Production

Learn how to build and deploy your app

Run Tests

Execute unit tests with Vitest

​
Common Commands

Here are the most commonly used commands for development: 
npm start
Use npm run watch during development to automatically rebuild when files change without running the dev server.

​
Troubleshooting

If you encounter issues:
  1. Port 4200 already in use: Stop other Angular applications or specify a different port with ng serve --port 4201
  2. Module not found errors: Delete node_modules and package-lock.json, then run npm install again
  3. TypeScript errors: Ensure you’re using TypeScript 5.9.2 or compatible version
  4. Build errors: Clear the Angular cache with rm -rf .angular/cache

Build docs developers (and LLMs) love

Get started for freeTalk to us