Bug build on esbuild for Angular/Django application

Angular 4 to 18 Migration: esbuild Errors and MIME Type Issues

Background


I'm updating an application from Angular 4 to Angular 18 with Django as the backend. I've migrated to esbuild, but I'm encountering errors in the browser after a successful build, and the application is broken.

Issue


After building, I notice that the main, polyfill, and style transpiled files are the same. The application fails to load properly, with several errors related to MIME types and module loading.

Errors

1. 
   Failed to load module script:
   
   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.
   
   
2. 
   Font file 404 errors:
   
   GET https://app/media/fontawesome-webfont-5GKVPAEF.woff2?v=4.7.0 net::ERR_ABORTED 404 (Not Found) GET https://app/media/fontawesome-webfont-Z4ARLA73.woff?v=4.7.0 404 (Not Found) GET https://app/media/fontawesome-webfont-RJ6LE7IU.ttf?v=4.7.0 net::ERR_ABORTED 404 (Not Found)
   
   
3. 
   Script execution refused:
   
   Refused to execute script from 'https://app/scripts-JNRFGZAM.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
   
   
4. 
   Main script loading failure:
   
   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.
   
   
5. 
   CSS loading refused:
   
   Refused to apply style from 'https://app/styles-7NCDMDZU.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
   

Environment

• Angular CLI: 18.2.4
• Node: 18.20.4
• npm: 10.7.0
• OS: Linux x64

Configuration


Here's my angular.json file:

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"static": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser-esbuild",
"options": {
"allowedCommonJsDependencies": [
"handsontable"
],
"outputPath": "src/dist/dev",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": [
"zone.js",
"@angular/localize/init"
],
"tsConfig": "tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "public",
"output": "/assets"
}
],
"styles": [
"src/app/shared/styles.css",
"handsontable/custom_handsontable.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/font-awesome/css/font-awesome.min.css",
"node_modules/handsontable/dist/handsontable.full.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "3mb",
"maximumError": "3mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"outputHashing": "all",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
}
}
}
}
}

Questions

1. Why are the transpiled files (main, polyfill, and style) identical after the build?
2. What could be causing the MIME type errors, especially for JavaScript and CSS files?
3. How can I resolve the 404 errors for the font files?
4. Are there any specific considerations when migrating from Angular 4 to 18 with esbuild that I might have overlooked?

Any insights or suggestions on how to troubleshoot and resolve these issues would be greatly appreciated.

Continue reading...