angular-architects / module-federation-plugin

MIT License
713 stars 189 forks source link

Exclude index.html from micro-frontend production build #578

Open angelo-v opened 2 months ago

angelo-v commented 2 months ago

Since the integration happens in the shell, we do not want to expose micro-frontends as stand-alone apps in production. Yet an index.html file is included in the bundle of each frontend. Is there a way to prevent that?

I could remove the index.html from the angular build, but this leads to an error in updateIndexHtml of native-federation:

 NX   ENOENT: no such file or directory, open '/path/to/dist/browser/index.html'

Error: ENOENT: no such file or directory, open '/path/to/dist/browser/index.html'
    at Object.readFileSync (node:fs:448:20)
    at updateIndexHtml (/path/to/node_modules/@angular-architects/native-federation/src/utils/updateIndexHtml.js:16:27)
    at runBuilder_1 (/path/to/node_modules/@angular-architects/native-federation/src/builders/build/builder.js:169:59)
    at runBuilder_1.next (<anonymous>)
    at resume (/path/to/node_modules/tslib/tslib.js:282:48)
    at fulfill (/path/to/node_modules/tslib/tslib.js:284:35)
angelo-v commented 2 months ago

I solved it by bot setting "index": false for the esbuild production build and also skipHtmlTransform for the native-federation build:

"build": {
      "executor": "@angular-architects/native-federation:build",
      "options": {},
      "configurations": {
        "production": {
+          "skipHtmlTransform": true,
[...]
"esbuild": {
      "executor": "@angular-devkit/build-angular:application",
      "configurations": {
        "production": {
+          "index": false,

(excerpt from nx project.json)

I will leave the issue open, as a task to add this to the documentation or perhaps even as a new default setting for micro-frontends?