---
title: "Deploy Your Angular v17 Apps to Netlify"
description: "Angular v17 is out now with all kinds goodies to make your apps faster and you can deploy that fast app to Netlify today! (or tomorrow if you’re a procrastinator)"
source: "https://www.netlify.com/blog/deploy-your-angular-v17-apps-to-netlify/"
last_updated: "2026-07-10T22:02:07.000Z"
---
Have you seen all these great announcements about the new Angular v17 release? This one is my favorite (I won’t say how many times I’ve watched it). The team has done a lot to improve developer experience, performance, and really help you do more, faster.

> Angular v17.  
>   
> The framework you love, with a fresh new look, and:  
> 🦥 deferrable views  
> ⚡️ up to 90% faster, intuitive built-in control flow  
> 🏎️ up to 87% faster build times with hybrid rendering  
> 🏗️ Vite + esbuild builds  
> \+ more![https://t.co/mBtYROh2u7](https://t.co/mBtYROh2u7) [\[pic.twitter.com/5DTYNOqfJQ\](http://pic.twitter.com/5DTYNOqfJQ)](https://t.co/5DTYNOqfJQ)
> 
> — Angular (@angular) [November 8, 2023]([https://twitter.com/angular/status/1722270234730692797?ref_src=twsrc^tfw]\(https://twitter.com/angular/status/1722270234730692797?ref_src=twsrc%5Etfw\))

As you know, Netlify also loves great developer experience that let’s you get your work done fast. For example, with this lovely Deploy to Netlify button you can click to deploy a new Angular v17 app to Netlify before even having to read the rest of this amazing blog post!

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/tzmanics/ng17-on-netlify)

## What’s New?

The Angular team has done a ton of great work to improve the developer experience like improving syntax (thanks to [community feedback](https://github.com/angular/angular/discussions/50719)), offering better devtools, and creating a source-of-truth developer hub at [angular.dev](https://angular.dev/). They have also made Angular faster with features like hybrid rendering, deferrable views, default [hydration](https://angular.dev/guide/hydration), and improved build pipeline.

> ************************************Hybrid Rendering:************************************ pre-rendering || server-side generation (SSG) for static routes & server-side rendering (SSR) for dynamic routes

And how could I forget: a new logo. Who doesn’t love a good gradient?

![angular gradient logo](https://cdn.sanity.io/images/o0o2tn5x/production/e83bba7545de7694a2512404642abe683315f21a-541x572.png?auto=format)

![angular gradient gif](https://cdn.sanity.io/images/o0o2tn5x/production/361ec677dcf9ef92135a0b1364d1601000002a1c-1360x425.gif?auto=format)

[Check out Minko’s post](https://blog.angular.io/introducing-angular-v17-4d7033312e4b) to get all the details of all these awesome changes. In the meantime let’s actually see how to get your amazing hybrid-rendered apps into the world!

## Let’s Deploy 🚀!

Our very own, talented [Simon Knott](https://github.com/Skn0tt) has created the [Netlify Angular runtime plugin](https://github.com/netlify/angular-runtime) that does all the work behind the scenes to make sure that all the lovely parts of your app know where to be rendered and when. So, all we have to do is the fun part of building out the whole app then follow a few simple steps to deploy.

### Deploy with the CLI

You can do a lot with Angular inside the terminal and you can stay there to deploy your app using the [Netlify CLI](https://docs.netlify.com/cli/get-started/).

```
npm install netlify-cli -g
```

Once you have the CLI set up you can run the `netlify init` command from your project directory to either create a new Netlify project or link it to an existing project. It will ask you:

-   To choose which team you’d like add the site to
-   For a site name (you can let it choose a random one and change it later in your site settings)
-   The Angular app build command (`ng build`)
-   The directory to publish (`dist/<site name>/browser` which Netlify will autofill for you)
-   Finally, if you want to save this info in a Netlify configuration file (`netlify.toml`)

![cli prompts](https://cdn.sanity.io/images/o0o2tn5x/production/1a9eaff468f9e4ea6a431be17e613b7c83e62592-1516x1010.png?auto=format)

After the final step, Netlify will deploy your site for you. Then, on any subsequent code change, pushes to GitHub it will automatically re-build and deploy for you (you can also change this in your deploy settings).

If you run `netlify open`, Netlify will open your site dashboard in your browser so you can see all your site information. Or, you can click on the links from the ‘Site Created’ output.

### Deploy with the Netlify UI

Rather push some buttons on a pretty UI (_I get that, I’ve always been known to push buttons_)? We make it easy to deploy your Angular site by clicking ‘Add new site’ on your ‘Team Overview’ or ‘Sites’ page.

![add new site](https://cdn.sanity.io/images/o0o2tn5x/production/91cc6082e5effeaab722eee6e324df05dcdd591c-2212x1260.png?auto=format)

You can choose from GitHub, GitLab, Bitbucket, or Azure DevOps, then choose the project you’d like to create a site from.

![pick project](https://cdn.sanity.io/images/o0o2tn5x/production/1d8952c5dfab760d5fb35459f1d12eeeb9e71fbd-2212x1250.png?auto=format)

It will automatically detect that you’re deploying a Angular project (_I mean look at that beautiful new logo_) and set the `Build Command` to `ng build`. Then, set the ‘Publish Directory’ to include your project name in the `dist/<project name/browser` path. Click the customized ‘Deploy’ button and get ready to float on cloud 9 (or whatever the nearest server in the CDN is named).

![project info](https://cdn.sanity.io/images/o0o2tn5x/production/a37287a5a138e2656d309a4c1d2325d116dc5c1a-2216x1250.png?auto=format)

If you take a look at your deploy logs, you’ll see that the Netlify Angular Runtime plugin is being used to pre-render your static routes and uses Netlify Edge Functions to handle the server-side rendering. You’re welcome 😘.

![logs](https://cdn.sanity.io/images/o0o2tn5x/production/75b30a58ee1266975b416192a52ba2cc37d9ed07-2210x1250.png?auto=format)

## Release the Angular

Well, don’t let **me** keep you, go forth and do all the great things you know, _I know_, and those other people that also think you’re awesome know you can do! Specifically, with Angular apps in this case.

We can’t wait to see what you create. Happy coding 👩🏻‍💻!

## Resources for the Road

-   [https://angular.dev/](https://angular.dev/)
-   [https://blog.angular.io/](https://blog.angular.io/)
-   [Docs: Angular on Netlify](https://docs.netlify.com/integrations/frameworks/angular/)
-   [Netlify Angular Runtime](https://github.com/netlify/angular-runtime)

### Share

-   [X (fka Twitter)](https://twitter.com/intent/tweet?text=Deploy Your Angular v17 Apps to Netlify&url=https://www.netlify.com/blog/deploy-your-angular-v17-apps-to-netlify/)
-   [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2Fdeploy-your-angular-v17-apps-to-netlify%2F)
-   [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/deploy-your-angular-v17-apps-to-netlify/)
-   [Bluesky](https://bsky.app/intent/compose?text=Deploy Your Angular v17 Apps to Netlify+https://www.netlify.com/blog/deploy-your-angular-v17-apps-to-netlify/)

* * *

### Tags

-   [Angular](/blog/tags/angular/)

## Keep reading

![](/_astro/3f45eb6eda4ea8814be310e3df4a7883a5bd9ba0-1200x675_ZcBDUS.webp)

Guides & Tutorials May 15, 2026

[

### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend)

](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend)

-   ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp)
    
    Nahrin Jalal
    

![](/_astro/8fe9e8a23f944c9912003233d99a2df7fee637cf-1600x900_Z1gMhmf.webp)

Guides & Tutorials May 15, 2026

[

### Tracking AI search traffic: how to use Netlify Log Drains to maximize AEO

](/blog/tracking-ai-search-traffic)

-   ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp)
    
    Nahrin Jalal
    

## Recent posts

News & Announcements June 25, 2026

[

### Netlify Functions, designed for Agent Experience

](/blog/netlify-functions-designed-for-agent-experience)

-   ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp)
    
    Eduardo Bouças
    

News & Announcements June 24, 2026

[

### How we measure Netlify’s Agent Experience

](/blog/how-we-measure-netlify-agent-experience)

-   ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp)
    
    Sean Roberts
    

Guides & Tutorials May 15, 2026

[

### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend)

](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend)

-   ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp)
    
    Nahrin Jalal
    

![](/_astro/3f255b372fa958df35802666ee33b4609b2d71bd-1200x1586_1VtE2D.webp)

### How do the best dev and marketing teams work together?

[Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)