Angular 13 after base href update, getting MIME type error

Viewed 664

Have a single NGINX, serving 3 applications. So to differentiate we have added base href in package.json as below and updated index.html of each application to reflect base href

Package.json

"csr:build:client:dev1": "node --max_old_space_size=4096 node_modules/@angular/cli/bin/ng build --base-href /adminui/ --deploy-url /adminui/ --output-path=dist/DEV/public --aot=true",

And in index.html

<base href="/adminui">

Similar updates were made on other 2 apps. But I got below errors on browser console and page never loaded

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.
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.
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.
runtime.js:1

Apps were running fine, if individually launched with no base href or using default.

Below are the changes I tried, along with above changes.

tsconfig.base.json

"target": "es2015",

to

"target": "es5",

Added in app.module.ts and app.server.module.ts

import { APP_BASE_HREF} from '@angular/common';
providers: [
 {provide: APP_BASE_HREF, useValue: '/adminui'}
]

But none worked, the same error.

1 Answers

I have an idea to this. I think because of the changed baseHref the Angular application tries to download the scripts from a different URL as previously and NGINX returns to these requests a default HTML page (for example a 404 page). As the client expects JavaScript file and gets an HTML, the MIME error is displayed. I suggest to check the response content in the developer tools of the browser. If it is a default HTML from NGINX I suggest to configure NGINX that way, where he expects the resource file requests (such as JS files) on such URLs that are configured like the baseHref values.

Related