# Deploy Angular App to Production Without Manual Setup > Deploy Angular apps in 2026 with Kuberns. Build production files, auto-detect output paths, set env vars, fix SPA routing, enable SSL, CI/CD, and ship. - **Author**: suyash-tiwari - **Published**: 2026-01-11 - **Modified**: 2026-09-09 - **Category**: Deployment Guides - **URL**: https://kuberns.com/blogs/how-to-deploy-an-angular-app/ --- Deploying an Angular app means building production-ready static files, uploading the correct output folder to a host or CDN, and configuring the server so Angular routes fall back to `index.html`. For most Angular apps, the process starts with `ng build`, then moves to hosting, SPA fallback rules, runtime config, SSL, and CI/CD. In Angular 17 and newer, many projects output browser files under `dist//browser/`, so choosing the wrong publish directory can cause blank pages or 404 errors even when the build succeeds. This guide shows the practical way to deploy an Angular app in 2026, including the production build command, `ng deploy`, output directory checks, SPA routing fixes, runtime environment variables, SSR considerations, and how Kuberns handles the deployment setup with agentic AI. ## 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 goes live with a public HTTPS URL, build history, and CI/CD managed from the dashboard ## How Do You Deploy an Angular App? To deploy an Angular app, first run `ng build` or `ng build --configuration production` to generate optimized static files. Then upload the generated `dist` output to a hosting platform, static server, or CDN. For Angular 17+ projects, confirm whether your deployable files are inside `dist//browser/`. Next, configure the host to serve `index.html` for unmatched routes so refreshes on Angular router paths do not return 404. Add runtime environment values for API URLs, connect CI/CD to your GitHub branch, enable HTTPS, and test the deployed URL. Kuberns handles the hosting configuration automatically after you connect your repository and provide secure environment variables. ## Prerequisites (Two Things for an Error-Free Deployment) To deploy an Angular app to production, run `ng build --configuration production` to generate static files, confirm the correct output folder, connect your GitHub repo to a deployment platform like Kuberns, add runtime environment variables, and click Deploy. Kuberns auto-detects your Angular version and output directory, configures SPA routing, provisions SSL, and sets up CI/CD without configuration files from your side. ### 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. ![angular build configuration](https://kuberns-blogs-media.s3.ap-south-1.amazonaws.com/angular-prerequisite.png) ### 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. If your Angular frontend calls a backend API, plan that deployment at the same time. For example, a FastAPI or Flask API can run as a separate backend service while Angular remains the frontend. See the [FastAPI deployment guide](https://kuberns.com/blogs/fastapi-deployment-guide/) and [Flask deployment guide](https://kuberns.com/blogs/how-to-deploy-flask-app/) for backend setup patterns. ## What Is `ng deploy` in Angular? Angular includes an `ng deploy` command, but it only works after your project has a deployment builder installed. The Angular docs list builders for Firebase Hosting, Vercel, Netlify, GitHub Pages, and Amazon S3. When you add one of these packages, it updates `angular.json` with a deploy target, and then `ng deploy` can build and upload the app for that platform. For manual hosting, `ng deploy` is not required. You can run `ng build`, copy the output directory to a web server or CDN, and configure the server for Angular routing. Kuberns follows the simpler platform path: connect GitHub, let the agentic AI detect Angular settings from `angular.json`, add secure environment values, and deploy without manually adding a deploy builder. ## 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 on Kuberns [Kuberns](https://kuberns.com/) is an agentic AI cloud platform built on AWS infrastructure. For Angular apps, the agent 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. ![sign up on kuberns](https://kuberns-blogs-media.s3.ap-south-1.amazonaws.com/deploying-on-kuberns.png) Kuberns offers a Trial Option to start. Paid plans start at $7, with bundle packs available for additional savings. [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. ![connect github to kuberns](https://kuberns-blogs-media.s3.ap-south-1.amazonaws.com/kuberns-registration.png) * Click "Connect & Configure" and authorise Kuberns access to your repositories * Select your Angular repository and the branch you're deploying from (main) * The agentic 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: ![add env variables to kuberns](https://kuberns-blogs-media.s3.ap-south-1.amazonaws.com/environment-variable-kuberns.png) * 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: ![env variable for angular](https://kuberns-blogs-media.s3.ap-south-1.amazonaws.com/angular-env.png) ### Step 4: Deploy and the Agentic AI Takes Over Click Deploy. From here, you watch rather than configure. The agentic AI: ![click deploy to run with ai](https://kuberns-blogs-media.s3.ap-south-1.amazonaws.com/kuberns-ai-deploying.png) * 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: Future GitHub pushes can trigger automatic redeploys ![kuberns dashboard](https://kuberns-blogs-media.s3.ap-south-1.amazonaws.com/deployed-dashboard.png) Your Angular app goes live 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 the [Node.js deployment guide](https://kuberns.com/blogs/how-to-deploy-nodejs-app/) for a natural full-stack setup where frontend and backend services can live in the same deployment workflow. ## 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: ![angular load runtime](https://kuberns-blogs-media.s3.ap-south-1.amazonaws.com/angular-load-run-time.png) 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: ![angular subdirectory deployment](https://kuberns-blogs-media.s3.ap-south-1.amazonaws.com/angular-subdirectory.png) 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: ![angular lazy loading](https://kuberns-blogs-media.s3.ap-south-1.amazonaws.com/angular-lazy-loading.png) 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 provides the cleanest zero-config path. On other platforms, SSR Angular usually 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 simple path and several manual ones. VPS with Nginx, manual Firebase setup, and platform configurations that require redirect rules and publish directory settings can 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)** Deploy your Angular app on Kuberns ## Frequently Asked Questions on Angular App Deployment ### What is the fastest way to deploy an Angular app in 2026? The fastest way to deploy an Angular app in 2026 is to build the production files, connect the project to a hosting platform, set runtime variables, and configure SPA fallback, SSL, and CI/CD. Kuberns handles those deployment steps automatically after you connect GitHub and provide the required secure values. ### 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 agentic 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 can trigger an automatic redeploy. No GitHub Actions or webhook setup is needed. Build history and rollback controls 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 actively supported major version](https://angular.dev/reference/releases) in 2026, with Angular 21 and Angular 20 in Long-Term Support according to the Angular release schedule. ### How do I deploy an Angular app for free? You can deploy small Angular apps for free on GitHub Pages, Firebase Hosting, Netlify, or Vercel, but each option has tradeoffs around routing, build limits, backend support, or commercial use. Kuberns offers a Trial Option and paid plans starting at $7 for teams that want managed deployment, SSL, CI/CD, and full-stack support without manual configuration. --- - [More Deployment Guides articles](https://kuberns.com/blogs/category/deployment-guides/1/) - [All articles](https://kuberns.com/blogs/)