Angular 4 SEO Tutorial (Universal + Angular CLI)



Views:44122|Rating:4.82|View Time:17:34Minutes|Likes:651|Dislikes:24
Written tutorial here:
for more Angular.

Github repo for this tutorial:

Code credit:

– – – – – – – – – – – – – – – – – – – – – –

Subscribe for NEW VIDEOS weekly!

My site:
My personal FB account:
Coursetro FB:
Coursetro’s Twitter:

Join my Discord!
^-Chat with me and others

– – – – – – – – – – – – – – – – – – – – – –

Who is Gary Simon? Well, I’m a full stack developer with 2+ decades experience and I teach people how to design and code. I’ve created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

Now, I focus all of my time and energy on this channel and my website Coursetro.com.

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

You may also like...

25 Responses

  1. Juhil Kamothi says:

    does it work fine in PWA apps?

  2. Est Essaouira says:

    thank's for this free tutorial, but u didn't talk about seo !!

  3. Craig Freeman says:

    this is no longer working – but great tutorial

    src/server.ts(5,42): error TS2307: Cannot find module '../dist/ngfactory/src/app/app.server.module.ngfactory'.

  4. P C says:

    Is it possible to do a server side render with node.js but use any other server like .net core or php? Now it is a headache if my app based on any older (just 1-2 years ago) technology.

  5. Mahesh Pratap says:

    error TS2307: Cannot find module '../dist/ngfactory/src/app/app.server.module.ngfactory'. getting this error in angular 6 while doing npm run start.
    I guess "genDir" is not working in angular 6. Do you have any solution for this ?

  6. Chris Wilson says:

    This doesn't work. The ngfactory module never gets created so the express server craps out.

  7. cleve gomes says:

    Thanks for this tutorial.
    In my application I have external libraries like intlTelInput that i use and when i try to build angular universal i get an error
    ReferenceError: window is not defined. I cannot modify the intleTellnput . Is there a way to fix this issue

  8. Ranjit Redekar says:

    Thanks for great tutorial :).
    Angular universal or Rendertron which is better server-side rendering for Angular 5 with nodejs .?

  9. Nafeo Alam says:

    src/server.ts(5,42): error TS2307: Cannot find module '../dist/ngfactory/src/app/app.server.module.ngfactory'.

    npm ERR! Windows_NT 10.0.16299
    npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "start"
    npm ERR! node v6.11.0
    npm ERR! npm v3.10.10
    npm ERR! code ELIFECYCLE
    npm ERR! [email protected] prestart: `ng build –prod && ngc`
    npm ERR! Exit status 1
    Failed at the [email protected] prestart script 'ng build –prod && ngc'.
    npm ERR! Make sure you have the latest version of node.js and npm installed.
    npm ERR! If you do, this is most likely a problem with the ang4-seo package,
    npm ERR! not with npm itself.
    npm ERR! Tell the author that this fails on your system:
    npm ERR! ng build –prod && ngc
    npm ERR! You can get information on how to open an issue for this project with:
    npm ERR! npm bugs ang4-seo
    npm ERR! Or if that isn't available, you can get their info via:
    npm ERR! npm owner ls ang4-seo
    npm ERR! There is likely additional logging output above.

    npm ERR! Please include the following file with any support request:
    npm ERR! H:Demoang4-seonpm-debug.log

    Having this. Help ??

  10. Ma liberté financière says:

    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

  11. Abhishek Gangwar says:

    Dear Sir,
    I am facing an error after every things setup in project for server-side rendering. i am attaching a screen sot of it. please help me out as soon as possible.
    Url: https://lh3.googleusercontent.com/-041V2hXWgVI/WsOFTXo6JII/AAAAAAAAAsU/LxiFtOQ0VZc91eSmvXwXZDm4otwDkIQFACL0BGAYYCw/h1080/2018-04-03.png

    Thank's & Regards
    Abhishek

  12. Abhishek Sharma says:

    i am getting this error in while running npm run start

    src/server.ts(5,42): error TS2307: Cannot find module '../dist/ngfactory/src/app/app.server.module.ngfactory'.

  13. Dinesh Girase says:

    How to deploy angular universal app on azure app service?

  14. Tammy winslow says:

    it gives error Cannot find module '../dist/ngfactory/src/app/app.server.module.ngfactory' 🙁

  15. KASOIR ABBAS says:

    I have a problem!!!
    in prestart..I Can't solve it.

  16. Silvana Donato says:

    useful quick tutorial

  17. Yassine Fathi says:

    what cmd emulator are you using?

  18. Talita lira says:

    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!

  19. Rawvvy says:

    hello, i have a big issue with the NGC command, when i try to build the project i receive an error wich is because my project uses sass/scss and NGC supports only css. How can i compile my scss to css before build the project with NGC? thank you very much.

  20. 10X SAS says:

    i don't know if you guys reads comments but would like to ask how to have SEO friendly urls with this example: "http://localhost:52990/detail/60006" where 60006 is the product id?

  21. Gunama Putra says:

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

  22. Haider Ali says:

    HI, I am following your video instruction but i am facing issue when i run "npm run start".
    can you please help me out ?
    ng build not generating ngfactory directory in dist. 🙁
    Error :
    src/server.ts(5,42): error TS2307: Cannot find module '../dist/ngfactory/src/app/app.server.module.ngfactory'.

    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! [email protected] prestart: `ng build –prod && ngc`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the [email protected] prestart script.

  23. The Everything says:

    Added this on my favorite list 😉

  24. Marcelo Wanderley says:

    Hi, To use in production is it necessary to upload all the source of the application or just the dist folder? It was not very clear how to run in production. Beautiful Article.

  25. manish seharawat says:

    getting error in module ts [ts] Property 'withServerTransition' does not exist on type 'typeof BrowserModule'.

Leave a Reply

Your email address will not be published. Required fields are marked *