{"id":94,"date":"2020-08-08T00:20:52","date_gmt":"2020-08-08T00:20:52","guid":{"rendered":"https:\/\/barahasoft.com.np\/bsblog\/?p=94"},"modified":"2020-09-18T13:14:26","modified_gmt":"2020-09-18T13:14:26","slug":"universal-angular-for-ssr-in-angular-8-testing-post","status":"publish","type":"post","link":"https:\/\/barahasoft.com.np\/blog\/universal-angular-for-ssr-in-angular-8-testing-post\/","title":{"rendered":"Universal Angular for SSR in Angular 8"},"content":{"rendered":"\n<p>We know in default Angular App is not SEO friendly. In this post we will walk through how we can make our angular app SEO friendly using  server side rendering (SSR) using Universal Angular.<\/p>\n\n\n\n<h3>Why use Server Side Rendering (SSR)?<\/h3>\n\n\n\n<p>There are 3 reasons for create angular application with&nbsp;<a href=\"https:\/\/www.truecodex.com\/course\/angular-6\/angular-server-side-rendering\">server side rendering<\/a>.<\/p>\n\n\n\n<ul><li>Web crawlers through search engine optimization (SEO).<\/li><li>Improve performance on mobile.<\/li><li>Show the first page quickly.<\/li><\/ul>\n\n\n\n<h3>Step 1: Install the Angular CLI<\/h3>\n\n\n\n<p>Install the angular cli globaly using&nbsp;<code>npm<\/code>, open a terminal or console using following command for creating angular project.<\/p>\n\n\n\n<p><strong>Note:<\/strong>&nbsp;If already installed angular cli then skip step 1.<\/p>\n\n\n\n<p>Must be ensure before installation of angular cli&nbsp;<a href=\"https:\/\/nodejs.org\/en\/\" target=\"_blank\" rel=\"noreferrer noopener\">nodejs<\/a>&nbsp;should be installed.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\nnpm install -g @angular\/cli\n<\/code><\/pre>\n\n\n\n<h3>Step 2: Create Application<\/h3>\n\n\n\n<p>Create an application using below command.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\nng new mproject\n<\/code><\/pre>\n\n\n\n<h3>Step 3: Add Angular Universal in Your Application<\/h3>\n\n\n\n<p><strong>Angular Universal<\/strong>, a technology that renders Angular applications on the server. Install Angular Universal using following command.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\nng add @nguniversal\/express-engine --clientProject mproject\n<\/code><\/pre>\n\n\n\n<p>The command create following files.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\nsrc\/\n  main.server.ts             * bootstrapper for server app\n  app\/ ...                   application code\n    app.server.module.ts     * server-side application module\nserver.ts                    * express web server\ntsconfig.server.json         * TypeScript server configuration\nwebpack.server.config.js     * webpack server configuration\n<\/code><\/pre>\n\n\n\n<h3>Step 4: Run This Application<\/h3>\n\n\n\n<p>You can run Server Side Application using following commands.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\nnpm run build:ssr\nnpm run serve:ssr\n<\/code><\/pre>\n\n\n\n<p>Open a browser and navigate to&nbsp;<a rel=\"noreferrer noopener\" href=\"http:\/\/localhost:4000\/\" target=\"_blank\">http:\/\/localhost:4000\/<\/a>&nbsp;for access this application.<\/p>\n\n\n\n<p>This application working as nodejs project. You can also run this project using following command.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\nnode dist\/server\n<\/code><\/pre>\n\n\n\n<h3>Check This Application SEO Friendly<\/h3>\n\n\n\n<p>You can check this application SEO friendly. You can access your application using following commands. And Google access your web application pages someting like this.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\ncurl http:\/\/localhost:4000\n<\/code><\/pre>\n\n\n\n<h3>Change Port in SSR Angular Application<\/h3>\n\n\n\n<p>If you want to change port in Server Side Rendered Angular Application then edit&nbsp;<strong>server.ts<\/strong>&nbsp;file and go to line no 90&nbsp;<code>const PORT = process.env.PORT || 4000;<\/code>&nbsp;and chagne 4000 to 4005 (as you want).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\n\/**\n * *** NOTE ON IMPORTING FROM ANGULAR AND NGUNIVERSAL IN THIS FILE ***\n *\n * If your application uses third-party dependencies, you'll need to\n * either use Webpack or the Angular CLI's `bundleDependencies` feature\n * in order to adequately package them for use on the server without a\n * node_modules directory.\n *\n * However, due to the nature of the CLI's `bundleDependencies`, importing\n * Angular in this file will create a different instance of Angular than\n * the version in the compiled application code. This leads to unavoidable\n * conflicts. Therefore, please do not explicitly import from @angular or\n * @nguniversal in this file. You can export any needed resources\n * from your application's main.server.ts file, as seen below with the\n * import for `ngExpressEngine`.\n *\/\n\nimport 'zone.js\/dist\/zone-node';\n\nimport * as express from 'express';\nimport {join} from 'path';\n\n\/\/ Express server\nconst app = express();\n\nconst PORT = process.env.PORT || 4000;\nconst DIST_FOLDER = join(process.cwd(), 'dist\/browser');\n\n\/\/ * NOTE :: leave this as require() since this file is built Dynamically from webpack\nconst {AppServerModuleNgFactory, LAZY_MODULE_MAP, ngExpressEngine, provideModuleMap} = require('.\/dist\/server\/main');\n\n\/\/ Our Universal express-engine (found @ https:\/\/github.com\/angular\/universal\/tree\/master\/modules\/express-engine)\napp.engine('html', ngExpressEngine({\n  bootstrap: AppServerModuleNgFactory,\n  providers: &#91;\n    provideModuleMap(LAZY_MODULE_MAP)\n  ]\n}));\n\napp.set('view engine', 'html');\napp.set('views', DIST_FOLDER);\n\n\/\/ Example Express Rest API endpoints\n\/\/ app.get('\/api\/**', (req, res) => { });\n\/\/ Serve static files from \/browser\napp.get('*.*', express.static(DIST_FOLDER, {\n  maxAge: '1y'\n}));\n\n\/\/ All regular routes use the Universal engine\napp.get('*', (req, res) => {\n  res.render('index', { req });\n});\n\n\/\/ Start up the Node server\napp.listen(PORT, () => {\n  console.log(`Node Express server listening on http:\/\/localhost:${PORT}`);\n});\n\n<\/code><\/pre>\n\n\n\n<h3>Conclusion<\/h3>\n\n\n\n<p>In this tutorial we have learnt how to run Angular 8 application on the server using&nbsp;<strong><a href=\"https:\/\/angular.io\/guide\/universal\" target=\"_blank\" rel=\"noreferrer noopener\">Angular Universal<\/a><\/strong>. And how to make Angular application SEO friendly and change port of this application.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We know in default Angular App is not SEO friendly. In this post we will walk through how we can make our angular app SEO friendly using server side rendering (SSR) using Universal Angular. Why use Server Side Rendering (SSR)? There are 3 reasons for create angular application with&nbsp;server side rendering. Web crawlers through search [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":95,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":"Universal Angular,Angular,SSR,Apache","yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v15.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Universal Angular for SSR in Angular 8 - BS Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/barahasoft.com.np\/blog\/universal-angular-for-ssr-in-angular-8-testing-post\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Universal Angular for SSR in Angular 8 - BS Blog\" \/>\n<meta property=\"og:description\" content=\"We know in default Angular App is not SEO friendly. In this post we will walk through how we can make our angular app SEO friendly using server side rendering (SSR) using Universal Angular. Why use Server Side Rendering (SSR)? There are 3 reasons for create angular application with&nbsp;server side rendering. Web crawlers through search [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/barahasoft.com.np\/blog\/universal-angular-for-ssr-in-angular-8-testing-post\/\" \/>\n<meta property=\"og:site_name\" content=\"BS Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-08T00:20:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-09-18T13:14:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/barahasoft.com.np\/blog\/wp-content\/uploads\/2020\/08\/angularuniversal.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/barahasoft.com.np\/blog\/#website\",\"url\":\"https:\/\/barahasoft.com.np\/blog\/\",\"name\":\"BS Blog\",\"description\":\"Baraha Soft Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/barahasoft.com.np\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/barahasoft.com.np\/blog\/universal-angular-for-ssr-in-angular-8-testing-post\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/barahasoft.com.np\/blog\/wp-content\/uploads\/2020\/08\/angularuniversal.jpg\",\"width\":1200,\"height\":600,\"caption\":\"BarahaSoft\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/barahasoft.com.np\/blog\/universal-angular-for-ssr-in-angular-8-testing-post\/#webpage\",\"url\":\"https:\/\/barahasoft.com.np\/blog\/universal-angular-for-ssr-in-angular-8-testing-post\/\",\"name\":\"Universal Angular for SSR in Angular 8 - BS Blog\",\"isPartOf\":{\"@id\":\"https:\/\/barahasoft.com.np\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/barahasoft.com.np\/blog\/universal-angular-for-ssr-in-angular-8-testing-post\/#primaryimage\"},\"datePublished\":\"2020-08-08T00:20:52+00:00\",\"dateModified\":\"2020-09-18T13:14:26+00:00\",\"author\":{\"@id\":\"https:\/\/barahasoft.com.np\/blog\/#\/schema\/person\/4f97ce15b5eda1cd9fc64e3362dca065\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/barahasoft.com.np\/blog\/universal-angular-for-ssr-in-angular-8-testing-post\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/barahasoft.com.np\/blog\/#\/schema\/person\/4f97ce15b5eda1cd9fc64e3362dca065\",\"name\":\"Mahen\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/barahasoft.com.np\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2d90f77c4da8e61f15085bfd7b473714?s=96&d=mm&r=g\",\"caption\":\"Mahen\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","ads":{"ads-top":"","ads-top-link":"","ads-bottom":"","ads-bottom-link":"","ads-side-top":"","ads-side-top-link":"","ads-side-bottom":"","ads-side-bottom-link":""},"_links":{"self":[{"href":"https:\/\/barahasoft.com.np\/blog\/wp-json\/wp\/v2\/posts\/94"}],"collection":[{"href":"https:\/\/barahasoft.com.np\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/barahasoft.com.np\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/barahasoft.com.np\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/barahasoft.com.np\/blog\/wp-json\/wp\/v2\/comments?post=94"}],"version-history":[{"count":9,"href":"https:\/\/barahasoft.com.np\/blog\/wp-json\/wp\/v2\/posts\/94\/revisions"}],"predecessor-version":[{"id":119,"href":"https:\/\/barahasoft.com.np\/blog\/wp-json\/wp\/v2\/posts\/94\/revisions\/119"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/barahasoft.com.np\/blog\/wp-json\/wp\/v2\/media\/95"}],"wp:attachment":[{"href":"https:\/\/barahasoft.com.np\/blog\/wp-json\/wp\/v2\/media?parent=94"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/barahasoft.com.np\/blog\/wp-json\/wp\/v2\/categories?post=94"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/barahasoft.com.np\/blog\/wp-json\/wp\/v2\/tags?post=94"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}