When you are ready to deploy your Angular application to a remote server, you have various options for deployment.<\/p>\n\n\n\n
For the simplest 3 steps deployment, create a production build and copy the output directory to a web server and configure the server to redirect requests for missing files to This is because, in a single-page application, there is only one path to the entry file. After bootstrapping the application, instead of going to the server to get a new page, you change what the user sees by showing or hiding parts of the screen that correspond to certain components. As users perform application tasks, they need to switch between the different views you define. In this case, the server needs to redirect all traffic to index.html so Angular can take over to handle path on UI.<\/p>\n\n\n\n This otherwise brilliant solution, overly complicates server management, especially when having applications in subfolders. When the location strategy is misconfigured, the app fails to load any sub-routes and the browser console displays\u00a0 HashLocationStrategy is a To enable URL can contain some data prepended with a And\u00a0that\u2019s exactly why, for\u00a0a number of\u00a0years, the\u00a0primary way of\u00a0implementing client-side routing was via hash fragments. It is possible to remove the last step from the 3 step deployment process this location strategy.<\/p>\n\n\n\n HashLocationStrategy simplifies the server management when an angular app is running from a subfolder. With this strategy turned on, you can simply deploy in 2 steps;<\/p>\n\n\n\n This is the simplest production-ready deployment of your application. <\/p>\n","protected":false},"excerpt":{"rendered":" When you are ready to deploy your Angular application to a remote server, you have various options for deployment. Basic deployment to a remote server For the simplest 3 steps deployment, create a production build and copy the output directory to a web server and configure the server to redirect requests for missing files to index.html. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[8,7],"tags":[22,23,47,16],"class_list":["post-284","post","type-post","status-publish","format-standard","hentry","category-back-end","category-front-end","tag-angular","tag-apache","tag-nodejs","tag-server"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/posts\/284","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/comments?post=284"}],"version-history":[{"count":2,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/posts\/284\/revisions"}],"predecessor-version":[{"id":294,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/posts\/284\/revisions\/294"}],"wp:attachment":[{"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/media?parent=284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/categories?post=284"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/tags?post=284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}index.html<\/code>.<\/p>\n\n\n\n404 - Not Found<\/code>.\u00a0 HashLocationStrategy is another strategy which is immune to this subfolder \u2013 subroute mismatch. <\/p>\n\n\n\nHashLocationStrategy to The Rescue<\/h3>\n\n\n\n
LocationStrategy<\/code><\/a> used to configure the Location<\/code><\/a> service to represent its state in the hash fragment<\/a> of the browser’s URL.<\/p>\n\n\n\nHashLocationStrategy<\/code> in an Angular application we pass {useHash: true}<\/code> when we are providing our routes with RouterModule<\/code>, like so:TypeScript<\/p>\n\n\n\nRouterModule.forRoot(routes, {useHash: true})<\/pre><\/div>\n\n\n\n#<\/code> character. The #<\/code> part of the URL is called the hash fragment<\/em>. However, it has another very important characteristic in that anything past the #<\/code> in a URL never gets sent to the server<\/em>. It\u2019s, therefore, an ideal solution for implementing client-side routing:-<\/p>\n\n\n\nng build --prod<\/code><\/li>dist\/<\/code> by default) to a folder on the server.<\/li><\/ol>\n\n\n\n