After updating to Angular 18 and migrating to the new builder there is an empty chunk file

We have migrated to Angular 18 and want to use the new builder @angular/build:application as it is recommended.

When we build the app it however produced one empty chunk file. This file was imported in other chunks leading to this error in the browser: Type error: [...] was blocked because of a disallowed MIME type ("").

The following shows the empty chunk:

[...]
chunk-445CPFNM.js | - | 1.54 kB | 566 bytes
chunk-4DOFRJHV.js | - | 1.31 kB | 611 bytes
chunk-LFWI5YUT.js | - | 1.28 kB | 508 bytes
chunk-ILMSXT7K.js | - | 1.23 kB | 613 bytes
chunk-YEVM5ZB2.js | - | 809 bytes | 809 bytes
chunk-G6NUE5X4.js | - | 443 bytes | 443 bytes
chunk-46KTUC7C.js | StandardController | 129 bytes | 129 bytes
chunk-F4E2X54X.js | BrowserPerformanceMeasurement | 107 bytes | 107 bytes
chunk-Q5CJ4NLL.js | - | 0 bytes | 0 bytes


Our (partial) angular.json:

[...]
"build": {
"builder": "@angular/build:application",
"options": {
"aot": true,
"preserveSymlinks": true,
"outputPath": {
"base": "../../dist/apps/my-app",
"browser": ""
},
"index": "src/index.html",
"tsConfig": "tsconfig.json",
[...]



We use "@angular/build": "^18.2.12" for building the app.

Now my question, what could be the reason for this behavior and how can I fix that? I have manually removed the imports in the other chunks and then everything seems to work fine.

Continue reading...