Angular 4 SEO Tutorial (Universal + Angular CLI)

Github repo for this tutorial:

Code credit:

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS weekly!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

[PuneetSingh]

The 2nd part was helpful where you actually explained what the video is for 👍🏽

[robert-mud]

Great tutorial, I've been asking myself how this was done by others. Thanks!

[loarca]

Thank you so much! I was struggling a little with the Angular documentation because it doesn't show how to use the angular cli with universal and all the steps are really confusing. I was looking for some solution with the cli, and this is the simplest way so far. I hope the Angular team makes this automatically with just one command in the future.

[JayabalBalan]

Great tutorial man, a few days back I was thinking how to add SEO title.

[florinsimion]

Awesome tutorial Gary...saved me a lot of time as I think CLI is a must in Angular development. btw...any idea on how to deploy the app on server for production?

[MStoica]

Thank you for this!
There's one setback though... I quickly added a lazy module. When loading page on that route, the content isn't rendered server-side.

[juliettetworsey]

Thank you so much for this awesome tutorial!

[lord_rimuru_sama]

Thanks for the wonderful tutorial, I just have a one question though. Will these work the same way on dynamic data? if Title, Description and Keywords needs to be pulled from a DB via API?

[fabriziotofanelli]

another great video, Gary =)

And, a quick question... how to use this using firebase? Because using static files is easy, but using lazy loading and and modules and cache? How to pre-render this using firebase and make google and Facebook read my page dynamically?? Cheers =)

[talitalira]

Thank you for the tutorial! Can you tell me if it works with dynamic metas (with data came from an API)? My doubt is because the api calls will be rendered after the meta tags, that are in the constructor. So do you know if it is gonna work? Or if is there some other way to do that? Thank you!

[userhjg]

What about lazy loading modules? Will it work?

[tomaszcomasz]

I had download project from Your github and on npm start i get error: Error at Argument of type '"app works!"' is not assignable to parameter of type 'Expected<Promise<string>>'.

[Radherohit]

How to build SSR project and deploy on server ❓

[TodoProcesos]

Hi! Thanks for share you knowledge. I try this applying lazy loading but pre-render don't works. Have you any tip for this?

[tntg]

When I run ng build --prod && ngc it compiles fine but it throws 2 errors :
Error File not found.
Any ideas ? Do we need to add an index.ts file?

[joantonio]

So, if I understand correctly, an angular 2 and 4 app, when running, if you check the source element you will only see whatever you put in the index page only? Then in that case universal is by default in angular 5 since whenever I check my source code in angular 5, I see actually the component

[exxavectragnm]

Hi DesignCourse, how to set metadata inside api call ? or in a promise or rxjs subscribe ? thanks

[cristianscript]

so instead of sending http requests? how do you handle json communication between client and server.js, ?

[BogacGuven]

Well done. Pre-render explanation would be nice too.

[umeshramchandani]

do we like need to change our server side code too ? and can we use angular with php like we used to before as in just generating the js and and html and hosting it on a php server with other things. Thanks alot thou cool video