Hosting multiple Angular apps on one Azure Blob Storage

Question

At work we are hosting multiple Angular JS apps on one Azure Blob Storage. There is an Azure Function which acts as a proxy and navigates to the suitable app folder and html file.

Now I want to replace some of the Angular JS apps with Angular 9 apps.

But the above-mentioned approach which works fine for the Angular JS apps does not work with the Angular 9 app.

If I host the Angular 9 app as static website on a different storage, it works fine. But as it is not possible to host more than one app as static website on an Azure Storage Account, I'm looking for a solution for this issue.

Is it possible to host more than one Angular 9 app on one Azure Blob Storage? If yes: What should I do to make this work?

Thank you in advance!

cerkiner cerkiner · Accepted Answer · 2020-05-28T14:39:19

You can deploy static angular apps in subfolders and have multiple at the same time on different subfolders. It will require some configuration changes, possible some code changes because the default configuration will fail to load.

There are 2 main issues; baseHref and LocationStrategy.

The first part of the fix: The base tag

When the base tag is misconfigured, the app fails to load and the browser console displays 404 - Not Found errors for the missing files. Look at where it tried to find those files and adjust the base tag appropriately.

On 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/, the subfolder is my/app/ and you should add to the server version of the index.html.

You can configure while building like this;

ng build --prod --output-path docs --base-href /my/app/

You can also configure in angular.json;

{
  //...
  "projects": {
    "app": {
      //...
      "architect": {
        "build": {
          //...
          "configurations": {
            "production": {
              "baseHref": "/my/app/",
              //...

It is possible to set baseHref to . to achieve a generic app which works in all subfolders by relative paths but all used asset should follow a relative path within the app to comply.

The second part of the fix: LocationStrategy

When the location strategy is misconfigured, the app fails to load any sub-routes and the browser console displays 404 - Not Found. HashLocationStrategy is another strategy that is immune to this subfolder – subroute mismatch.

HashLocationStrategy is a LocationStrategy used to configure the Location service to represent its state in the hash fragment of the browser’s URL.

To enable HashLocationStrategy in an Angular application we pass {useHash: true} when we are providing our routes with RouterModule, like so:

RouterModule.forRoot(routes, {useHash: true})

With LocationStrategy and baseHref set properly, you can simply build and copy everything within the output folder (dist/ by default) to the subfolder on the server.

For more information: https://celilsemi.erkiner.com/blog/static-angular-deployment-to-a-subfolder/

Hosting multiple Angular apps on one Azure Blob Storage

1 Answers