How to Deploy an Angular Application to the Cloud

Deploy Angular to the Cloud

Angular is Google's opinionated, enterprise-grade frontend framework. It includes everything out of the box: routing, forms, HTTP client, dependency injection, and a powerful CLI. The production build compiles TypeScript, tree-shakes unused code, and outputs a folder of optimised static files ready to serve from any CDN.

PandaStack makes this deployment a one-time setup. After that, every git push deploys a new version automatically.

Prerequisites

• Node.js 20+ installed locally
• Angular CLI: npm install -g @angular/cli
• A GitHub account
• PandaStack CLI: npm install -g @pandastack/cli

Step 1 — Create an Angular Application

ng new my-angular-app --routing --style=scss
cd my-angular-app

The --routing flag adds Angular Router. Test the development server:

ng serve
# http://localhost:4200

Step 2 — Build for Production

ng build --configuration production

Angular CLI outputs to dist/my-angular-app/browser/ (Angular 17+). The browser/ subfolder contains the final index.html and all compiled assets. Confirm:

ls dist/my-angular-app/browser/
# index.html  main-HASH.js  polyfills-HASH.js  styles-HASH.css  ...

Step 3 — Configure pandastack.json

The critical configuration step is pointing outputDir to the correct subfolder:

{
  "type": "static",
  "buildCommand": "ng build --configuration production",
  "outputDir": "dist/my-angular-app/browser"
}

Replace my-angular-app with your actual project name (it matches the name field in angular.json). You can verify it:

cat angular.json | grep '"outputPath"'
# "outputPath": "dist/my-angular-app",

For Angular 17+, append /browser to that path.

Step 4 — Handle Angular Router (History Mode)

Angular Router in PathLocationStrategy (the default, no hash URLs) requires the server to return index.html for all routes. PandaStack's static hosting does this automatically — deep links like /dashboard/settings will correctly serve index.html and let Angular Router handle the rest.

Step 5 — Environment Configuration

Angular has environment files under src/environments/. Update src/environments/environment.ts for production:

export const environment = {
  production: true,
  apiUrl: 'https://api.my-backend.pandastack.io'
};

Use it in your services:

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

@Injectable({ providedIn: 'root' })
export class ApiService {
  private baseUrl = environment.apiUrl;
}

For secrets that should not be in source control, set them in the PandaStack dashboard under Environment Variables — they are injected at build time.

Step 6 — Push to GitHub and Deploy

git add .
git commit -m "Production Angular app with PandaStack config"
gh repo create my-angular-app --public --source=. --push

Deploy via the CLI:

panda deploy

Or connect through [dashboard.pandastack.io](https://dashboard.pandastack.io): New Project → select your GitHub repository → PandaStack reads pandastack.json and runs the build automatically.

Step 7 — Optimise the Build Further

Reduce bundle size with budget checks in angular.json:

{
  "configurations": {
    "production": {
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "500kb",
          "maximumError": "1mb"
        }
      ]
    }
  }
}

Enable lazy loading for feature modules to reduce initial bundle size:

const routes: Routes = [
  {
    path: 'dashboard',
    loadChildren: () =>
      import('./dashboard/dashboard.module').then(m => m.DashboardModule)
  }
];

Step 7 — Enable Build Caching

Speed up deployments by caching the node_modules layer. Since PandaStack rebuilds from your GitHub source, the package.json hash determines whether the npm install layer is reused. Commit your package-lock.json to ensure deterministic installs:

# Ensure lock file is committed
git add package-lock.json
git commit -m "Add package-lock.json for deterministic builds"

Verify the Deployment

After the build completes, PandaStack serves your app over HTTPS. Test it:

curl https://my-angular-app.pandastack.io
# HTTP/2 200

View build logs from the dashboard or:

panda logs

Summary

Angular's production build is a static folder — PandaStack serves it from a global CDN with automatic HTTPS and GitHub-triggered deploys. Set outputDir correctly in pandastack.json and you are done. More at [docs.pandastack.io](https://docs.pandastack.io).