Skip to content

2018

Deploying Angular application on Apache server

If you need to deploy an Angular application on a server running Apache, and are making use of routing for navigation, you can't just upload the built application onto the server and be done with it. As soon as you navigate to another path, the Apache server will try to look for that resource on the server and most likely will give you an 404 Not Found error.

You need to rewrite all the URLs to the index.html so that the Angular application can take care of it. Your server needs to support mod_rewrite for that. If that is the case, you can upload a .htaccess file with the following content to your directory where the Angular application resides in:

RewriteEngine on
RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} !^/assets/(.+)$
RewriteRule ^(.+)$ index.html?path=$1 [L]

This will rewrite all requests to the index.html file and append any extra path to it. Unless, the request is for an existing file or directory on the server, then it will not rewrite it. This is necessary for the additional resources that will need to be loaded, such as CSS and JS files and images.

In order to get the necessary feedback when a resource is requested that does not exist, the third condition excludes to rewrite any request located inside the assets folder.

Digging into the Firefox UI for the tab close button

Last year a new Firefox version broke the "close button on tab hover" tweak and I mentioned I will write a separate blog post on how I found out why and how to fix it. Life happened, but fortunately I wrote down bullet points about what I did.

It seems that with Firefox 54 something in the UI changed which broke the functionality. Fortunately, it wasn't the removal of the ability to customize the UI using userChrome.css. In order to find out why the CSS selector didn't work anymore, it was necessary to see how a tab was structured in XUL.

A while ago I used DOM Inspector which now is a legacy extension. The Firefox version at the time was 57, but it didn't allow legacy extensions anymore. So I went back to the last 54.x version, which allowed the installation of this "legacy" extension. Unfortunately, I could not open its UI. I did however find the extension InspectorWidget. It has a nifty shortcut to open the inspector for the desired element right away. Hold Ctrl+Shift while clicking on the desired UI element.

Using the inspector I found out that there was a new CSS rule that set display: none for certain elements, one of them being the close button for tabs. To find out the initial/default value I used the computed rules, which showed -moz-box. This allowed to add display: -moz-box !important to the rule for hovered tabs to make it work again.

While it doesn't seem possible to inspect the UI anymore with "Firefox Quantum" due to the introduction of WebExtensions, the CSS rules still work. However, it is unclear whether these kind of UI customizations will stay. There seemed to be plans to remove it but perhaps they realized how many users are using this to tweak their UI since extensions are not allowed to do it anymore. This bug report to collect usage of userChrome.css supports this theory.

Update (2023): In the last few years there has been a much easier (built-in) way to inspect the Firefox UI using the Browser Toolbox. See this post on Super User.