how to route using subdomain in angular2?

Question

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.

Answer 1

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.