Skip to main content

​
Prerequisites

Before installing the Angular PWA Demo application, ensure you have the following installed on your system:
Node.js version 18.x or higher is required. You can verify your installation:
node --version
npm --version
Download from nodejs.org if not installed.
Angular CLI version 21.1.3 or higher is recommended:
npm install -g @angular/cli@latest
ng version
Required if cloning from a repository:
git --version

​
Installation steps

1

Clone or download the project

If using Git, clone the repository:
git clone <repository-url>
cd PWA_DEMO_ENV_PROD
Alternatively, download and extract the source code to your desired directory.
2

Install dependencies

Install all required npm packages:
npm install
This will install all dependencies from package.json, including:
  • Angular 21.1.3 (core, common, forms, router, PWA, service worker)
  • Angular Material 21.1.3
  • Bootstrap 5.3.2 and ng-bootstrap 20.0.0
  • Three.js 0.172.0 for 3D graphics
  • Chart.js 3.9.1 and ng2-charts 3.1.2
  • Socket.io 4.7.4 for real-time features
  • Additional utilities (jsPDF, html2canvas, MathJS)
3

Verify installation

Check that everything is installed correctly:
ng version
You should see Angular CLI and Angular version information.

​
Development server

Start the development server to run the application locally: 
npm start
The application will be available at http://localhost:4200/. The app will automatically reload when you make changes to source files.
The --disable-host-check flag is used in the start script for development flexibility. Remove this flag in production environments.

​
Build for production

Create an optimized production build: 
ng build
The build artifacts will be stored in the dist/PWA_DEMO_ENV_PROD/ directory.

​
Build configuration

The production build includes optimizations defined in angular.json:
  • Output hashing: All files include content hashes for cache busting
  • Service worker: Automatically registered for offline support
  • Budget limits:
    • Initial bundle: 25MB maximum
    • Component styles: 5MB maximum

​
Running tests

Execute unit tests via Karma: 
ng test
The test runner will launch in your default browser and watch for file changes.

​
Project structure

After installation, your project structure will look like this: 
PWA_DEMO_ENV_PROD/
├── src/
│   ├── app/
│   │   ├── _components/      # Reusable components
│   │   ├── _directives/      # Custom directives
│   │   ├── _models/          # TypeScript models and entities
│   │   ├── _modules/         # Feature modules
│   │   │   ├── _Demos/       # Demo modules (games, algorithms, etc.)
│   │   │   ├── about/        # About section
│   │   │   ├── home/         # Home components
│   │   │   └── shared/       # Shared module
│   │   ├── _services/        # Injectable services
│   │   │   ├── __AI/         # AI/ML services
│   │   │   ├── __Games/      # Game logic services
│   │   │   ├── __Utils/      # Utility services
│   │   │   ├── AlgorithmService/
│   │   │   └── BackendService/
│   │   ├── app.component.ts  # Root component
│   │   ├── app.module.ts     # Root module
│   │   └── app-routing.module.ts
│   ├── assets/
│   │   ├── config/           # Configuration JSON files
│   │   └── icons/            # PWA icons
│   ├── manifest.webmanifest  # PWA manifest
│   └── index.html
├── angular.json              # Angular workspace configuration
├── package.json              # Dependencies and scripts
├── tsconfig.json             # TypeScript configuration
└── ngsw-config.json          # Service worker configuration

​
Configuration files

​
package.json dependencies

The application uses these key dependencies: 
{
  "dependencies": {
    "@angular/animations": "^21.1.3",
    "@angular/common": "^21.1.3",
    "@angular/core": "^21.1.3",
    "@angular/forms": "^21.1.3",
    "@angular/material": "^21.1.3",
    "@angular/pwa": "^21.1.3",
    "@angular/router": "^21.1.3",
    "@angular/service-worker": "^21.1.3",
    "bootstrap": "^5.3.2",
    "chart.js": "^3.9.1",
    "three": "^0.172.0",
    "socket.io-client": "^4.8.1"
  }
}

​
Web manifest configuration

The PWA manifest (src/manifest.webmanifest) defines the app identity: 
{
  "name": "AngularDijkstra",
  "short_name": "AngularDijkstra",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "./",
  "start_url": "./",
  "icons": [
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

​
Common issues

If port 4200 is already in use, specify a different port:
ng serve --port 4300
Ensure you’re using Node.js 18.x or higher:
node --version
Use nvm to manage multiple Node versions.
Clear npm cache and reinstall:
npm cache clean --force
rm -rf node_modules package-lock.json
npm install
Service workers only work in production mode or over HTTPS. Build and serve the production bundle:
ng build --configuration=production
npx http-server dist/PWA_DEMO_ENV_PROD/browser -p 8080

​
Next steps

Now that you have the application installed, proceed to the quick start guide to create your first component and understand the application architecture.

Quick start guide

Learn how to build your first Angular component and integrate it with the application

Build docs developers (and LLMs) love

Get started for freeTalk to us