# How to Deploy Angular App Step by Step to Production in 2026
> If you are searching for the fastest way to deploy your Angular app, here is the best step-by-step guide to deploy on Kuberns in one click with Agentic AI.
- **Author**: suyash-tiwari
- **Published**: 2026-01-11
- **Modified**: 2026-07-10
- **Category**: Deployment Guides
- **URL**: https://kuberns.com/blogs/how-to-deploy-an-angular-app/
---
If you're looking for the fastest way to deploy your Angular app to production, without writing Nginx configs, setting up Apache rewrites, configuring SPA routing rules, or manually managing SSL certificates, you're in the right place.
Here's what most Angular deployment guides skip: you can deploy an Angular app in under five minutes without touching a single configuration file. The `ng build` command produces optimised static files, and Kuberns, an agentic AI cloud platform, detects your project, serves those files from a global CDN with HTTPS, fixes SPA routing automatically, and wires up CI/CD on every GitHub push, all without you opening a terminal on a server.
Beyond the fast path, this guide also covers what actually matters for production Angular deployments in 2026: the Angular 17+ output directory change that breaks deployments silently, the SPA routing 404 problem that hits every Angular app on its first production push, runtime vs compile-time environment config (the mistake 90% of developers make), and an honest platform comparison so you can make the right call for your stack.
## TL;DR
- Run `ng build` locally and confirm it completes without errors
- Push your Angular project to a GitHub repository
- Connect the repo to Kuberns: the Agentic AI reads `angular.json`, detects your version, and sets the correct output directory automatically
- Add environment variables in the Kuberns dashboard before deploying
- Click Deploy: SPA routing, SSL, CDN, and CI/CD are all configured automatically
- Your Angular app is live in under 5 minutes with no config files needed
## Prerequisites (Two Things for an Error-Free Deployment)
To deploy an Angular app to production, run `ng build --configuration production` to generate static files, connect your GitHub repo to a deployment platform like Kuberns, add your environment variables, and click Deploy. Kuberns auto-detects your Angular version and output directory, configures SPA routing, provisions SSL, and sets up CI/CD in under five minutes with no configuration files required.
### 1. Your Angular app builds cleanly
Run ng build locally and confirm it completes without errors. If it builds on your machine, it builds on Kuberns.
### 2. Environment variables are ready and not in environment.ts
This is the most important Angular-specific prerequisite. Angular's environment.ts files bake configuration into your build at compile time. Baking API keys into `environment.prod.ts` is one of the most common Angular deployment mistakes: if your API URL is compiled into the build, you have to rebuild the entire app just to point it from `api-dev.com` to `api-prod.com`. The fix is to load config at runtime instead.
For runtime secrets and API URLs that change between environments, use environment variables set in your deployment platform's dashboard, not in environment.ts. You'll use these in the Kuberns deployment steps below.
> **💡 Deploying a FastAPI or Flask backend that your Angular frontend calls? See our [FastAPI deployment](https://kuberns.com/blogs/fastapi-deployment-guide/) guide and [Flask deployment](https://kuberns.com/blogs/how-to-deploy-flask-app/) guide, both deploy on Kuberns with zero server configuration alongside your Angular frontend.**
## How to Deploy an Angular App on Kuberns?
Before walking through the steps, here's what the deployment actually looks like in real time. This video shows the entire flow: GitHub connection, AI stack detection, live URL with HTTPS.
## Steps to deploy your Angular app in the fastest way with AI
[Kuberns](https://kuberns.com/) is an agentic AI cloud platform built on AWS infrastructure. For Angular apps, the AI detects your Angular version, reads angular.json to find your project configuration, sets the build command and correct output directory automatically, configures SPA routing, issues SSL, and deploys with CI/CD with zero configuration files from your side.
### Step 1: Create Your Account and Project
Go to [Kuberns](https://kuberns.com) and click "Deploy with AI". Create your account and add your basic project details.
Kuberns has a free tier to start. After that, $7 gets you $14 in compute credits, 2X value to apply toward your deployment. [See what each tier includes](https://kuberns.com/pricing/)
### Step 2: Connect GitHub
On the "Creating a Service" page, connect your GitHub account, add the project name and region.
* Click "Connect & Configure" and authorise Kuberns access to your repositories
* Select your Angular repository and the branch you're deploying from (main)
* The AI scans your project, identifies your Angular version and configuration, and sets the build command and output directory. You confirm, not configure
### Step 3: Set Environment Variables
Navigate to the Environment section before deploying:
* Click "Add Env Vars" and input key-value pairs manually, or
* Click "Upload .env file" to import all variables at once
Go to the Environment section. Add your runtime configuration:
### Step 4: Deploy and the AI Takes Over
Click Deploy. From here, you watch rather than configure. The agentic AI:
* Runs npm install to install dependencies
* Executes ng build with your project configuration
* Identifies the correct output directory for your Angular version
* Configures SPA routing so every Angular route works on direct access and refresh
* Provisions AWS compute in your chosen region
* Issues an SSL certificate: Your URL is HTTPS from the first request
* Distribute your app through a global CDN
* Enables CI/CD: Every future GitHub push triggers an automatic redeploy
Your Angular app is live within minutes, with a public URL, real-time logs, build history, and auto-scaling running in the background.
## What Kuberns Handles That You'd Otherwise Configure Manually
| Production requirement | Manual VPS | Other platforms | Kuberns |
| --------------------------------- | ---------------------- | ---------------------- | --------------- |
| Correct dist/browser/ output path | You configure | You set manually | AI auto-detects |
| Nginx server configuration | Install + configure | Not needed | Not needed |
| SPA routing (try\_files fallback) | Write Nginx rule | Manual redirect config | AI automatic |
| SSL certificate | Certbot + renewal cron | Automatic | Automatic |
| Gzip compression | Nginx config | Varies | Automatic |
| Auto-scaling | Manual rules | Rules-based | AI-driven |
| CI/CD on push | GitHub Actions | Yes (most) | Yes, built-in |
| Custom domain + SSL | Manual DNS + cert | Dashboard | Dashboard |
| Monitoring and logs | Prometheus/Datadog | Basic | Built-in |
> **💡 Running a Node.js or Express backend alongside your Angular frontend? See our [Node.js deployment](https://kuberns.com/blogs/how-to-deploy-nodejs-app/) guide, you can deploy both as separate services in the same Kuberns project with a single GitHub push.**
## Angular Deployment Best Practices 2026
These practices separate deployments that hold up in production from those that create ongoing maintenance overhead. They are drawn from [Angular's own deployment documentation](https://angular.dev/tools/cli/deployment) and patterns that recur across production Angular teams.
### 1. Never use ng serve in production
ng serve is the Angular development server. It has no security hardening, no HTTP caching, and no compression. Using it in production exposes a dev tool to the internet. Always use ng build and serve the output with a proper static server, CDN, or a platform like Kuberns that handles production serving automatically.
### 2. Load runtime config at runtime (don't bake it into the build)
Angular's environment.ts is a compile-time solution. Values embedded there are included in the JavaScript bundle, visible to anyone who inspects the source. More importantly, changing an environment value requires a full rebuild and redeploy.
For API URLs, feature flags, and external service endpoints, the better pattern is a runtime config.json loaded via Angular's APP\_INITIALIZER:
On Kuberns, you can also override this config.json at deploy time via environment variables, no rebuild required when switching environments.
### 3. Always set the correct publish directory for Angular 17+
Point your deployment platform at `dist//browser/`, not `dist//`. [The /browser/ subfolder was introduced in Angular 17](https://angular.dev/tools/cli/build-system-migration) as part of the new application builder. Pointing at the parent directory returns a blank page.
On Kuberns, this is auto-detected. On Netlify, Render, and Railway, you must set this manually in your platform settings.
### 4. Set --base-href for subdirectory deployments
If your Angular app is served at yoursite.com/app/ instead of the root domain, asset paths break unless --base-href is configured:
Without this, Angular will try to load main.js from yoursite.com/main.js instead of yoursite.com/app/main.js, causing 404 errors on all assets.
### 5. Enable lazy loading for feature modules
Angular's lazy loading splits your app into separate JavaScript chunks loaded on demand. For large Angular apps, this can reduce initial bundle size by 50 to 70%, dramatically improving first load time:
According to [Angular's own build documentation](https://angular.dev/tools/cli/build), `ng build` uses the production configuration unless configured otherwise, which enables build optimisation features, but lazy loading must be implemented in your routing to fully benefit.
### 6. Cache hashed assets aggressively (never cache index.html)
Angular's production build appends content hashes to asset filenames (main.a3b8f92c.js). These hashes change when file content changes. This means:
* CSS and JS files with hashes: cache for 1 year (immutable)
* index.html: never cache (must always serve the latest to pick up new asset hashes)
On Kuberns, this cache strategy is applied automatically. On VPS or manual deployments, configure it in Nginx as shown in the SPA routing section above.
> 💡 Managing multiple Angular micro-frontends or a monorepo with separate frontend and backend services? See our guide on [automated software deployment](https://kuberns.com/blogs/how-to-implement-one-click-automated-software-deployment/) for multi-service deployment pipelines that scale with your architecture.
## Angular Deployment Platform Comparison \[2026]
| Platform | Auto-detect Angular | Correct Build Path Handling | SPA Routing Setup | Free Tier | Starting Price | Best For |
| ---------------- | -------------------- | ------------------------------ | -------------------- | --------------------------- | ----------------------- | ----------------------------------------- |
| Kuberns | Yes | Yes, auto-configures /browser/ | Automatic | Yes, includes credits | $7 per month | Full-stack Angular apps, zero-ops teams |
| Vercel | Yes | Manual configuration needed | Automatic | Free for non-commercial use | $20 per user per month | Frontend-focused Angular apps, portfolios |
| Netlify | Yes | Manual configuration needed | Requires \_redirects | Free tier available | $19 per user per month | JAMstack Angular sites, content platforms |
| Firebase Hosting | Yes, via Angular CLI | Yes | Automatic | Generous free tier | Pay-as-you-go | Angular apps within Firebase ecosystem |
| Railway | Yes, via Nixpacks | Manual configuration needed | Manual setup | $5 trial credit | $5 per month plus usage | Prototypes, early-stage Angular projects |
| GitHub Pages | No | Manual configuration needed | Workaround required | Free | Free | Documentation, static Angular builds |
| VPS (Nginx) | No | Manual configuration needed | Requires Nginx rules | No | Around $5 per month | Full control, DevOps-driven deployments |
The practical summary: For Angular apps that are purely client-side rendered, dashboards, SPAs, enterprise apps without SSR, Kuberns, Vercel, Netlify, and Firebase Hosting all work well. The differentiation is team pricing, full-stack support, and how much configuration you write manually.
For Angular apps with SSR (@angular/ssr) that need a running Node.js server for server-side rendering, Kuberns Hosting provide the cleanest zero-config path. On other platforms, SSR Angular requires a Dockerfile or a specific start command configuration.
**[Compare Kuberns pricing and tiers](https://kuberns.com/pricing/#calculator)**
## Conclusion
Deploying Angular in 2026 has one genuinely fast path and several slow ones. The slow paths: VPS with Nginx, manual Firebase setup, platform configurations that require writing redirect rules and setting publish directories, all work, but they add overhead that compounds over time.
The fastest and best path is Kuberns. The agentic AI reads your angular.json, detects your Angular version, sets `dist//browser/` as the output directory, configures SPA routing, issues HTTPS, connects CI/CD to your GitHub push, and keeps your app running on AWS infrastructure, all without you touching a config file.
Angular is a structured, opinionated framework. Your deployment platform should be structured and opinionated too, handling all the production concerns automatically so you can stay focused on the application.
Your Angular app is built. Your GitHub repo is ready. Go ship it.
**[Deploy your Angular app on Kuberns](https://dashboard.kuberns.com)**
## Frequently Asked Questions on Angular App Deployment
### What is the fastest way to deploy an Angular app in 2026?
Kuberns is the fastest zero-configuration deployment for Angular in 2026. The agentic AI detects your Angular version from package.json and angular.json, sets the correct output directory (`dist//browser/` for Angular 17+), configures SPA routing, issues SSL, and enables CI/CD automatically. From signup to live HTTPS URL in under five minutes. [Start deploying](https://dashboard.kuberns.com)
### What is the correct output directory for Angular 17+ deployment?
Since Angular 17, `ng build` outputs to `dist//browser/` for CSR apps, not the root `dist//` as in Angular 16 and below. Your deployment platform's publish directory must point to this /browser/ subfolder. Missing this is the most common cause of blank screens after successful Angular deployments. On Kuberns, this is auto-detected from your angular.json configuration.
### Why does my Angular app show 404 when I refresh the page?
Angular is a single-page application; routes exist in Angular's router, not as physical files in dist/browser/. When a user refreshes /dashboard, the server looks for a file at that path, finds none, and returns 404. The fix is a catch-all redirect that sends all unmatched paths to index.html. On Kuberns, this is automatic. On Nginx, use try\_files $uri $uri/ /index.html. On Netlify, add a \_redirects file with /\* /index.html 200.
### Should I put API keys in Angular's environment.ts?
No. environment.ts values are baked into your JavaScript bundle at compile time, they're visible to anyone who inspects the browser source. More importantly, changing an environment value requires a full rebuild and redeployment. Use runtime configuration loaded via APP\_INITIALIZER and config.json, or set API endpoints as environment variables in your deployment platform's dashboard.
### Can I deploy an Angular SSR app on Kuberns?
Yes. Kuberns supports both Angular CSR (client-side rendered) and Angular SSR (@angular/ssr). For SSR apps, the AI detects the SSR configuration, sets the Node.js server start command (node dist/my-app/server/server.mjs), and runs the server as a long-running process, no Dockerfile or manual start command needed.
### How do I automatically redeploy my Angular app after pushing changes?
On Kuberns, every push to your connected GitHub branch triggers an automatic redeploy with zero downtime. No GitHub Actions or webhook setup needed. Build history and one-click rollbacks are available from the Kuberns dashboard. For more complex pipelines with staging environments, see our guide on automated software deployment.
### How do I deploy an Angular app on Vercel?
Connect your GitHub repo to Vercel, set the framework to Angular, and configure the output directory to `dist/<project>/browser/` for Angular 17+. You will also need to add a `vercel.json` rewrite rule to fix SPA routing. For full-stack Angular apps with a Node.js backend, Vercel requires separate service configuration. Kuberns handles all of this automatically without any config files.
### What does ng build --configuration production do?
`ng build --configuration production` runs Angular's production build with all optimisations enabled: tree-shaking, minification, ahead-of-time (AOT) compilation, and content hashing for cache busting. This is the command you should always use for deployments, never `ng serve`. Kuberns runs this command automatically when deploying your Angular app.
### How do I set base-href in Angular for deployment?
If your Angular app is served from a subdirectory such as `yoursite.com/app/`, run `ng build --base-href /app/` so Angular generates correct asset paths. Without this, assets load from the root domain and return 404 errors on all scripts and styles. If deploying to a root domain, no base-href change is needed. Kuberns handles root-domain deployments automatically.
### What is the latest Angular version in 2026?
[Angular 22 is the current stable release](https://angular.dev/reference/releases) in 2026 (22.0.5, released July 2026), with Angular 21 and Angular 20 both in Long-Term Support.
---
- [More Deployment Guides articles](https://kuberns.com/blogs/category/deployment-guides/1/)
- [All articles](https://kuberns.com/blogs/)
## Frequently Asked Questions on Angular App Deployment
### What is the fastest way to deploy an Angular app in 2026?
Kuberns is the fastest zero-configuration deployment for Angular in 2026. The agentic AI detects your Angular version from package.json and angular.json, sets the correct output directory (`dist/