Building Angular 6|7 Universal Apps (Server Side Rendering)
In this post we will give you information about Building Angular 6|7 Universal Apps (Server Side Rendering). Hear we will give you detail about Building Angular 6|7 Universal Apps (Server Side Rendering)And how to use it also give you demo for it if it is necessary.
Angular 6|7 allows developers to build modern SPAs (or Single Page Apps) which are considered the modern apps of our time. SPAs have many advantages over old traditional apps such as:
- The client is responsible of doing most rendering. For the server its major role is serving the app files to the client.
- No page refresh.
- No need for reaching the server for every action.
- Easy navigation between different pages.
- Improved performance.
- No extra requests to server to load new pages.
- User friendliness etc.
As seen, SPAs have a lot of advantages, particularly an improved User Experience, which is what matters the most when building apps. But they have a major SEO problem, they can’t be indexed by Search engines.
So to make sure, every search engine and social network out there can recognize your website content, you needto implement the old server side rendering or create what we call Universal apps which are SPAs with server side rendering.
Getting started with Angular Universal
Angular Universal is a technology that allows server side rendering for Angular apps.
Thanks to Angular universal, you can build apps that have the best features of both worlds such as:
- Performance: Since your app is rendered on the server, first time users will quickly see a rendered view without waiting for the client to complete rendering.
- SEO friendliness: Many search engines and social networks can read only plain HTML so to optimize your website for these engines you need to have server side rendering
- Social networks friendliness: By enabling server side rendering, social media websites can correclty display previews of your apps or websites when sharing links.
Starting from Angular 4.0.0 the majority of Angular Universal code is located in the
Creating an Angular 6 Project
Now let’s create an Angular 6 demo project to show how to add server side rendering.
You need to have Angular CLI 6 installed then open your terminal and run:
$ ng new angular-universal-demo$ cd angular-universal-demo
Next install Angular Universal located in the
$ npm install --save @angular/platform-server
You also need to install the
@angular/animations package otherwise you’ll get errors:
$ npm install --save @angular/animations
Now, open the
src/app/app.module.ts file then update it to reflect these changes:
Now you need to add a server app module so go ahead and create a new TypeScript file
src/app/app.server.module.ts then copy and paste the following code:
Next create an Express server in the
src/tsconfig.app.json file and exclude the
Next, open the
tsconfig.json and add
Installing ts-node and Running your Demo Server
Now you need to install
ts-node via npm:
$npm install -D ts-node
Next, open the
package.json file and add these two scripts:
"prestart":"ng build --prod && ngc","start":"ts-node src/server.ts"
You can now test your demo by running
$ npm run start
You should be able to visit
http://localhost:4000 with your browser to see your old message app works!.
You can find the source code of this demo at GitHub
We have seen how to build Universal SPA application with Angular 6 which can be rendered on the server side.
Hope this code and post will helped you for implement Building Angular 6|7 Universal Apps (Server Side Rendering). if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs