Mime type of .mjs file from Azure App service is 'text/plain' (only in Production server)

Question

I am using ngx-extended-pdf-viewer in my Angular app deployed on Azure app service (Linux).

angular.json config (as per docs)

The .mjs files are included in assets/ folder and works fine in development mode. However, when deployed on production server, it gives the following error:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.

I tried configuring the mime types on Azure but since it does not use a reverse proxy such as ngnix, I am unable to configure mjs to be returned as application/javascript. Since its Linux, web.config doesnt work either.

Is there a way from Azure Portal to configure this?

Answer 1

MIME-type issues with .mjs files on Azure App Service (Linux) are due to the Startup Command in Stack settings of Configuration.

instead of

pm2 serve /home/site/wwwroot --no-daemon --spa

It should have pointed to the dist folder, so changing it to

pm2 serve /home/site/wwwroot/dist --no-daemon --spa

• Open your terminal or command prompt and run the following command to install the Angular CLI globally:

npm install -g @angular/cli

• Run the following command to create a new Angular project. Replace "my-angular-app" with your desired project name:

bashCopy code

ng new my-angular-app

Follow the prompts to set up your project. You can choose options like routing and styling during this process

cd my-angular-app

Run the following command to serve your Angular app locally:

bashCopy code

ng serve

Your Angular app will be accessible at http://localhost:4200/ by default. Open this URL in your browser, and you should see the default Angular app.

Local:

Deployment Status:

Deployment of the web app to Azure from Visual Studio Code has been completed.

Enter pm2 serve /home/site/wwwroot/dist --no-daemon --spa under Startup Command and click save

Azure:

With ngx-extended-pdf-viewer:

Below is the full code for an Angular project that uses ngx-extended-pdf-viewer to display a PDF

• code taken from git.

Open the angular.json file and update the assets section under projects

"assets": [
    "src/favicon.ico",
    "src/assets",
    {
        "glob": "**/*",
        "input": "node_modules/ngx-extended-pdf-viewer/assets/",
        "output": "/assets/"
    }
],

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxExtendedPdfViewerModule } from 'ngx-extended-pdf-viewer';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgxExtendedPdfViewerModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.component.ts:

import { Component } from  '@angular/core';

  

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export  class AppComponent {

title = 'ngx-pdf-viewer';

}

app.component.html:

<ngx-extended-pdf-viewer
  [src]="'assets/example.pdf'"
  [useBrowserLocale]="true"
  [textLayer]="true"
  [showHandToolButton]="true"
  [showPresentationModeButton]="true"
  [showDownloadButton]="false"
>
</ngx-extended-pdf-viewer>

Local:

Azure:

Answer 2

I do not use azure but i had the same error. The problem is, that in my mime.types file there was no content-type mapping to .mjs files. After adding this (application/javascript) it worked just fine! I hope it helps