Guides & Tutorials
Pre-rendering with Angular Universal
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!
Angular 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 using Netlify.
⏭ Words are hard, I get it. So, to skip all this you can check out the project repo, or click this button to immediately deploy the site to Netlify:
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
prerender command will build out the project then use 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
Netlify to Make it Live
Now that we have the project pre-rendered, let's make it live!
Tell Netlify What to Do
command = "npm run prerender"
functions = "./functions"
publish = "dist/angular-universal-pre-render/browser"
This project already had a
netlify.toml configuration file so we will update the
🐙 Check out the commit where we made this change in the example repo.
Deploy the Site
npm i netlify-cli -g
If the Netlify CLI 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
📓 To learn more about the deployment options for Angular, I've made this blog post just for you (and everyone else).
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. I can't wait to see what you create! Happy coding 👩🏻💻!