CLI Guide

Deploy Angular with Bantam CLI

Deploy enterprise-ready Angular applications with TypeScript

Install Bantam CLI:

npm install -g @bantamhq/cli

View on NPM: @bantamhq/cli

Quick start:

# Build your Angular app
ng build

# Deploy it
bantam deploy ./dist/{project-name}

Quick Start

Build your Angular app

Creates a production build with AOT compilation

ng build

Output goes to ./dist/{project-name} by default

Navigate to build output

Angular outputs to a project-specific folder

cd dist/my-app

Deploy with Bantam

Your Angular app is live!

bantam deploy .

Or deploy from root: bantam deploy ./dist/my-app

Framework Details

Build Configuration

Configure production builds in angular.json:

angular.json - Production configuration:

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "outputPath": "dist/my-app",
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                }
              ],
              "fileReplacements": [{
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.prod.ts"
              }],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        }
      }
    }
  }
}

Base Href & Deployment URL

Set the correct base href for your deployment:

Build with custom base href:

# For root deployment
ng build --base-href /

# For subdirectory deployment
ng build --base-href /my-app/

# Or set in angular.json
"baseHref": "/my-app/"

The base href must match your deployment path for assets and routing to work correctly.

Router Configuration

Configure Angular Router for static hosting:

app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'products', loadChildren: () => 
    import('./products/products.module').then(m => m.ProductsModule) 
  },
  { path: '**', component: NotFoundComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    useHash: false, // Use HTML5 routing
    preloadingStrategy: PreloadAllModules
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

For HTML5 pushState routing, create src/_redirects with:/* /index.html 200

Environment Configuration

Angular uses environment files for configuration:

src/environments/environment.prod.ts:

export const environment = {
  production: true,
  apiUrl: 'https://api.myapp.com',
  version: '1.0.0',
  features: {
    analytics: true,
    logging: false
  }
};

Access in services/components:

import { environment } from '@environments/environment';

@Injectable()
export class ApiService {
  private apiUrl = environment.apiUrl;
  
  constructor(private http: HttpClient) {}
  
  getData() {
    return this.http.get(`${this.apiUrl}/data`);
  }
}

Advanced Usage

Custom Domain

Deploy directly to your own domain

bantam deploy ./dist --domain myapp.com

Permanent Deployment

Keep your site online forever (requires login)

bantam deploy ./dist --permanent

Custom Expiry

Set how long your deployment stays online

bantam deploy ./dist --expiry-days 7

Custom Subdomain

Choose your own subdomain on bantam.site

bantam deploy ./dist --subdomain my-project

CI/CD Integration

Add Bantam to your continuous deployment pipeline:

# GitHub Actions example
- name: Deploy to Bantam
  run: |
    npm install -g @bantamhq/cli
    bantam login --token ${{ secrets.BANTAM_TOKEN }}
    bantam deploy ./dist --domain myapp.com --permanent

Troubleshooting

Common Issues & Solutions

Quick fixes for deployment challenges

01.404 errors on page refresh

This happens with HTML5 routing. Solutions:

# Option 1: Add _redirects file
echo "/*    /index.html   200" > src/_redirects

# Option 2: Use hash routing (not recommended)
RouterModule.forRoot(routes, { useHash: true })

# Option 3: Configure in angular.json to copy _redirects
"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/_redirects"
]

02.Build budget exceeded errors

Angular enforces size budgets. Options to resolve:

// angular.json - Adjust budgets
"budgets": [
  {
    "type": "initial",
    "maximumWarning": "2mb",
    "maximumError": "5mb"
  }
]

// Or analyze and reduce bundle size
ng build --stats-json
npx webpack-bundle-analyzer dist/my-app/stats.json

03.Lazy loaded modules not working

Ensure proper configuration for code splitting:

// Correct lazy loading syntax
const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module')
      .then(m => m.AdminModule)
  }
];

// Build with proper chunk names
ng build --named-chunks

// Check that chunks are generated
ls dist/my-app/*.js

04.How to optimize Angular build size?

Reduce bundle size with these techniques:

// 1. Enable Ivy renderer (default in Angular 12+)
"angularCompilerOptions": {
  "enableIvy": true
}

// 2. Remove unused imports
npm install -D @angular-devkit/build-optimizer

// 3. Tree-shake unused code
ng build --optimization --build-optimizer

// 4. Lazy load large libraries
import('moment').then(m => {
  const moment = m.default;
  // Use moment
});

05.Service Worker configuration for offline

Add PWA support to your Angular app:

# Add PWA support
ng add @angular/pwa

# Build with service worker
ng build --configuration production

# Deploy (includes service worker)
bantam deploy ./dist/my-app

# Note: Service worker requires HTTPS

Bantam serves all content over HTTPS, so service workers work automatically.