Angular 4 SEO Tutorial (Universal + Angular CLI)


[ad_2]

Written tutorial here: https://goo.gl/UR9u8Y https://coursetro.com for more Angular. Github repo for this tutorial: https://github.com/designcourse/angular-seo

source
[ad_1]

49 replies
  1. P C
    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.

    Reply
  2. Mahesh Pratap
    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 ?

    Reply
  3. cleve gomes
    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

    Reply
  4. Nafeo Alam
    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! ang4-seo@0.0.0 prestart: `ng build –prod && ngc`
    npm ERR! Exit status 1
    Failed at the ang4-seo@0.0.0 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 ??

    Reply
  5. Ma liberté financière
    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

    Reply
  6. Talita lira
    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!

    Reply
  7. Rawvvy
    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.

    Reply
  8. Haider Ali
    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! pract@0.0.0 prestart: `ng build –prod && ngc`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the pract@0.0.0 prestart script.

    Reply
  9. deepak singh
    deepak singh says:

    help!

    what about other server side module with '.js' extension,
    i have a application in angular 2 and node js
    how can i implement this on that project, how can i replace the server.js file and all imported file in it

    Reply
  10. Suciu Vlad
    Suciu Vlad says:

    Just cloned the repo then "npm install" and when I run "npm run start" I get:
    ERROR in ./src/main.ts
    Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory'

    Reply
  11. Tomasz Comasz
    Tomasz Comasz says:

    I had download project from Your github and on npm start i get error: Error at C:/angular-seo/e2e/app.e2e-spec.ts:12:45: Argument of type '"app works!"' is not assignable to parameter of type 'Expected<Promise<string>>'.

    Reply
  12. Fabrizio Tofanelli
    Fabrizio Tofanelli says:

    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 =)

    Reply
  13. I Glance3
    I Glance3 says:

    Hi Garry, Nice post it saved me a lot of time and I was able to setup my app within several minutes, Thanks!!

    But now the question is where I can write the server code as in PHP MVC we can write Database logic in models, html in views and process requests into controller, So in this app what are the ways with which I can communicate with my database? Can I do this in `mycomponent.component.ts` file? if yes then can I connect to Mongo/Any_Other_Db directly through component file? Or I would need to use another application as API that would be consumed by this angular/universal app?
    I just want a hint basically so that I can know what needs to be done atleast..

    Thanks!

    Reply
  14. Syamsuar Kurniawan Putra
    Syamsuar Kurniawan Putra says:

    I tried tutorial and not working I've got error
    ERROR in ./src/main.ts
    Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'D:user pcmyAppangular-seo-masterangular-seo-mastersrc'
     @ ./src/main.ts 4:0-74
     @ multi ./src/main.ts

    I create form starter template for Angular SEO using Angular 4 with Universal & the Angular CLI

    any ideas

    Reply
  15. Rimuru
    Rimuru says:

    No deployment details, I was able to run it locally but no good in an actual server… turning the javascript from my browser did not work in an actual website. only on local.

    Reply
  16. Rimuru
    Rimuru says:

    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?

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.