Angular.io App – Deploying is not so simple

I tried to learn a little bit Angular.io, which has a very strange version-history which makes it cumbersome to find solutions to issues and problems in a simple manner. So in this post, I talk about the new AngularJS, currently in version 5.

I played with the tutorial (https://angular.io/guide/quickstart), and after having played around with it, I wanted to make sure that it does not only work locally with my own ng serve webserver, but with a real production webserver on which I host this website.

Unfortunately, I experienced two problems with deploying it.

1. Base HREF

First, I don’t want to have my AngularJS app as my homepage… I just wanted to have it inside a neat folder called “ng01”. When I created the deployment with:

ng build --prod

and copied the whole dist folder to the ng01 folder of my website (hosted with Apache httpd), nothing happend, and when I checked the Javascript console, I saw that the Javascript files which were created by angular-cli will not load. The problem is that the default base href is:

<base href="/">

So this means that when including JS files like this:

<script type="text/javascript" src="inline.b9fd455402f26b103f03.bundle.js"></script>

won’t work, because the JS files are inside a folder ng01, and not in the root folder.

Solution:

Use the –base-href command line parameter for the generation of the dist folder:

ng build --prod --base-href=/ng01/

2. Rewrite rules for Angular Routing

But then, this was not enough. It still did not work.

The initial routing in the tutorial worked fine when deployed on my website, but as soon as I hit the reload button, it did not work anymore. It gave me a 404 error, which is clear enough. In the Angular tutorial, they write that the URL of a detail-page can be created like this:

{ path: 'detail/:id', component: HeroDetailComponent },

This is a really cool feature… but when you think about it, it just cannot work. it cannot work because an ordinary webserver like httpd does not know anything about the URIs like /ng01/detail/33 or /ng02/detail/77…

I did not find out the real correct way how to do this (In java, you would define a context path with wildcards in your web.xml and define a Servlet for it), but at least I found a workaround. I just redirect all the 404 error messages to the index.html page, and then Router component of AngularJS seems to do the rest.

Solution:

A very nice feature of httpd is that you can have different configuration per directory, using a .htaccess file. So I created a .htaccess file for my ng01 folder where all my files are located:

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

# not rewrite css, js and images
RewriteCond %{REQUEST_URI} !\.(?:css|js|map|jpe?g|gif|png)$ [NC]
RewriteRule ^(.*)$ /ng01/index.html?path=$1 [NC,L,QSA]

This worked, now the NG tutorial can be deployed on my website…

Leave a Reply

Your email address will not be published. Required fields are marked *