DE 
EN 
Using only one base URL for one Angular project will not always be enough. Implementing another base URL which is different from the first can be a little tricky.
For example if you have a url “retailer.com” and you want to have another one like “customer.com” and both should direct you to a different page. You will have to go to some configuration steps.
Environment Configuration
First we need to configure our two environments: environments.ts and environments.prod.ts (CLI should create them both for you).
One for serving the Angular application locally and one for production.
In there we define an environment dictionary with additional two urls for your Angular project.
The configuration in the angular.json file for handling different environments should also be configured by the CLI. If not, the Angular documentation is here a good point to look at: https://angular.io/guide/build
Routing
The next step would be to create a routing module for your Angular project.
To prevent the access to “retailer.com/consumer-home” or “consumer.com/retailer-home” we need to check from which URL you want to access the page.
Here we use the “matcher” to implement a function which checks whether our current url includes “retailer.com/” or “customer.com/”.
If you want to access for example “customer.com/retailer” it would redirect you back to the main page and let you not progress further.
Redirect to Page
So the last part is to set up your app.components.ts, so that it will handle two different urls in your Angular project:
Running the project
And that’s it, if you want to test your project locally you will need to serve both of them at the same time.
For this open two terminals and enter in the first one:
“ng serve” to build and serve the customer application and in the second one enter:
“ng serve –port 4210” to serve the retailer application.
In production you will not have to serve both applications, but you will need to have two urls configured for your application.
You can find the whole project on Github https://github.com/davidmarogy/Angular-Two-Urls-One-Project
Want more?
For further information about our Software Development, find us on itell.solutions
