If you ever try to deploy an Angular app to a subfolder in your server, you will see that your app will end up with a white screen of death on your main root.<\/p>\n\n\n\n
There are 2 main issues; The base tag and LocationStrategy. <\/p>\n\n\n\n
base<\/code> tag<\/h3>\n\n\n\nThe HTML <base href=”…”\/><\/em><\/a> specifies a base path for resolving relative URLs to assets such as images, scripts, and style sheets. For example, given the <base href=\"\/my\/app\/\"><\/code>, the browser resolves a URL such as some\/place\/foo.jpg<\/code> into a server request for my\/app\/some\/place\/foo.jpg<\/code>. During navigation, the Angular router uses the base href<\/em> as the base path to the component, template, and module files.<\/p>\n\n\n\nIn development, you typically start the server in the folder that holds index.html<\/code>. That’s the root folder and you’d add <base href=\"\/\"><\/code> near the top of index.html<\/code> because \/<\/code> is the root of the app. Furthermore Angular defaults to <base href=\"\/\"><\/code> because it is a common configuration for most deployments .<\/p>\n\n\n\nWhen the base<\/code> tag is mis-configured, the app fails to load and the browser console displays 404 - Not Found<\/code> errors for the missing files. Look at where it tried<\/em> to find those files and adjust the base tag appropriately.<\/p>\n\n\n\nOn subfolder structured production server, you might configure this to prevent errors. For example, when the URL to load the app is something like http:\/\/www.example.com\/my\/app\/<\/code>, the subfolder is my\/app\/<\/code> and you should add <base href=\"\/my\/app\/\"><\/code> to the server version of the index.html<\/code>.<\/p>\n\n\n\nYou can configure while building like this;<\/p>\n\n\n\n
ng build --prod --output-path docs --base-href \/my\/app\/<\/pre><\/div>\n\n\n\nYou can also configure in angular.json;<\/p>\n\n\n\n
{\n \/\/...\n "projects": {\n "app": {\n \/\/...\n "architect": {\n "build": {\n \/\/...\n "configurations": {\n "production": {\n "baseHref": "\/my\/app\/",\n \/\/...\n }\n }<\/pre><\/div>\n\n\n\nIt is possible to set base-href<\/code> to .<\/code> to achieve a generic app which works in all all subfolders by relative paths but all used asset should follow a relative path within the app to comply.<\/p>\n\n\n\nSecond part of the fix: LocationStrategy<\/code><\/h3>\n\n\n\nIn 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\u00a0404 - Not Found<\/code>.\u00a0 HashLocationStrategy is another strategy which is immune to this subfolder – subroute mismatch.<\/p>\n\n\n\nHashLocationStrategy is a 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\nTo enable HashLocationStrategy<\/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\nURL can contain some data prepended with a #<\/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\n- It\u2019s part of the URL so can be bookmarked and sent to other people.<\/li>
- It won\u2019t confuse the server side since the hash fragment is never sent to the server.<\/li>
- It can be programmatically changed via JavaScript.<\/li><\/ul>\n\n\n\n
And that\u2019s exactly why, for a number of years, the primary way of implementing client-side routing was via hash fragments.<\/p>\n\n\n\n
HashLocationStrategy simplifies the server management when an angular app is running from a subfolder. <\/p>\n\n\n\n
<\/p>\n\n\n\n
With this strategy and base href set properly, you can simply deploy in 2 steps;<\/p>\n\n\n\n
- Start with the production build<\/li>
- Copy everything<\/em> within the output folder (
dist\/<\/code> by default) to the subfolder on the server.<\/li><\/ol>\n\n\n\nThis is the simplest way to deploy your application as a static file bundle in a subfolder. <\/p>\n","protected":false},"excerpt":{"rendered":"
If you ever try to deploy an Angular app to a subfolder in your server, you will see that your app will end up with a white screen of death on your main root. There are 2 main issues; The base tag and LocationStrategy. First part of the fix: The base tag The HTML <base href=”…”\/> specifies a base path for […]<\/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-286","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\/286","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=286"}],"version-history":[{"count":7,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/posts\/286\/revisions"}],"predecessor-version":[{"id":293,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/posts\/286\/revisions\/293"}],"wp:attachment":[{"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/media?parent=286"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/categories?post=286"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/tags?post=286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}