Azure Static Web App returns incorrect MIME type for CSS and JS files (text/html instead of application/javascript and text/css)

Question:

I’m facing an issue with hosting two Angular applications on Azure Static Web App. Each application is hosted in its own subdirectory:

• The hostedPages application is available at https://xyz/hostedPages/.
• The profile application is available at https://xyz/profile/.

File structure on the server:

/
├── staticwebapp.config.json
├── hostedPages/
│   ├── index.html
│   ├── runtime.397bdeab26062b41.js
│   ├── polyfills.f2987581d2a3f7b2.js
│   ├── main.ecb07ded167b874e.js
│   ├── styles.7a5458fde1f85a21.css
│   └── assets/
└── profile/
    ├── index.html
    ├── runtime.397bdeab26062b41.js
    ├── polyfills.f2987581d2a3f7b2.js
    ├── main.ecb07ded167b874e.js
    ├── styles.7a5458fde1f85a21.css
    └── assets/

Configuration of staticwebapp.config.json:

{
  "routes": [
    {
      "route": "/hostedPages/*",
      "rewrite": "/hostedPages/index.html"
    },
    {
      "route": "/profile/*",
      "rewrite": "/profile/index.html"
    }
  ],
  "mimeTypes": {
    ".js": "application/javascript",
    ".css": "text/css",
    ".json": "application/json",
    ".html": "text/html",
    ".svg": "image/svg+xml",
    ".woff": "font/woff",
    ".woff2": "font/woff2",
    ".ttf": "font/ttf"
  }
}

The issue:

When trying to load the applications, the browser reports MIME type errors like the following:

Refused to apply style from 'https://xyz/styles.20bfe6f94abc7290.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Similarly for .js files:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html".

Thank you in advance for any guidance

What I’ve checked so far:

1. Routing:
   I verified that the files exist in the correct directories (/hostedPages and /profile). The issue seems related to server configuration or incorrect baseHref in Angular.

My question:

How can I properly configure Azure Static Web App to serve Angular applications in subdirectories with the correct MIME types for CSS and JS files? Am I missing something in the staticwebapp.config.json configuration or in the Angular build process?

---

hostedPages is working fine with the staticwebapp file you have posted. It looks like here: HostedPages is working fine nwo

The issue occures when I want do redirect to /profile/ The error messages see in the screenshot below:

Profile: Browser issues

I created sample application with two Angular (19) projects in it, successfully deployed it to Azure Static web Apps using GitHub Actions and Can access routes without any issues.

Below is my project Structure:

staticwebapp.config.json:

{
    "routes": [
      {
        "route": "/hostedPages/*",
        "rewrite": "/hostedPages/index.html"
      },
      {
        "route": "/profile/*",
        "rewrite": "/profile/index.html"
      }
    ],
    "navigationFallback": {
      "rewrite": "/index.html",
      "exclude": [
        "/hostedPages/*.js",
        "/hostedPages/*.css",
        "/profile/*.js",
        "/profile/*.css"
      ]
    },
    "mimeTypes": {
      ".js": "application/javascript",
      ".css": "text/css"
    }
  }

Using the YAML file below, I successfully deployed the app to Azure, where the basic route is hosted-pages.

GitHub WorkFlow File:

name: Azure Static Web Apps CI/CD
on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main
jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
          lfs: false
      - name: Install Dependencies
        run: |
          npm install
      - name: Build hostedPages
        run: |
          npx ng build hostedPages --output-path=dist/hostedPages
      - name: Build profile
        run: |
          npx ng build profile --output-path=dist/profile
      - name: List files in dist/hostedPages
        run: |
          echo "Listing files in dist/hostedPages"
          ls -R dist/hostedPages
      - name: List files in dist/profile
        run: |
          echo "Listing files in dist/profile"
          ls -R dist/profile
      - name: Merge Output Directories
        run: |
          mkdir -p dist/app
          mkdir -p dist/app/profile
          mv dist/hostedPages/browser/* dist/app/
          mv dist/profile/browser/* dist/app/profile/
      - name: List files in dist/app
        run: |
          echo "Listing files in dist/app"
          ls -R dist/app
      - name: Verify index.html exists
        run: |
          if [ ! -f dist/app/index.html ]; then
            echo "index.html not found in dist/app"
            exit 1
          fi
      - name: Deploy to Azure Static Web Apps
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ASHY_COAST_0100D7E0F }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} 
          action: "upload"
          app_location: "dist/app"  
          api_location: ""  
          output_location: ""  
  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ASHY_COAST_0100D7E0F }}
          action: "close"

Azure Output: