--- title: "Pre-rendering with Angular Universal | Netlify" description: "In this post, we’ll walk thru the quick 2-step process of pre-rendering with Angular Universal then deploy it to Netlify." source: "https://www.netlify.com/blog/2021/02/08/pre-rendering-with-angular-universal/" last_updated: "2026-07-10T22:28:19.000Z" --- This is going to be a quick one because pre-rendering with Angular Universal and deploying to Netlify are nice and easy. Being able to pre-render parts of your Angular application will give you content on the page for quick interaction for your users and something for the bots to crawl for better SEO. > 📓 To learn more about pre-rendering and bots [check out this blog post!](https://www.netlify.com/blog/2016/11/22/prerendering-explained/?utm_source=blog&utm_medium=prerender-au-tzm&utm_campaign=devex) [Angular Universal](https://angular.io/guide/universal) is Angular’s answer to server-side rendering and pre-rendering your applications. It has a hybrid approach to rendering: pre-render what you can at build time then send some parts to be rendered into HTML on a server at request time. Here, we’re going to look at how we can run a command to pre-render routes and deploy them to a [CDN](https://jamstack.org/glossary/cdn/) using Netlify. > ⏭ Words are hard, I get it. So, to skip all this you can check out [the project repo](https://github.com/tzmanics/angular-universal-pre-render), or click this button to immediately deploy the site to Netlify: [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://github.com/tzmanics/angular-universal-pre-render&utm_source=github&utm_medium=ng-prerender-tzm&utm_campaign=devex) ## That Whole Pre-rending Part We only need to do two things to pre-render our existing Angular applications with Angular Universal. ### Step 1. Add Angular Universal `ng add @nguniversal/express-engine` This command will add Angular Universal by adding a few files to manage the new server for SSR. It also adds a few scripts to the `package.json`. One of those scripts runs the pre-rendering process which we’ll talk about next! ### Step 2. Pre-rendering with Angular Universal `npm run prerender` Running the `prerender` command will build out the project then use [guess-parser](https://www.npmjs.com/package/guess-parser) to guess the application routes. Each of these routes is pre-rendered in HTML and that HTML file is saved in its own directory in `dist//browser/`. ![pre-rendered assets file structure](/v3/img/blog/pre-render-file-struct.jpg "pre-rendered assets file structure") ## Netlify to Make it Live Now that we have the project pre-rendered, let’s make it live! ### Tell Netlify What to Do ``` [build] command = "npm run prerender" functions = "./functions" publish = "dist/angular-universal-pre-render/browser" ``` This project already had a [`netlify.toml` configuration file](https://docs.netlify.com/configure-builds/file-based-configuration/?utm_source=blog&utm_medium=au-prerender-tzm&utm_campaign=devex) so we will update the `command` and `publish` strings. > 🐙 Check out the commit where we made this change [in the example repo](https://github.com/tzmanics/angular-universal-pre-render/commit/2482169ad6f7603cbd2f0501fafbeb16f7dd2242). ### Deploy the Site `npm i netlify-cli -g` `netlify init` `netlify open` If the [Netlify CLI](https://docs.netlify.com/cli/get-started/?utm_source=blog&utm_medium=au-prerender-tzm&utm_campaign=devex) isn’t already installed, we’ll do that now. Once it’s installed we can run `netlify init` to hook it up to a Netlify account and deploy it. With that setup, any time we push new code a deploy will be triggered. The `netlify open` command will open a browser window showing the project dashboard. Once the project is built we can open the browser dev tools and [throttle the connection](https://css-tricks.com/throttling-the-network/) or [disable JavaScript](https://developers.google.com/web/tools/chrome-devtools/javascript/disable) to see how quickly the pre-rendered content still gets served. ![screenshot of final site homepage](/v3/img/blog/final-site.jpg "final site homepage") > 📓 To learn more about the deployment options for Angular, I’ve made [this blog post](https://www.netlify.com/blog/2019/09/23/first-steps-using-netlify-and-angular/?utm_source=blog&utm_medium=au-prerender-tzm&utm_campaign=devex) just for you (and everyone else). ## Your Turn With that, you have all the resources you need to jump-start your Jamification process on your Angular site ;). Always feel free to check-in with other folks in the [Netlify Community](https://community.netlify.com/?utm_source=blog&utm_medium=prerender-au-tzm&utm_campaign=devex). I can’t wait to see what you create! Happy coding 👩🏻‍💻! ### Share - [X (fka Twitter)](https://twitter.com/intent/tweet?text=Pre-rendering with Angular Universal&url=https://www.netlify.com/blog/2021/02/08/pre-rendering-with-angular-universal//) - [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2021%2F02%2F08%2Fpre-rendering-with-angular-universal%2F%2F) - [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2021/02/08/pre-rendering-with-angular-universal//) - [Bluesky](https://bsky.app/intent/compose?text=Pre-rendering with Angular Universal+https://www.netlify.com/blog/2021/02/08/pre-rendering-with-angular-universal//) * * * ### Tags - [Angular](/blog/tags/angular/) - [Pre-render](/blog/tags/Pre-render/) ## 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/)