[{"data":1,"prerenderedAt":384},["ShallowReactive",2],{"article:adding-server-side-rendering-ssr-to-angular-app-using-nestjs":3,"\u002Fblog\u002Fadding-server-side-rendering-ssr-to-angular-app-using-nestjs-surround":373},{"id":4,"title":5,"author":6,"body":7,"date":361,"description":362,"extension":363,"image":364,"meta":365,"minRead":112,"navigation":366,"path":367,"published":366,"seo":368,"stem":369,"tags":370,"__hash__":372},"blog\u002Fblog\u002Fadding-server-side-rendering-ssr-to-angular-app-using-nestjs.md","Adding Server Side Rendering (SSR) to Angular App using NestJS","Baljeet Singh",{"type":8,"value":9,"toc":356},"minimark",[10,14,29,34,53,56,137,154,158,161,176,183,186,201,211,214,221,228,233,236,239,243,250,264,267,297,300,306,311,317,333,344,349,352],[11,12,13],"p",{},"Applications built with Angular are not Search Engine friendly by default. If you view the source of the Angular application you won't find any content there. So, our application pages won't appear in the search engine results. It may or may not be the behaviour you want. So, If you don't want the search engines to crawl through your content, you're good to go already. But, If there's a requirement like you have created a blog in Angular then you might want to make the Angular application SEO friendly.",[11,15,16,17,28],{},"Let's see how we can add SEO to our Angular app easily using ",[18,19,23,27],"a",{"href":20,"rel":21},"https:\u002F\u002Fnestjs.com\u002F",[22],"nofollow",[24,25,26],"strong",{},"n","estjs"," by following these steps.",[30,31,33],"h2",{"id":32},"creating-angular-app","Creating Angular App",[11,35,36,37,44,45,52],{},"Make sure you have ",[18,38,41],{"href":39,"rel":40},"https:\u002F\u002Fnodejs.org\u002F",[22],[24,42,43],{},"node"," and ",[18,46,49],{"href":47,"rel":48},"https:\u002F\u002Fcli.angular.io\u002F",[22],[24,50,51],{},"angular-cli","_ installed on you system.",[11,54,55],{},"To create new application you can run the following command,",[57,58,63],"pre",{"className":59,"code":60,"language":61,"meta":62,"style":62},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","ng new ng-nest-universal\nWould you like to add Angular routing? (y\u002FN) y\nWhich stylesheet format would you like to use? SCSS\n","bash","",[64,65,66,82,110],"code",{"__ignoreMap":62},[67,68,71,75,79],"span",{"class":69,"line":70},"line",1,[67,72,74],{"class":73},"sBMFI","ng",[67,76,78],{"class":77},"sfazB"," new",[67,80,81],{"class":77}," ng-nest-universal\n",[67,83,85,88,91,94,97,100,103,106],{"class":69,"line":84},2,[67,86,87],{"class":73},"Would",[67,89,90],{"class":77}," you",[67,92,93],{"class":77}," like",[67,95,96],{"class":77}," to",[67,98,99],{"class":77}," add",[67,101,102],{"class":77}," Angular",[67,104,105],{"class":77}," routing?",[67,107,109],{"class":108},"sTEyZ"," (y\u002FN) y\n",[67,111,113,116,119,122,125,127,129,131,134],{"class":69,"line":112},3,[67,114,115],{"class":73},"Which",[67,117,118],{"class":77}," stylesheet",[67,120,121],{"class":77}," format",[67,123,124],{"class":77}," would",[67,126,90],{"class":77},[67,128,93],{"class":77},[67,130,96],{"class":77},[67,132,133],{"class":77}," use?",[67,135,136],{"class":77}," SCSS\n",[138,139,140,148],"ul",{},[141,142,143,144,147],"li",{},"select ",[64,145,146],{},"y"," for routing",[141,149,143,150,153],{},[64,151,152],{},".scss"," for styles",[30,155,157],{"id":156},"running-angular-app","Running Angular App",[11,159,160],{},"We can change the directory to our newly created project and run the following command,",[57,162,164],{"className":59,"code":163,"language":61,"meta":62,"style":62},"ng serve --open\n",[64,165,166],{"__ignoreMap":62},[67,167,168,170,173],{"class":69,"line":70},[67,169,74],{"class":73},[67,171,172],{"class":77}," serve",[67,174,175],{"class":77}," --open\n",[11,177,178,179,182],{},"Here, ",[64,180,181],{},"--open"," will open the project directly in the browser. Otherewise, we have to manully open the url.",[11,184,185],{},"Alternatively, you can use the following shorthand command too,",[57,187,189],{"className":59,"code":188,"language":61,"meta":62,"style":62},"ng s -o\n",[64,190,191],{"__ignoreMap":62},[67,192,193,195,198],{"class":69,"line":70},[67,194,74],{"class":73},[67,196,197],{"class":77}," s",[67,199,200],{"class":77}," -o\n",[11,202,178,203,206,207,210],{},[64,204,205],{},"s"," stands for serve & ",[64,208,209],{},"-o"," flag stands for open.",[11,212,213],{},"After running this command, the output will look something like this.",[11,215,216],{},[217,218],"img",{"alt":219,"src":220},"null","\u002Fimg\u002Fchrome_2019-05-29_10-00-58.png",[11,222,223,224,227],{},"If we take a look at the source code by pressing ",[64,225,226],{},"Ctrl+U"," on windows or right clicking the application and click view source, we can see the following output.",[11,229,230],{},[217,231],{"alt":219,"src":232},"\u002Fimg\u002Fchrome_2019-05-29_10-02-17.png",[11,234,235],{},"Here, in the view source page we can see, inspite of we have some content on the page, we still don't see any of this content in the source code.",[11,237,238],{},"Now let's see how can we fix it, so that the content will appear in the view source, which will make the app search engine friendly.",[30,240,242],{"id":241},"adding-nestjsng-universal","Adding @nestjs\u002Fng-universal",[11,244,245,246,249],{},"With ",[64,247,248],{},"@nestjs\u002Fng-universal",", it is very easy to make the app engine friendly. We just need to run the following schematics command and it will take care of the rest.",[57,251,253],{"className":59,"code":252,"language":61,"meta":62,"style":62},"ng add @nestjs\u002Fng-universal\n",[64,254,255],{"__ignoreMap":62},[67,256,257,259,261],{"class":69,"line":70},[67,258,74],{"class":73},[67,260,99],{"class":77},[67,262,263],{"class":77}," @nestjs\u002Fng-universal\n",[11,265,266],{},"This schematic will install the npm packages and then will ask about the name of the application",[57,268,270],{"className":59,"code":269,"language":61,"meta":62,"style":62},"What is the name of your application? ng-nest-universal\n",[64,271,272],{"__ignoreMap":62},[67,273,274,277,280,283,286,289,292,295],{"class":69,"line":70},[67,275,276],{"class":73},"What",[67,278,279],{"class":77}," is",[67,281,282],{"class":77}," the",[67,284,285],{"class":77}," name",[67,287,288],{"class":77}," of",[67,290,291],{"class":77}," your",[67,293,294],{"class":77}," application?",[67,296,81],{"class":77},[11,298,299],{},"After that, It will create the server files. Our app should be able to now run against the server.",[11,301,302,303],{},"Following is the list of files the schematic command will ",[64,304,305],{},"create\u002Fupdate",[11,307,308],{},[217,309],{"alt":219,"src":310},"\u002Fimg\u002Fcode_-_insiders_2019-05-29_10-09-58.png",[11,312,313,314,316],{},"Now that we have installed ",[64,315,248],{}," in our Angular app. Now we can run the following command to serve the application,",[57,318,320],{"className":59,"code":319,"language":61,"meta":62,"style":62},"npm run serve\n",[64,321,322],{"__ignoreMap":62},[67,323,324,327,330],{"class":69,"line":70},[67,325,326],{"class":73},"npm",[67,328,329],{"class":77}," run",[67,331,332],{"class":77}," serve\n",[11,334,335,336,339,340,343],{},"After running this command, we can run our application on port ",[64,337,338],{},"4000","(",[64,341,342],{},"http:\u002F\u002Flocalhost:4000\u002F","). But if we view the source again, the output will look like following,",[11,345,346],{},[217,347],{"alt":219,"src":348},"\u002Fimg\u002Fchrome_2019-05-29_10-16-41.png",[11,350,351],{},"Here, you can see the content of the page that you weren't able to see before and now search engines can crawl through this content.",[353,354,355],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":62,"searchDepth":84,"depth":84,"links":357},[358,359,360],{"id":32,"depth":84,"text":33},{"id":156,"depth":84,"text":157},{"id":241,"depth":84,"text":242},"2019-05-27","In this article we will see how we can add Server Side Rendering (SSR) to Angular App using NestJS","md","\u002Fimg\u002Fangular-seo.jpg",{"featuredpath":217},true,"\u002Fblog\u002Fadding-server-side-rendering-ssr-to-angular-app-using-nestjs",{"title":5,"description":362},"blog\u002Fadding-server-side-rendering-ssr-to-angular-app-using-nestjs",[371],"Web Development","MHjLSa4C_HYTbWZbrnBrweoCrHTifFhtBE7_Jw1xEnE",[374,379],{"title":375,"path":376,"stem":377,"description":378,"children":-1},"Adding SEO support to Angular 6 application","\u002Fblog\u002Fadding-seo-support-to-angular-6-application","blog\u002Fadding-seo-support-to-angular-6-application","In this article we will take a look at how we can add SEO support in our Angular 6 Application",{"title":380,"path":381,"stem":382,"description":383,"children":-1},"AngularJS DOM manipulation with jqLite","\u002Fblog\u002Fangularjs-dom-manipulation-jqlite-324","blog\u002Fangularjs-dom-manipulation-jqlite-324","In this article we will see how we can have DOM manipulation inside AngularJS using jqLite",1775568354647]