Tips for Building Frontend AOT Angular Apps for Distribution

Charles Barnes — Sat, 04 Jan 2020 07:04:45 +0000

When working on the latest version of Bullhorn's 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. 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. For information about utilizing the App Initializer I suggest this article I found on the topic.

5. Provide an Easy way to Update Translations