Angular Universal is used to render an angular application at server side.Normally Angular is a framework that is used to build Single Page Applications (SPA's) and executes on the browser which means angular application renders on client side , not on the server side.
Angular is not SEO friendly by default and You need your angular app to be working in Google search engines so that is the issue with angular and here I am here to solve this issue, for that we need to switch our angular application as Universal App so that we can implement server side rendering in our angular application.
Here we have a brand new angular project that i just created by using this command
ng new myAwesomeAppLet's see what is wrong with angular application that it is not a seo friendly.When we run any other Non-single page application on he browser then what we see there , we can see the complete content of our web pages there under the body tag. but in the case of Single Page Applications like Angular ,we only see our root selector that is holding all the source code behind the scene and does not render source code at client side on browser.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyAwesomeApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script src="runtime.js" defer></script><script src="polyfills.js" defer></script><script src="styles.js" defer></script><script src="vendor.js" defer></script><script src="main.js" defer></script></body>
</html>As you can see the yellow highlighted area in the code above.
The root selector holds nothing inside it and that means the application is not seo friendly and can not be crawled by google. We can make our angular application seo friendly with the help of angular universal and this is one of angular universal benefits.
Lets start implementing Server side rending using Angular Universal, for that we need to run some command to create some server side stuff using express and add the configuration to app module and server module. let run the command now:
ng add @nguniversal/express-enginesrc/
index.html app web page
main.ts bootstrapper for client app
main.server.ts * bootstrapper for server app
style.css styles for the app
app/ ... application code
app.server.module.ts * server-side application module
server.ts * express web server
tsconfig.json TypeScript base configuration
tsconfig.app.json TypeScript browser application configuration
tsconfig.server.json TypeScript server application configuration
tsconfig.spec.json TypeScript tests configurationHow to start the angular universal ?
Now all the setup for angular universal server side rendering is read for our angular application and we need to first build angular universal app by using this command below:
npm run build:ssrhere we have now folder created inside dist/myAwesomeApp
browser
server
Inside browser folder we have all JavaScript bundle that is necessary for our client side rendering and inside server folder we have server side stuff that will be responsible to run the JavaScript code from server side
let's run the Angular Universal app
Lets run this command in the commandline:
npm run serve:ssrNow you can see you angular universal app in action , Our app has now faster home page and the content of the html under <app-root></app-root> selector now visible in the browser you can view this by right clicking on the page and click view source code. this time you can see the used css and html is loaded in the app-root tag.
<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<title>MyAwesomeApp </title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.3ff695c00d717f2d2a11.css"><style ng-transition="serverApp"></style><style ng-transition="serverApp">.toolbar[_ngcontent-sc16] {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60px;
display: flex;
align-items: center;
background-color: #1976d2;
color: white;
font-weight: 600;
}
@media screen and (max-width: 575px) {
svg#rocket-smoke[_ngcontent-sc16] {
display: none;
visibility: hidden;
}
}</style></head>
<body>
<app-root _nghost-sc16="" ng-version="10.0.14"><div _ngcontent-sc16="" role="banner" class="toolbar"><img _ngcontent-sc16="" width="40" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="><span _ngcontent-sc16="">Welcome</span>$lt;div _ngcontent-sc16="" class="spacer"></div>$lt;a _ngcontent-sc16="" aria-label="Angular on twitter" target="_blank" rel="noopener" href="https://twitter.com/angular" title="Twitter"><svg _ngcontent-sc16="" id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><rect _ngcontent-sc16="" width="400" height="400" fill="none"></rect><path _ngcontent-sc16="" d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23" fill="#fff"></path></svg></a></div><footer _ngcontent-sc16=""> Love Angular? <a _ngcontent-sc16="" href="https://github.com/angular/angular" target="_blank" rel="noopener"> Give our repo a star. <div _ngcontent-sc16="" class="github-star-badge"><svg _ngcontent-sc16="" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="material-icons">$lt;path _ngcontent-sc16="" d="M0 0h24v24H0z" fill="none"></path><path _ngcontent-sc16="" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path></svg> Star </div></a><a _ngcontent-sc16="" href="https://github.com/angular/angular" target="_blank" rel="noopener">$lt;svg _ngcontent-sc16="" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="material-icons">$lt;path _ngcontent-sc16="" d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2"></path><path _ngcontent-sc16="" d="M0 0h24v24H0z" fill="none"></path></svg></a></footer>$lt;router-outlet _ngcontent-sc16=""></router-outlet></app-root>
<script src="runtime.e227d1a0e31cbccbf8ec.js" defer="">$lt;/script>$lt;script src="polyfills.a4021de53358bb0fec14.js" defer=""></script><script src="main.81da75e4d35b2c841f7b.js" defer=""></script>
</body>$lt;/html>Summary:
In this section we have learned how we can make our angular app seo friendly with angular universal server side rendering technique. we have found that using server side rendering is much fun , we ran some commands in the terminal and changed our angular application into universal application easily.
In order to run this project after making any changes ,
we have to use these two commands:
npm run build:ssr
npm run serve:ssrnpm run dev:ssr
npm run serve:ssr
.jpg)
0 Comments