{"id":2608,"date":"2021-10-11T11:55:00","date_gmt":"2021-10-11T09:55:00","guid":{"rendered":"https:\/\/itell.solutions\/?p=2608"},"modified":"2022-09-15T11:33:47","modified_gmt":"2022-09-15T09:33:47","slug":"angular-using-two-different-base-urls-in-one-project","status":"publish","type":"post","link":"https:\/\/itell.solutions\/en\/angular-using-two-different-base-urls-in-one-project\/","title":{"rendered":"Angular: Using two different base URLs in one project."},"content":{"rendered":"<div data-elementor-type=\"wp-post\" data-elementor-id=\"2608\" class=\"elementor elementor-2608\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-23a4284 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"23a4284\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-12a411c8\" data-id=\"12a411c8\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-389d7378 elementor-widget elementor-widget-text-editor\" data-id=\"389d7378\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\n<p>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.<\/p>\n\n\n\n<p>For example if you have a url \u201cretailer.com\u201d and you want to have another one like \u201ccustomer.com\u201d and both should direct you to a different page. You will have to go to some configuration steps.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"environment-configuration\">Environment Configuration<\/h2>\n\n\n\n<p>First we need to configure our two environments: environments.ts and environments.prod.ts (CLI should create them both for you).<br \/>One for serving the Angular application locally and one for production.<br \/>In there we define an environment dictionary with additional two urls for your Angular project.<\/p>\n\n<p><script src=\"https:\/\/gist.github.com\/davidmarogy\/08c4020ad2446738d593af73e78f6e4a.js?file=environment.ts\"><\/script> <script src=\"https:\/\/gist.github.com\/davidmarogy\/08c4020ad2446738d593af73e78f6e4a.js?file=environment.prod.ts\"><\/script><\/p>\n\n<p>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: <a href=\"https:\/\/angular.io\/guide\/build\" target=\"_blank\" rel=\"noopener\">https:\/\/angular.io\/guide\/build<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"routing\">Routing<\/h2>\n\n\n\n<p>The next step would be to create a routing module for your Angular project.<\/p>\n\n\n\n<p>To prevent the access to \u201cretailer.com\/consumer-home\u201d or \u201cconsumer.com\/retailer-home\u201d we need to check from which URL you want to access the page.<\/p>\n\n\n\n<p>Here we use the \u201cmatcher\u201d to implement a function which checks whether our current url includes \u201cretailer.com\/\u201d or \u201ccustomer.com\/\u201d.<\/p>\n\n\n\n<p>If you want to access for example \u201ccustomer.com\/retailer\u201d it would redirect you back to the main page and let you not progress further.<\/p>\n\n<p><script src=\"https:\/\/gist.github.com\/davidmarogy\/08c4020ad2446738d593af73e78f6e4a.js?file=app-routing.module.ts\"><\/script><\/p>\n\n<h2 class=\"wp-block-heading\" id=\"redirect-to-page\">Redirect to Page<\/h2>\n\n\n\n<p>So the last part is to set up your app.components.ts, so that it will handle two different urls in your Angular project:<\/p>\n\n<p><script src=\"https:\/\/gist.github.com\/davidmarogy\/08c4020ad2446738d593af73e78f6e4a.js?file=app.component.ts\"><\/script><\/p>\n\n<h2 class=\"wp-block-heading\" id=\"running-the-project\">Running the project<\/h2>\n\n\n\n<p>And that&#8217;s it, if you want to test your project locally you will need to serve both of them at the same time.<\/p>\n\n\n\n<p>For this open two terminals and enter in the first one:<br \/>\u201cng serve\u201d to build and serve the customer application and in the second one enter:<br \/>\u201cng serve &#8211;port 4210\u201d to serve the retailer application.<\/p>\n\n\n\n<p>In production you will not have to serve both applications, but you will need to have two urls configured for your application.<\/p>\n\n\n\n<p>You can find the whole project on Github <a href=\"https:\/\/github.com\/davidmarogy\/Angular-Two-Urls-One-Project\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/davidmarogy\/Angular-Two-Urls-One-Project<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"want-more\">Want more?<\/h2>\n\n\n\n<p>For further information about our Software Development, find us on <a href=\"https:\/\/itell.solutions\/en\/\">itell.solutions<\/a><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>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 \u201cretailer.com\u201d and you want to have another one like \u201ccustomer.com\u201d and both should direct you to a different page. [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":2622,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,29],"tags":[31,32,33,34],"class_list":["post-2608","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-allgemein","category-wissen2go","tag-angular","tag-different-base-urls","tag-redirect","tag-routing"],"_links":{"self":[{"href":"https:\/\/itell.solutions\/en\/wp-json\/wp\/v2\/posts\/2608","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itell.solutions\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itell.solutions\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itell.solutions\/en\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/itell.solutions\/en\/wp-json\/wp\/v2\/comments?post=2608"}],"version-history":[{"count":11,"href":"https:\/\/itell.solutions\/en\/wp-json\/wp\/v2\/posts\/2608\/revisions"}],"predecessor-version":[{"id":3126,"href":"https:\/\/itell.solutions\/en\/wp-json\/wp\/v2\/posts\/2608\/revisions\/3126"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itell.solutions\/en\/wp-json\/wp\/v2\/media\/2622"}],"wp:attachment":[{"href":"https:\/\/itell.solutions\/en\/wp-json\/wp\/v2\/media?parent=2608"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itell.solutions\/en\/wp-json\/wp\/v2\/categories?post=2608"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itell.solutions\/en\/wp-json\/wp\/v2\/tags?post=2608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}