Search code examples
javascriptangulardeploymentbuildmime-types

Deployment Angular Project error type MIME (text/html)

I try to deploy an Angular/CLI 6.12.0 project.

When I put "dist" folder content on a server, there is a console error "type MIME".

Le chargement du module à l’adresse « http://www.sylvainallain.fr/polyfills-es2015.fd917e7c3ed57f282ee5.js » a été bloqué en raison d’un type MIME interdit (« text/html »).
Le chargement du module à l’adresse « http://www.sylvainallain.fr/main-es2015.2fcd6517edb1de962f8a.js » a été bloqué en raison d’un type MIME interdit (« text/html »).
Le chargement du module à l’adresse « http://www.sylvainallain.fr/runtime-es2015.24b02acc1f369d9b9f37.js » a été bloqué en raison d’un type MIME interdit (« text/html »).

https://i.sstatic.net/4uFyT.png

This in French for me ^^. You can see it in console here http://biblio.sylvainallain.fr

It's a simply application like a library. Back-end (logs and data) is manage with Firebase.

In local, all is OK.

I make the build with "ng build --prod", it create a "dist" folder.

My index.html after prod:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bibliothèque Angular</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.735ba4029395bfd97371.css"></head>
<body>
  <app-root></app-root>
    <script src="polyfills-es5.f9fad3ad3c84e6dbdd72.js" nomodule defer></script>
    <script src="polyfills-es2015.fd917e7c3ed57f282ee5.js" type="module"></script>
    <script src="runtime-es2015.24b02acc1f369d9b9f37.js" type="module"></script>
    <script src="main-es2015.2fcd6517edb1de962f8a.js" type="module"></script>
    <script src="runtime-es5.24b02acc1f369d9b9f37.js" nomodule defer></script>
    <script src="main-es5.2fcd6517edb1de962f8a.js" nomodule defer></script></body>
</html>

I find this GitHub post: https://github.com/angular/angular-cli/issues/10325 .This is the same issue, I try some solutions but nothing work.

The issue is only with es2015.*.js files. So I think there is an issue with type="module" which is not recognize like a Javascript file. I don't understand why Angular don't manage it.

Edit 25 October :

  • try to replace type="module" with type="application/javascript". Don't work. Source

  • try to update Angular/CLI & Angular/core with ng update @angular/cli @angular/core --allow-dirty and ng build --prod again. Don't work

  • try to host it with Firebase. Same issue: https://bibliang.firebaseapp.com/

Thanks for help ! :)

Solution

  • This is because of dist folder in your project workspace. There are two solutions that worked for me :

    Sol 1. In your dist folder there may a folder named as your project name move all the files of that folder to the dist folder and then change the dir location to the dist/index.html in server.js file.

    Move all files from dist/you_project_name to dist/

    Then change the dir location in server.js file 'dist/you_project_name' to 'dist/'

    Sol 2. You can change the src attribute of all error causing tags in index.html file, like ::

    <script src="runtime-es2015.js" type="module">

    changed to

    <script src="folder_name_inside_the_dist_dir/runtime-es2015.js" type="module">