Angular 10 - Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html"

Question

After upgrading to Angular 10 I see this after deploying to Azure App Service: 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.

My tsconfig.base.json looks like this:

    {
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "module": "es2020",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es6",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

This seems important:
out-tsc does not appear to be published to the server. In other successfully deployed applications I can see this direcroty with all of my page files.

Target es6 produces this:

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.

<body class="mat-typography">
  <app-root>
    <span style="text-align: center;">
      Loading...
      <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
    </span>
  </app-root>
<script src="runtime-es2015.3ee9a79b8d90d488eb6e.js" type="module"></script>
<script src="runtime-es5.3ee9a79b8d90d488eb6e.js" nomodule="" defer=""></script>
<script src="polyfills-es5.a80f72600a0bfdce44d9.js" nomodule="" defer=""></script>
<script src="polyfills-es2015.92e0624093dad79ad88a.js" type="module"></script>
<script src="main-es2015.b16c8d48817baaf425be.js" type="module"></script>
<script src="main-es5.b16c8d48817baaf425be.js" nomodule="" defer=""></script>

</body>

After following this thread https://github.com/angular/angular/issues/30835 and MIME type issue in Angular I tried all of those solutions even this:

Target es5 produces this:

Uncaught SyntaxError: Unexpected token '<'

<body class="mat-typography">
  <app-root>
    <span style="text-align: center;">
      Loading...
      <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
    </span>
  </app-root>
<script src="runtime.208caafb01abdda3ac51.js" defer=""></script>
<script src="polyfills-es5.baef76646d9ddccffa84.js" nomodule="" defer=""></script>
<script src="polyfills.4ff3e861f9f5817874c8.js" defer=""></script>
<script src="main.4ad4acf8ee80919cf267.js" defer=""></script>
</body>

I'm not sure what else to do?

score 1 · Answer 1 · answered Aug 11 '20 at 20:44

1

Turns out, being in DotNetCore 3.1, I had removed

app.UseSpaStaticFiles();

from Startup.cs and in doing so broke something important.

answered Aug 11 '20 at 20:44

Jason Smith

333
3
15

I changed my config file to an appsettings.Local.json for my local development environment instead of using appsettings.Development.json which is created for you by default. So I had to go to the Startup.cs file and change instances of env.IsDevelopment() to env.IsEnvironment("Local") to fix this issue. That line was guarding app.UseSpaStaticFiles(). – KSwift87 May 05 '21 at 02:47

Angular 10 - Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html"

1 Answers1