Tips for Building Frontend AOT Angular Apps for Distribution
Tags: angular, opensource, discuss, webdev
Published: 2020-01-04 07:04:45


When working on the latest version of [Bullhorn's Career Portal](https://github.com/bullhorn/career-portal) I ran into some issues that needed to be sorted.  The app is built once but uploaded to many different hosts by different users and companies. Because of this, I had to work around several issues that may arise when building for this audience. 

For background, the app is simple and contains 2 routes, the homepage, and the job page. There are several different configuration options available, and it works with any static web host. 

This post is my 5 tips for anyone attempting to go down a similar path, and hopefully, open up a discussion for other Angular tips and tricks. 

# 1. Base Href
The HTML5 `<base>` tag is used to specify a base URL for relative links in the application.  The default configuration found in your index.html file would look like the following `<base href="/">`.  This value sets relative links to resolve from the root of your domain. For example, if you are at the page `chardeemacdennis.com/bird` and it requests a resource at `data.json`, the full URL for the JSON file would be `chardeemacdennis.com/data.json`.  Since the app could be uploaded to any directory, this would be a problem.   

In this instance, the proper configuration would be `<base href=".">`.  This configuration would make any directory the files are placed in, be the root directory for the files.  In the `chardeemacdennis.com/bird` example the `data.json` file will resolve to `chardeemacdennis.com/bird/data.json`

# 2. Hash Location Strategy
When using routing in your Angular application, it is suggested to set up your web server with a URL rewrite rule that allows Angular to fully handle routing.  Since the user potentially may not have access to edit these rules on shared hosting, it is easier to use [HashLocationStrategy](https://angular.io/api/common/HashLocationStrategy). When the user goes to the directory that your Angular application is in, it will put the Angular route after the hash symbol in the URL (ex. example.com#/foo).

To use HashLocationStrategy, you can configure that in your application's `app.module` file. The following is an example of how to do so.
```
RouterModule.forRoot(appRoutes, { enableTracing: false, useHash: true},),
```

# 3. Simple Config file
If an application is being used by a large number of people, there is a potential for a large number of settings to be added. It is probably easiest to use a JSON file for config, but ensure you are not utilizing too many settings or overly complex data structures.

# 4. Use AppInitializer
To ensure the config is loaded properly when the application is first loaded, you can set your application settings by utilizing [APP_INITIALIZER](https://angular.io/api/core/APP_INITIALIZER).  For information about utilizing the App Initializer I suggest [this article I found on the topic.](https://dev.to/prestonjlamb/loading-app-configuration-in-the-appinitializer-304h)

# 5. Provide an Easy way to Update Translations
To ensure your project reaches the largest audience possible, you will want to ensure your users can easily add translations to your project.  I will be writing more about this in the future, but for my project, to make it simple, I used a library called [Chomsky](https://github.com/bullhorn/chomsky).  If the config is correct, it will check the available translations to use, which can be useful for multi-lingual end-users.