How to make Angular A Full Stack Framework With Angular Universal (and Server Side Rendering For SEO).

Angular Universal

Angular 11 has many advantages. One of which being the ability to make Angular (a front end framework): into a Full Stack Framework with the Angular CLI and Server Side Rendering. This allows there to be an Node and Express project to be inside your of your Angular Project.

Doing this allows for there to be a server on in the Angular project. This is useful when using databases and REST APIs (or WebSockets). Simply speaking: this allows data to be stored. In this case well be storing the data on an Node server in Typescript.

So now there exist a few questions: how to make Angular a Full Stack Framework? AKA add the nodejs and expressjs server? What is Server Side Rendering? Why is Server Side Rendering good for SEO?

Server Side Rendering means the contents of the database on the nodejs server gets scraped by the search engine. Meaning if you don’t do this: you may end up with a webpage with no data which is bad in terms of SEO. So in order to have the contents of your database read by the search engine: do like so.

Step One:

Initialize a new Angular 11 project with the Angular CLI.

ng new myBlog

Step Two:

Add Angular Universals Express Engine to the project

ng add @nguniversal/express-engine

And boom! there’s your web server inside of an Angular Project. * Note it is in Typescript: how ever Typescript compiles to Javascript anyways.

A few other notes.

  • Any express routes can be added through the server instance.
ng g c myComponent
  • To build and serve the Full Stack Project look in the package.json file for the build and start scripts. Hint the start script can look like so:
npm run build:ssr && npm run serve::ssr

These articles pertain to Full Stack Development. Find Angular 2+ book here: https://www.lulu.com/account/projects/7dqz7r.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store