Skip to main content

​
Prerequisites

Before installing Odontología Frontend, ensure you have the following software installed on your system:

​
Required Software

Node.js

Version: 20.x or higher (LTS recommended)Download from nodejs.org

npm

Version: 11.6.1 or higherComes bundled with Node.js
This project uses npm 11.6.1 as specified in the packageManager field. While other package managers like yarn or pnpm may work, npm is the officially supported package manager.

​
Verify Installation

Check that Node.js and npm are properly installed: 
node --version
# Should output: v20.x.x or higher

npm --version
# Should output: 11.6.1 or higher

​
Angular CLI (Optional)

While not strictly required (the project includes Angular CLI as a dev dependency), installing Angular CLI globally can be convenient: 
npm install -g @angular/[email protected]
Verify the installation: 
ng version

​
Installation Steps

1

Clone the Repository

Clone the Odontología Frontend repository to your local machine:
git clone <repository-url>
cd odontologia-frontend
Replace <repository-url> with the actual repository URL.
2

Install Dependencies

Install all required npm packages:
npm install
This command will:
  • Install all production dependencies (Angular, RxJS, Express, Boxicons)
  • Install all development dependencies (Angular CLI, TypeScript, Vitest)
  • Set up Angular build tools
  • Configure the development environment
The installation may take 2-5 minutes depending on your internet connection and system speed.
Expected Output:
added 1234 packages, and audited 1235 packages in 2m

123 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
3

Verify Installation

Verify that all dependencies are correctly installed:
npm list --depth=0
You should see the main dependencies:
[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── [email protected]
├── [email protected]
└── [email protected]

​
Installed Dependencies

​
Production Dependencies

These packages are required to run the application:
PackageVersionPurpose
@angular/common21.1.0Angular common utilities and directives
@angular/compiler21.1.0Angular template compiler
@angular/core21.1.0Core Angular framework
@angular/forms21.1.0Form handling and validation
@angular/platform-browser21.1.0Browser-specific rendering
@angular/platform-server21.1.0Server-side rendering support
@angular/router21.1.0Client-side routing
@angular/ssr21.1.4Server-side rendering utilities
boxicons2.1.4Icon library
express5.1.0Web server for SSR
rxjs7.8.0Reactive programming library
tslib2.8.1TypeScript runtime library

​
Development Dependencies

These packages are only needed during development:
PackageVersionPurpose
@angular/build21.1.4Angular build system
@angular/cli21.1.4Angular command-line interface
@angular/compiler-cli21.1.0Angular compiler CLI
@types/express5.0.1TypeScript definitions for Express
@types/node20.17.19TypeScript definitions for Node.js
jsdom27.1.0DOM implementation for testing
typescript5.9.2TypeScript compiler
vitest4.0.8Testing framework

​
Project Structure

After installation, your project structure will look like this: 
odontologia-frontend/
├── node_modules/          # Installed dependencies
├── public/                # Static assets
├── src/                   # Source code
│   ├── app/              # Application components
│   │   ├── appointment/  # Appointment management
│   │   ├── calendar/     # Calendar view
│   │   ├── header/       # Header component
│   │   ├── home/         # Dashboard
│   │   ├── login/        # Authentication
│   │   ├── menu/         # Navigation menu
│   │   ├── patient/      # Patient list
│   │   ├── new-patient/  # New patient form
│   │   ├── paciente-detail/ # Patient details
│   │   ├── services/     # Angular services
│   │   ├── tratamientos/ # Treatment management
│   │   ├── app.ts        # Root component
│   │   ├── app.config.ts # App configuration
│   │   └── app.routes.ts # Route definitions
│   ├── index.html        # HTML entry point
│   ├── main.ts           # Application bootstrap
│   ├── main.server.ts    # SSR bootstrap
│   ├── server.ts         # Express server
│   └── styles.css        # Global styles
├── angular.json          # Angular configuration
├── package.json          # Dependencies and scripts
├── tsconfig.json         # TypeScript configuration
└── README.md             # Project documentation

​
Configuration Files

​
TypeScript Configuration

The project uses strict TypeScript settings for maximum type safety: 
{
  "compilerOptions": {
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "target": "ES2022",
    "module": "preserve"
  }
}

​
Angular Configuration

The angular.json file defines:
  • Build configuration for development and production
  • Asset management (Boxicons CSS)
  • Server-side rendering setup
  • Bundle size budgets (500kB warning, 1MB error)
The project enforces strict bundle size limits. The initial bundle should not exceed 1MB to ensure fast load times.

​
Troubleshooting

​
Common Installation Issues

This typically indicates permission issues. Try:
# On macOS/Linux
sudo chown -R $USER /usr/local/lib/node_modules

# Or install without sudo by configuring npm
npm config set prefix ~/.npm-global
export PATH=~/.npm-global/bin:$PATH
Ensure you’re using Node.js 20.x or higher:
node --version
If using nvm (Node Version Manager):
nvm install 20
nvm use 20
Try clearing the npm cache:
npm cache clean --force
npm install
Or increase the timeout:
npm install --fetch-timeout=60000
Peer dependency warnings are usually informational and won’t prevent the app from running. However, if you encounter issues:
npm install --legacy-peer-deps

​
Next Steps

Quick Start

Now that you have installed all dependencies, learn how to run the application locally and start development.

​
Additional Resources

Build docs developers (and LLMs) love

Get started for freeTalk to us