Failed to load module script – text/html instead of application/javascript

Question

Angular 12, Backend .NET 5 on same IIS instance deployed. No load balancers.

I’m having a text/html instead of application/javascript response issue that occurs rarely and it seems at random and I can’t pinpoint the cause.

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. Main-es2015.6ed6d8b....js:1

Refresh page fixes the issue but else website is stuck. I’m not sure if it’s caused by Service Worker or something else. Happened on both Edge and Chrome. Angular is built with production mode.

When this error is present page loads like this: failure

Both main-es2015.js have text/html response and content inside them is my index.html file with added script/style references instead of pure JavaScript: failure script text/html

On success: success

From same error response thread Failed to load module script I see responses but I already have:

C# startup:

public void ConfigureServices(IServiceCollection services) {
                services.**AddSpaStaticFiles**(configuration => configuration.RootPath = "Client/dist/AngularSpa");
}

public static void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
                app.**UseSpaStaticFiles**();
}

Angular index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <base **href="/"** />
  </head>
  <body>
  </body>
</html>

IIS Server logs during this error:

2022-05-27 13:18:30 W3SVC2 SERVER-XX GET / - 80 - adress Mozilla/5.0+(Windows+NT+10.0;+Win64;+x64)+AppleWebKit/537.36+(KHTML,+like+Gecko)+Chrome/adress+Safari/537.36+Edg/adress
2022-05-27 13:18:30 W3SVC2 SERVER-XX GET /main-es2015.6ed6d8b5172c982059f0.js - 443 - adress Mozilla/5.0+(Windows+NT+10.0;+Win64;+x64)+AppleWebKit/537.36+(KHTML,+like+Gecko)+Chrome/adress
2022-05-27 13:18:32 W3SVC2 SERVER-XX GET /main-es2015.6ed6d8b5172c982059f0.js - 443 adressMozilla/5.0+(Windows+NT+10.0;+Win64;+x64)+AppleWebKit/537.36+(KHTML,+like+Gecko)+Chrome/adress+Safari/537.36+Edg/adress
2022-05-27 13:18:32 W3SVC2 SERVER-XX GET /ngsw-worker.js - 443 adress Mozilla/5.0+(Windows+NT+10.0;+Win64;+x64)+AppleWebKit/537.36+(KHTML,+like+Gecko)+Chrome/adress+Safari/537.36+Edg/adress
2022-05-27 13:18:35 W3SVC2 SERVER-XX GET /ngsw.json ngsw-cache-bust=0.7298837691083289 443 adress Mozilla/5.0+(Windows+NT+10.0;+Win64;+x64)+AppleWebKit/537.36+(KHTML,+like+Gecko)+Chrome/adress+Safari/537.36+Edg/adress
2022-05-27 13:18:35 W3SVC2 SERVER-XX GET /index.html - 443 adress Mozilla/5.0+(Windows+NT+10.0;+Win64;+x64)+AppleWebKit/537.36+(KHTML,+like+Gecko)+Chrome/adress+Safari/537.36+Edg/adress
2022-05-27 13:18:35 W3SVC2 SERVER-XX GET /main-es2015.c448947b8e21da262380.js - 443 adress Mozilla/5.0+(Windows+NT+10.0;+Win64;+x64)+AppleWebKit/537.36+(KHTML,+like+Gecko)+Chrome/adress+Safari/537.36+Edg/adress
2022-05-27 13:18:37 W3SVC2 SERVER-XX GET /main-es5.c448947b8e21da262380.js - 443 adress Mozilla/5.0+(Windows+NT+10.0;+Win64;+x64)+AppleWebKit/537.36+(KHTML,+like+Gecko)+Chrome/adress+Safari/537.36+Edg/adress

The issue also happened with other scripts: multiple scripts failing to this error

OP here, in tsconfig I had targets mix of es2015,es6,es2016. Changed everything to build and target es2020 10 days ago. Still need time to observe if that was the culrpit but haven't seen this error since (somebody on discord suggested to adjust tsconfig). — sw45neutr
– sw45neutr, Commented Jun 17, 2022 at 12:18
sadly today got same error message. .js comes with my index.html content. refresh page and all ok. so tsconfig changes did not help. angular 14 — sw45neutr
– sw45neutr, Commented Jun 28, 2022 at 11:32

sw45neutr · Accepted Answer · 2022-06-30 14:47:01Z

My theory: The issue is that client cached index.html references old (deleted during deployment) version files but the browser loses cached .js or for some other reason attempts to request now deleted file from the server. The request fallbacks through IIS filesystem, .NET backend and finally to Angular for final route match. It returns index.html because if it was direct call on browser URL by the user it would attempt to load Angular app and attempt matching Angular route. But the call was made by application so it gets just initial index.html response and breaks. What I implemented is during pipeline CD process I move those old hashed files to temp folder and once deployment is done I return those files from the temp folder. So in those rare situations the application can load and then service worker updater pushes the latest version.

    - task: PowerShell@2
      displayName: "Move versioned Angular scripts to temp folder"
      inputs:
        targetType: inline
        script: |
          # Requirement is to have access to the root angular folder directly.
          # Moves hashed js and css files that are 6 months old or newer to %temp% folder
          $dateFromWhichToInclude = (Get-Date).AddMonths(-6).Date; `
          $angularRoot = "${{ parameters.iis_website_physical_path }}\Client\dist\AngularSpa"; `
          $tempFolderPath = Join-Path $Env:Temp previous-version-scripts; `
          New-Item -Type Directory -Path $tempFolderPath -Force | Out-Null; `
          Get-ChildItem -Path $angularRoot | Where-Object{ ($_.Name -match '\.\w{10,30}\.(js|css)') `
          -and ($_.CreationTime -ge $dateFromWhichToInclude) } `
          | Copy-Item -Destination $tempFolderPath –PassThru


    - task: PowerShell@2
      displayName: "Move versioned Angular scripts back from temp folder"
      inputs:
        targetType: inline
        script: |
          # Requirement is to have access to the root angular folder directly.
          # Once files are moved back, the created temp folder is deleted
          $angularRoot = "${{ parameters.iis_website_physical_path }}\Client\dist\AngularSpa"; `
          $tempFolderPath = Join-Path $Env:Temp previous-version-scripts; `
          Copy-Item -Path "$($tempFolderPath)\*" -Destination $angularRoot –PassThru; `
          Remove-Item $tempFolderPath -Force -Recurse

Collectives™ on Stack Overflow

Failed to load module script – text/html instead of application/javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related