angular-2-universal

Angular 2 Universal: Set up a SEO friendly website

It was a long journey, but I am really happy to announce universal-cliย with Angular 2 Universal support.

Everything you need to set up a SEO-friendly websiteย in two simple steps:

  1. npm install -g universal-cli
  2. ung new <projectname> --universal

Feel free to file issues and contribute:

https://github.com/devCrossNet/angular-cli

Related links:

32 comments on “Angular 2 Universal: Set up a SEO friendly websiteAdd yours →

Comments are closed. You can not add new comments.

  1. Hello my friend,
    I built the sample project successfully but i cant seem to get templateUrl to work in my home component. Could you maybe show me an example with templateUrl ?

      1. Thank you for the response. Also, if i create a different component (and route), my source code still shows the home component code. Does this mean my SEO friendly project does not work ?

        1. If you would like to add a new SEO Route, make sure that you add the RouteConfig in the ./src/client/app/app.component.ts AND ./src/client/app/html.component.ts. I will extend the example next weekend, promise! ๐Ÿ™‚

  2. What are the advantages over Prerender.io? Prerender.io is much more simple to me, you just need to forward the request to it then everythings settled. This solution you need to handle it manually.

    1. Hey Tom, I never used prerender.io. I can not tell you the advantages. But I can tell you what I like in Angular 2 Universal. I can bootstrap the application with different modules on the client and server side. I get some really strange requests for SEO requirements sometimes (like hide some information in the source and display it just on the client side). For this kind of requirements, it is a really good solution. But maybe you can do this in prerender.io too. Thanks for reading! ๐Ÿ™‚

  3. Could u post about how to do a deploy to Heroku using Universal? That would be awesome!

  4. Hi,
    thanks for this sample. I tried it but i have an issue with it, it seems that the server side generated content is cached after first request, right? so each time i change metas, i need to restart the whole thing. Could you tell me how i could avoid this?

    1. Hi Dehian,
      there is no cache. Maybe the “watch”-tasks doesn’t work?!
      Can you check if the typescript compiles when you make changes and if pm2 reloads the javascript?

      I had some trouble with pm2 on windows, so I changed my setup to nodemon.

      Regards.

      1. Hi,

        indeed there was no cache. I found the issue, which is a bit strange to me, but somehow i had an error in the template, and then it either didin’t inject metas in the head or returned ones from the last execution when i didn’t have the error in the template yet. But if you kill node and restart npm, even with the issue in the template it feeds metas correctly, only the first time. Anyway i fixed my issue in the template (some {{variable}} in an href which i replaced by a [attr.href]=…) and now it works fine.

        Btw, i have the same request as Don, as I can’t make it to work with a templateUrl instead of template in my components. Do you have any idea why yet?

        1. Hey Dehian,
          I didn’t have a look into the remplateUrl issue yet.

          I am looking forward to the offline compile feature of Angular 2,
          that will be the way to go with templates and it is an extra build step.

          Today Angular Universal got an update for the Angular 2 Release Candidate,
          this version has the offline compile feature.

          When I figured out how this whole thing works, I will write an article about it.

          Regards.

  5. Hi Joannes,
    What would be the easiest way to make this work both clientside and server side? I mean,
    I would like to have a second route that leads to some other content but clientside rendered, so just adding a route and a component works but when i do a view source on the second route, it anyway displays the source of the serverside rendered component.
    Any suggestion you could give me there?

    1. Hi Dehian,
      you always have to add the a new route in both entry points (app.component.ts and html.component.ts).
      And after you navigated to the new route, press F5 to see the server rendered version of your application in “view source”.

      Please let me know if you still have trouble.

      Regards.

  6. Hi there Johannes,

    Thanks for sharing this. Everything worked fine to me and I started to play around! My question is how do you deploy this Angular2 app to your ftp? Which files should I upload or do you know a tut which explain how to make it on your server?

    Thanks! ๐Ÿ™‚

    1. Hi Alex,
      you can upload the whole project.
      You need Express/PM2 and all these things from the ./node_modules folder.

      What you not need is the ./src and the ./typings folder.

      regards.

  7. Johannes,
    templateUrl is not working (as others have mentioned), and i cant find a working solution yet. It’s very important issue and we need someone to provide a fix.
    Also, sometimes the terminal flashes (after npm start) on windows.

    1. Hey Don,
      I am working on other things at the moment.
      But I hope that universal will be a part of angular-cli in the near future.

      This will provide a generic solution for universal and express and should support templateUrl.

      I switched to nodemon on windows, that works much better then pm2, try it! ๐Ÿ™‚

      regards.

  8. Hi Johannes,

    I’m getting error when I do ‘npm start’. It says that it failed at npm run build:dev && npm run pm2:dev && npm run tsc:w .

    Pardon my ignorance if any as I’m quite new to this. Any help is appreciated.

      1. Hi johaness. Did you have an updated version of this post… I’m searching a full example using Angular Universal and SEO for all internet! without success..

        ๐Ÿ™

        1. Hey Eduardo,
          there is currently no working solution for angular-universal and Angular 2 >= RC5. Patrick is working hard to get RC5 support in asap. After this, I will finish the universal integration into the Angular-CLI.

          regards.

    1. Hi! Any can I compile this project with the latest angular universal packages? I need an updated example of angular 2 SEO..

      Thanks in advanced

  9. Hi Johanees,
    I have installed the angular-cli as per your previous comment. But when I run the command “ng new myApp –universal” , I get the message “The option ‘–universal’ is not registered with the new command. Run ng new --help for a list of supported options.”
    I verified that I am installing from the branch “universal”.
    Am I missing something ?

    1. Hey,

      you cloned my repo, checked out the universal branch and made npm link? This should work. That’s how I use it during development.

      1. I forgot something. you have to use this command to make a new universal project: ng new myApp --universal --link-cli

  10. Hi,

    i’d like to know what are the requirements to use your code ?

    When i try “npm install”, i get

    “npm ERR! peerinvalid The package angular2-universal does not satisfy its siblings’ peerDepe
    npm ERR! peerinvalid Peer angular2-hapi-engine@0.15.0 wants angular2-universal@^0.104.0
    npm ERR! peerinvalid Peer angular2-express-engine@0.15.3 wants angular2-universal@^0.104.5″,

    Can you help me ?

    Thanks,
    Guillaume

  11. Hi! Any can I compile this project with the latest angular universal packages? I need an updated example of angular 2 SEO..

    Thanks in advanced

  12. Hi

    universal-cli: 1.0.0-alpha.universal.3
    angular-cli: 1.0.0-beta.23
    node: 5.5.0
    os: win32 x64

    Need to implement Router and regular expressions in URL for SEO.
    But didn’t get success.

    Please give some best example with universal-cli.
    Thanks