Can a single Azure Static WebApp host multiple Angular applications?

Question

I use the same Azure Static WebApp to host multiple docs.
Each doc is an Angular application maintained by a team.

I have a pipeline that deploys every doc dist in the docs directory of the Azure Static WebApp :

/docs/angular-app-1
/docs/angular-app-2

My Azure pipeline looks like this :

   - task: AzureStaticWebApp@0
     inputs:
       is_static_export: true
       app_location:docs
       skip_app_build: true
       skip_api_build: true
       azure_static_web_apps_api_token: SOME_TOKEN

The baseHref of each Angular application varies:

angular-app-1: baseHref="/angular-app-1/"
angular-app-2: baseHref="/angular-app-2/"

To prevent 404 error when refreshing a page, a navigation fallback to index.html of each Angular app is required.
To achieve this, I added a routes.json file into docs directory:

{
   "routes": [
     {
       "route": "/angular-app-1/*",
       "serve": "angular-app-1/index.html",
       "statusCode": 200
     }
     {
       "route": "/angular-app-2/*",
       "serve": "angular-app-2/index.html",
       "statusCode": 200
     },
   ]
}

It works as expected but routes.json is deprecated since months in favor of staticwebapp.config.json.

Is there a way to configure a navigation fallback per Angular application with the new configuration file ?

{
     "navigationFallback": {
         "rewrite": "index.html"
     }
}

In my case navigationFallback.rewrite should be :

• angular-app-1/index.html for angular-app-1
• angular-app-2/index.html for angular-app-2

I have tried putting a staticwebapp.config.json file with the appropriate navigation fallback in each Angular application distribution, but without success.

I can't figure out how to convert routes.json configuration to staticwebapp.config.json

Could this possibility of rewriting according to a route have been forgotten?

Answer 1

There is a routes property in the new configuration file that can be used.

You would need something like this

{
  ...
  routes: [
     {
       "route": "/angular-app-1/*",
       "rewrite": "/angular-app-1/index.html",
       "statusCode": 200
     },
     {
       "route": "/angular-app-2/*",
       "rewrite": "/angular-app-2/index.html",
       "statusCode": 200
     }
  ],
  ...
}