8

I'm looking to create an Angular 2 app with different user landing pages, for example 'user1.example-domain.com' and 'user2.example-domain.com' will have different and unrelated 'home page'.

My questions:

  1. How could I do it using Angular 2?
  2. How can I test it on my local machine? is "user1.localhost:port" enough?

I've tried using static routing like so:

 {path: 'test.localhost:4200/generic-link1', component: GenericLink1Component}

I've seen it done in tumbler I know that it could be done.

CodeHahn
  • 279
  • 6
  • 17
  • 1
    Possible duplicate of [Html5 History Api - pushState from a domain to a subdomain](http://stackoverflow.com/questions/14807921/html5-history-api-pushstate-from-a-domain-to-a-subdomain) – Estus Flask Dec 01 '16 at 10:48
  • Angular app is SPA, and Angular router uses pushState to change urls according to path. Whatever you have seen, you've seen something different than that. – Estus Flask Dec 01 '16 at 10:51
  • just to clarify, I haven't seen it done in angular 2 (no idea tumblr's development methodology). I know the concept exist: http://skittenthekitten.tumblr.com/ you can see the use of subdomain for a specific user "user.tumblr.com" (I'm not promoting skittenthekitten whoever he is :)) – CodeHahn Dec 01 '16 at 10:56
  • 1
    This presumes server-side routing. What you're trying to do is client-side routing for single-page application. You can't do that. You can do redirect to any external URL you want, it doesn't matter if it is google.com or another instance of your app on another domain, however, this is not related to routing. That's just redirect. And I don't see anything but troubles from this approach. – Estus Flask Dec 01 '16 at 11:21
  • Thanks @estus, you are corrent, I will need server side routing for this – CodeHahn Dec 01 '16 at 11:32
  • were you able to solve? – yer Jul 19 '18 at 14:44
  • @Hahn Did you solve this question? – Asmitha j.s Apr 26 '19 at 06:15

1 Answers1

6

This can easily be done, but not with Angular (or any other JavaScript router for that matter). Routing to a sub-domain requires the server to help out. You need to set up user1 and user2 as sub-domains and then in your default document, route to either based on whatever you rules are.

You Angular app will then reside at either address, so there will be one at http://user1.example.com/index.html and another at http://user2.example.com. It could be the same app as well.

For an all-Angular solution, you should simply change your scheme to use http://example.com/user1.

There is one more reason why the latter URL scheme may be better for you. If you self-host, you can create sub-domains to your heart's content. If, however, you're using shared hosting, there is a pretty high likelihood that you'll be limited to the number of sub-domains you can use - it may be as few as two.

Cobus Kruger
  • 8,338
  • 3
  • 61
  • 106