Expected a JavaScript module script but the server responded with a MIME type of “text/html”. and manifest.webmanifest error

  Kiến thức lập trình

i get this Error, when i build the angular app in docker.

Error:

polyfills.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/html”. Strict MIME type checking is enforced for module scripts per HTML spec.

vendor.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/html”. Strict MIME type checking is enforced for module scripts per HTML spec.

runtime.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/html”. Strict MIME type checking is enforced for module scripts per HTML spec.

main.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/html”. Strict MIME type checking is enforced for module scripts per HTML spec.

manifest.webmanifest:1 Manifest: Line: 1, column: 1, Syntax error.

when i build it local it works fine.

it is a angular v17 app with standalone components and ionic v7.5.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8"/>
  <title>SchnappApp</title>
  <base href="/"/>

  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <meta name="format-detection" content="telephone=no"/>
  <meta name="msapplication-tap-highlight" content="no"/>

  <link rel="icon" type="image/png" href="assets/SCHNAPP_Logo.ico"/>

  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Quicksand"/>
  <link rel="manifest" href="manifest.webmanifest">
  <meta name="theme-color" content="#1976d2">
</head>

<body>
  <app-root></app-root>
  <noscript>Please enable JavaScript to continue using this application.</noscript>
</body>

</html>

manifest.webmanifest

{
  "name": "SchnappApp",
  "short_name": "schnapp",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "fullscreen",
  "scope": "/",
  "start_url": "/app/",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

nginx.conf

server {
  listen 8100;
  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html =404;
  }
  location ~ .(js|jsx)$ {
    # Serve JavaScript files with the correct MIME type
    add_header Content-Type application/javascript;
    # (Optional) Enable caching for performance
    expires max;  # Cache for one year
    # You can adjust the caching time as needed
  }
}

can someone please help me?

i edited the mime.types file and added

location ~ .(js|jsx)$ {
    # Serve JavaScript files with the correct MIME type
    add_header Content-Type application/javascript;
    # (Optional) Enable caching for performance
    expires max;  # Cache for one year
    # You can adjust the caching time as needed
  }

and nothing works

New contributor

Paul Hinterberger is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

LEAVE A COMMENT