Files

Mondo Diaz 2054181228 Downgrade to Angular 17 with webpack for better restricted environment compatibility

- Downgrade from Angular 19 to Angular 17.3.0
- Switch from Vite-based build (@angular/build) to webpack (@angular-devkit/build-angular)
- Eliminates Vite, esbuild, and rollup dependencies that were causing issues in restricted npm environments
- Update tsconfig.json for webpack compatibility (moduleResolution: bundler)
- Update angular.json to use browser builder instead of application builder
- Update docker-compose.yml to use prebuilt Dockerfile for air-gapped deployment
- Add build-for-airgap.sh helper script for local builds
- Update DEPLOYMENT.md with Angular 17 webpack strategy notes
- Bundle size: 329.73 kB raw / 86.54 kB gzipped

This change improves compatibility with enterprise environments that have restricted package registry access.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-10-15 14:41:07 -05:00

3.2 KiB

Raw Blame History

Deployment Options

This project supports two deployment strategies for the Angular frontend, depending on your environment's network access.

Option 1: Standard Build (Internet Access Required)

Use the standard Dockerfile.frontend which builds the Angular app inside Docker.

Requirements:

Internet access to npm registry
Docker build environment

Usage:

./quickstart.sh
# or
docker-compose up -d --build

This uses Dockerfile.frontend which:

Installs npm dependencies in Docker
Builds Angular app in Docker
Serves with nginx

Option 2: Pre-built Deployment (Air-Gapped/Restricted Environments)

Use Dockerfile.frontend.prebuilt for environments with restricted npm access.

Requirements:

Node.js 18+ installed locally
npm installed locally
No internet required during Docker build

Note: This project uses Angular 17 with webpack bundler (not Vite) for better compatibility with restricted npm environments.

Usage:

Step 1: Build Angular app locally

cd frontend
npm install  # Only needed once or when dependencies change
npm run build:prod
cd ..

Step 2: Update docker-compose.yml

Edit docker-compose.yml and change the frontend dockerfile:

  frontend:
    build:
      context: .
      dockerfile: Dockerfile.frontend.prebuilt  # <-- Change this line
    ports:
      - "4200:80"
    depends_on:
      - api

Step 3: Build and deploy

docker-compose up -d --build

This uses Dockerfile.frontend.prebuilt which:

Copies pre-built Angular files from frontend/dist/
Serves with nginx
No npm/node required in Docker

Troubleshooting

Build Tool Package Issues

If you see errors about missing packages like:

Cannot find package "vite"
Cannot find package "esbuild"
Cannot find package "rollup"

Solution: This project uses Angular 17 with webpack bundler specifically to avoid these issues. If you still encounter package access problems in your restricted environment, use Option 2 (Pre-built) deployment above, which eliminates all npm dependencies in Docker.

Custom NPM Registry

For both options, you can use a custom npm registry:

# Set in .env file
NPM_REGISTRY=http://your-npm-proxy:8081/repository/npm-proxy/

# Or inline
NPM_REGISTRY=http://your-proxy ./quickstart.sh

Recommendation

Development/Cloud: Use Option 1 (standard)
Air-gapped/Enterprise: Use Option 2 (pre-built) ⭐ RECOMMENDED
CI/CD: Use Option 2 for faster, more reliable builds
Restricted npm access: Use Option 2 (pre-built) ⭐ REQUIRED

Build Strategy for Restricted Environments

This project uses Angular 17 with webpack instead of Angular 19 with Vite specifically for better compatibility with restricted npm environments. Webpack has fewer platform-specific binary dependencies than Vite.

If you encounter any package access errors during builds:

Cannot find package "vite"
Cannot find package "rollup"
Cannot find package "esbuild"
Any platform-specific binary errors

Solution: Use Option 2 (Pre-built) deployment. This completely avoids npm installation in Docker and eliminates all build tool dependency issues.

3.2 KiB Raw Blame History