# Read This Before Deploying Angular on Netlify > Step-by-step guide to deploy Angular on Netlify, the real limitations developers hit, and why Kuberns is the smarter way to deploy Angular apps in 2026. - **Author**: parth-kanpariya - **Published**: 2026-06-08 - **Modified**: 2026-06-08 - **Category**: Deployment Guides - **URL**: https://kuberns.com/blogs/deploy-angular-on-netlify/ --- You can deploy Angular on Netlify. Connect your GitHub repo, configure the build command, and a static Angular SPA is live in minutes. But Netlify has real edges that most guides skip entirely, and they tend to show up after you have already shipped. The SPA routing 404 on page refresh. The `@netlify/angular-runtime` plugin you need the moment you add SSR. The credit-based billing model introduced in September 2025 that makes cost prediction harder than it should be. These are not edge cases. They are the standard experience for Angular developers on Netlify. This guide covers the full deployment setup that works, the limitations worth knowing before you commit, and why developers moving past hobby projects are choosing [Kuberns](https://kuberns.com) instead. Kuberns deploys Angular apps using an AI agent that detects your stack automatically, handles all configuration, and injects environment variables without a single config file. ## Limitations You Should Know Before You Use Netlify ![Netlify limitations Angular developers should know](https://kuberns-blogs.s3.ap-south-1.amazonaws.com/netlify-limitations-angular.png) Most Angular deployment guides skip this section entirely. They show you the happy path and leave you to discover the edges on your own. Here is what actually matters before you commit to Netlify for an Angular project. ### SSR Requires a Separate Plugin and Manual Config Static Angular SPAs deploy cleanly on Netlify. The moment you add server-side rendering, the setup changes completely. You need to install the `@netlify/angular-runtime` plugin, and for Angular 19 and above, the default `server.ts` file Angular scaffolds is incompatible with Netlify's serverless infrastructure. The plugin swaps it automatically during build, but only if you are on version 2.2.0 or later. If your version is behind or the plugin is missing, you get cryptic build errors and empty `` tags in production. ### SPA Routing Breaks Out of the Box Angular handles routing on the client. When a user navigates directly to `/dashboard` or refreshes the page, Netlify looks for a real file at that path, finds nothing, and returns a 404. This does not happen in local development, which means it surprises developers on their first deploy. You need to manually add a redirect rule every time you deploy a new Angular project on Netlify. ### Credit-Based Billing Since September 2025 Netlify replaced its bandwidth and build-minutes model with a credit-based system in September 2025. Credits are consumed across build time, serverless function calls, and bandwidth. The free tier gives 300 credits per month. The problem is that cost prediction is harder with credits than with straightforward GB and minute limits. A traffic spike, an SSR app with frequent function invocations, or active development with many deploys can burn through credits faster than expected with no hard cap unless you set one manually. ### No Autoscaling Netlify does not scale your serverless functions or Edge Functions automatically based on traffic patterns. For Angular SSR apps under variable load, you are managing cold starts and invocation limits manually. A sudden spike in traffic to an SSR route means queued requests and slower response times, not automatic resource allocation. ### Free Tier Is Limited for Real Projects The 300 credits per month on the free tier works for hobby projects and portfolios. For any Angular app with real users, CI/CD pipelines triggering multiple builds per day, and SSR functions handling live traffic, you will hit the ceiling quickly. Moving to the Pro plan costs $20 per month, and function invocations above the included allowance bill additionally on top. > Most of these limitations do not show up until you are already in production. If you are evaluating platforms before committing, read our [full breakdown of Netlify pricing](https://kuberns.com/blogs/netlify-pricing/) to understand exactly what you are getting into. ## How to Deploy Angular on Netlify Step by Step ![How to deploy Angular on Netlify step by step](https://kuberns-blogs.s3.ap-south-1.amazonaws.com/deploy-angular-on-netlify-steps.png) Here is the complete setup that works for both static Angular SPAs and SSR apps. ### Prerequisites Before you open the Netlify dashboard, make sure you have: - Your Angular app pushed to a GitHub, GitLab, or Bitbucket repository - The app builds locally with `ng build` without errors - Node.js 18 or 20 installed (Netlify supports both) - Angular CLI installed globally ### Step 1: Connect Your Repo to Netlify Log into [netlify.com](https://www.netlify.com), click **Add new site**, and select **Import an existing project**. Authorise Netlify to access your repository host and choose your Angular project. ### Step 2: Configure Build Settings Netlify auto-detects Angular in most cases and suggests the following: - **Build command:** `ng build` - **Publish directory:** `dist//browser` (Angular 17+) or `dist/` (Angular 16 and below) Verify these match your actual `angular.json` output path before saving. A wrong publish directory means Netlify deploys an empty site with no error. ### Step 3: Fix SPA Routing with a Redirect Rule Angular's client-side router means every URL must serve `index.html`. Without this fix, any direct URL or page refresh returns a 404. Create a `_redirects` file in your `src` folder: ``` /* /index.html 200 ``` Add it to your `assets` array in `angular.json` so it gets copied to the build output: ```json "assets": [ "src/favicon.ico", "src/assets", "src/_redirects" ] ``` Alternatively, add this to a `netlify.toml` file in your project root: ```toml [[redirects]] from = "/*" to = "/index.html" status = 200 ``` ### Step 4: Set Environment Variables Open **Site configuration > Environment variables** in the Netlify dashboard. Add every variable your app needs. For Angular build-time variables, reference them in your `environment.ts` files using the Netlify build environment. For SSR runtime variables, they are available via `process.env` in your server code. ### Step 5: Deploy Netlify triggers a build automatically when you push to your configured branch. Check the deploy log for errors. Common first-deploy failures include the wrong publish directory, a missing `_redirects` file, or a Node.js version mismatch. ### Deploying Angular SSR on Netlify If your Angular app uses server-side rendering, the setup requires one additional step. Install the Angular runtime plugin: ```bash npm install @netlify/angular-runtime ``` Add it to your `netlify.toml`: ```toml [[plugins]] package = "@netlify/angular-runtime" ``` For Angular 19 and above, the plugin detects and replaces the incompatible default `server.ts` file automatically during build. Make sure you are on version 2.2.0 or later of the plugin. SSR rendering runs via Netlify serverless functions, with static assets served from the global CDN. > Broken deploys on Netlify are often caused by the same few issues across all frameworks, not just Angular. See [why software deployments fail in production](https://kuberns.com/blogs/why-do-software-deployments-fail/) and what to check first when your deploy log shows success but the app does not work. ## Why Netlify Is Not Worth It for Angular Apps ![Why Netlify is not worth it for Angular apps](https://kuberns-blogs.s3.ap-south-1.amazonaws.com/why-netlify-not-worth-for-angular.png) Netlify was built primarily for static sites and JAMstack frontends. Angular, especially with SSR, is a full-stack framework. That mismatch creates friction at every layer. The SPA redirect rule is a manual fix you need to remember on every new project. The SSR runtime plugin is a third-party dependency that lags Angular's release cycle. Angular 19 required a plugin update to handle the new `server.ts` format. Angular 20 will introduce more breaking changes. You are permanently dependent on the plugin maintainers keeping pace with the Angular team. The billing model rewards small, infrequent deployments. Angular apps in active development, with multiple developers pushing to feature branches and preview builds firing on every PR, burn through credits fast. The cost becomes hard to predict and harder to justify when you compare it against platforms built for full-stack deployments from the ground up. Netlify is a good choice for a portfolio site or a simple marketing page. For a production Angular app, there are better options. ### What Are Developers Switching to Instead of Netlify? Most Angular developers moving away from Netlify are landing on platforms built for full-stack deployments from the start. [Kuberns](https://kuberns.com) is the most common switch for Angular teams. The reason is straightforward: Kuberns uses an AI agent that reads your project, detects your Angular stack automatically, and handles all deployment configuration without any manual setup. No `netlify.toml`, no `_redirects` file, no angular-runtime plugin to maintain. You push your code, the AI handles the rest, and your app is live. For teams that have spent time debugging Netlify's SSR quirks or chasing credit billing surprises, that simplicity is the main draw. > Not convinced yet? Read our [comparison of the best Netlify alternatives](https://kuberns.com/blogs/best-netlify-alternatives/) to see what developers are moving to and why. ## The Best Way to Deploy Angular in 2026 Is Kuberns with AI ![The best way to deploy Angular in 2026 with Kuberns AI](https://kuberns-blogs.s3.ap-south-1.amazonaws.com/kuberns-home-page-new.png) [Kuberns](https://kuberns.com) was built for full-stack deployments, not retrofitted for them. When you push an Angular project, the Kuberns AI agent reads your codebase, detects the stack, identifies whether you are using SSR or building a static SPA, and configures everything automatically. No `netlify.toml`. No `_redirects` file. No `@netlify/angular-runtime` plugin to install and keep up to date. No manual environment variable wiring. **How it works:** **Step 1. Connect your GitHub repo** Link your repository to Kuberns. Every push to your configured branch triggers an automatic deploy. **Step 2. AI agent detects your Angular setup** The AI agent reads your project. It detects Angular, identifies your build output path, determines whether SSR is enabled, and prompts you to input the environment variables your app needs. You fill in the values. Kuberns handles everything else. **Step 3. Deploy and your app is live** Kuberns builds, configures routing, injects your environment variables securely, and deploys your app. Static assets go to the CDN. SSR runs on managed infrastructure. No plugins, no config files, no post-deploy surprises. Kuberns uses a pay-as-you-go model. You pay only for the compute you use, with no per-user pricing. [Start deploying your Angular app on Kuberns](https://dashboard.kuberns.com). > Curious what actually happens under the hood when you click deploy? Read [what one-click deployment does](https://kuberns.com/blogs/what-does-one-click-deployment-do/) and why removing manual config steps removes the most common source of deployment failures. Deploy Angular on Kuberns ## Why Kuberns Beats Netlify for Angular Deployments | | **Netlify** | **Kuberns** | |---|---|---| | Angular SPA setup | Manual redirect rule required | Automatic, no config needed | | Angular SSR support | Requires `@netlify/angular-runtime` plugin | Built-in, AI detects SSR automatically | | Environment variables | Manual dashboard entry, no prompting | AI agent surfaces required vars and prompts you | | Build config | Requires `netlify.toml` for non-default setups | Zero config files needed | | Pricing model | Credit-based, hard to predict | Pay-as-you-go, compute only | | Free tier | 300 credits/month, runs out fast in active dev | Pay only for what you use | | Scaling | Manual resource adjustment | Managed automatically | | Angular version updates | Plugin must be updated to stay compatible | AI agent handles framework changes | The fundamental difference is architecture. Netlify is a platform where you configure your app to fit the platform. Kuberns is a platform where the AI adapts to your app. For a static Angular portfolio, Netlify works. For a production Angular app with SSR, environment variables, real users, and active development, Kuberns removes the friction that Netlify introduces at every step. > Deploying other frameworks alongside your Angular app? See how [deploying Node.js on Netlify](https://kuberns.com/blogs/deploy-nodejs-on-netlify-and-why-kuberns-is-a-smarter-choice/) compares and why developers running mixed stacks move everything to one platform. ## Conclusion Netlify can deploy Angular apps. The steps are documented, the platform is established, and for a simple SPA it works fine. But the SPA routing workaround, the SSR plugin dependency, the unpredictable credit billing, and the lack of autoscaling add up to real friction for any Angular project beyond a hobby site. [Kuberns](https://kuberns.com) removes all of that. The AI agent handles your Angular stack end to end, from detecting your build config to prompting for environment variables to managing SSR infrastructure. You push your code. Kuberns handles the rest. Stop configuring platforms to fit your app. [Deploy your Angular app on Kuberns](https://dashboard.kuberns.com) and let the AI handle it from the first push. Deploy on Kuberns ## Frequently Asked Questions ### Q: Can you deploy Angular on Netlify? Yes. Netlify supports Angular deployments with automatic framework detection. For static Angular SPAs, the setup is straightforward. For Angular SSR apps, you need to install the `@netlify/angular-runtime` plugin and configure your project correctly, which adds complexity especially with Angular 17 and above. ### Q: What is the build command for Angular on Netlify? The build command for Angular on Netlify is `ng build`. The publish directory should be set to `dist//browser` for Angular 17 and above, or `dist/` for older versions. Netlify may auto-detect these settings when you connect your repo. ### Q: Why does my Angular app show a 404 error on Netlify after refresh? Angular uses client-side routing. When you refresh a page on a route like `/dashboard`, Netlify looks for a physical file at that path, finds nothing, and returns a 404. The fix is to add a redirect rule in a `_redirects` file or `netlify.toml`: `/* /index.html 200`. This tells Netlify to serve `index.html` for all routes and let Angular handle routing. ### Q: Does Netlify support Angular SSR? Yes, but it requires the `@netlify/angular-runtime` plugin. For Angular 17 and above, SSR is handled via Netlify serverless functions or Edge Functions. Angular 19 introduced a `server.ts` file that is incompatible with Netlify's default setup, so the plugin automatically swaps it with a compatible version during build. Ensure you have `@netlify/angular-runtime` version 2.2.0 or later. ### Q: Is Netlify free for Angular apps? Netlify has a free tier with 300 credits per month. In September 2025, Netlify switched to a credit-based billing model. Credits are consumed by build minutes, serverless function invocations, and bandwidth. For small hobby projects, the free tier is enough. For apps with active development or real traffic, costs can climb quickly and become hard to predict. ### Q: What is @netlify/angular-runtime and do I need it? The `@netlify/angular-runtime` is a Netlify build plugin that enables Angular SSR to work on Netlify's serverless infrastructure. You need it only if your Angular app uses server-side rendering. For static Angular SPAs, you do not need it. Install it with `npm install @netlify/angular-runtime`. ### Q: How do I set environment variables for Angular on Netlify? Set environment variables in the Netlify dashboard under Site Settings > Environment variables. For variables available at build time in Angular, reference them in your `environment.ts` files. For SSR runtime variables, they are available via `process.env` in your server code. For a clean production setup with no manual steps, see how [Kuberns handles environment variables automatically](https://kuberns.com/blogs/environment-variables-in-production/). ### Q: What is a better alternative to Netlify for Angular deployments? [Kuberns](https://kuberns.com) is a strong alternative for Angular deployments. Its AI agent detects your Angular stack automatically, handles all configuration without a `netlify.toml` or build plugin setup, injects environment variables securely, and supports both static and SSR Angular apps. Kuberns uses a pay-as-you-go model with no per-user pricing. --- - [More Deployment Guides articles](https://kuberns.com/blogs/category/deployment-guides/1/) - [All articles](https://kuberns.com/blogs/)