How to make Angular A Full Stack Framework With Angular Universal (and Server Side Rendering For SEO).
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.
Initialize a new Angular 11 project with the Angular CLI.
ng new myBlog
Add Angular Universals Express Engine to the project
ng add @nguniversal/express-engine
A few other notes.
- Any express routes can be added through the server instance.
- To add new components or services to the project you have to add a special character that shows when one types in the regular command with the Angular CLI. Hint: it goes as follows:
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