{
    "componentChunkName": "component---src-templates-blog-post-js",
    "path": "/how-to-work-with-angular-universal/",
    "result": {"data":{"site":{"siteMetadata":{"title":"CrewCode Solutions"}},"markdownRemark":{"id":"735286e7-b398-58cf-a138-0a8404d5ee5e","excerpt":"In this article iam gonna explain you how you can add angular universal for server side rendering of your angular application. Angular universal generally helps…","html":"<p>In this article iam gonna explain you how you can add angular universal for server side rendering of your angular application. Angular universal generally helps us in server side rendering of your angular application</p>\n<h4>Step 1: Adding angular universal to your angular application</h4>\n<ul>\n<li>In order to add angular universal you need to run following command by navigating to your angular project folder</li>\n</ul>\n<pre><code class=\"language-js\">/*Client project you will find inside angular.json file under projects json */\n\nng add @nguniversal/express-engine --clientProject ng-complete-guide-update\n</code></pre>\n<ul>\n<li>\n<p>Once above command finish running you will see certain files generated inside src folder that is <strong><em>src/app.server.module.ts</em></strong></p>\n</li>\n<li>\n<p>Next make sure that you have package <strong><em>@nguniversal/module-map-ngfactory-loader</em></strong> installed run below command to install the same</p>\n</li>\n</ul>\n<pre><code class=\"language-js\">npm install --save @nguniversal/module-map-ngfactory-loader\n</code></pre>\n<ul>\n<li>In order use nestjs for server side rendering in your angular universal application you can use below command</li>\n</ul>\n<pre><code class=\"language-js\">ng add @nestjs/ng-universal\n</code></pre>\n<h4>Step 2: Build and run your app using angular universal</h4>\n<ul>\n<li>Go to package.json file you will see some new command added for example <strong><em>build:ssr</em></strong> run the command</li>\n</ul>\n<pre><code class=\"language-js\">npm run build:ssr\n</code></pre>\n<ul>\n<li>Once above build command is completed run below command to serve the application using angular universal</li>\n</ul>\n<pre><code class=\"language-js\">npm run serve:ssr\n</code></pre>\n<ul>\n<li>Once above command finishes running go to your browser and type url \"<a href=\"http://localhost:4000\">http://localhost:4000</a>\" you will see your angular application running using server side rendering</li>\n</ul>","fields":{"slug":"/how-to-work-with-angular-universal/"},"frontmatter":{"title":"How to add angular universal for server side rendering in your angular application","date":"October 01, 2022","description":"In this article i will explain you can add angular universal for server side rendering of angular application","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/angular-universal.jpeg"}},"previous":{"fields":{"slug":"/how-to-create-firebase-function/"},"frontmatter":{"title":"How to create, deploy and work with firebase function","date":"September 30, 2022","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/firebase-node.jpeg"}},"next":{"fields":{"slug":"/install-mongodb-apple-m1-chip/"},"frontmatter":{"title":"Install MongoDB on Apple M1 chip","date":"October 10, 2022","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/mongo.jpg"}}},"pageContext":{"id":"735286e7-b398-58cf-a138-0a8404d5ee5e","previousPostId":"b4fc562c-2e59-5977-afbb-8112e8ed3064","nextPostId":"963cc0ea-ea66-5deb-89f2-73b457948543"}},
    "staticQueryHashes": ["3860684146"]}