angular-architects / module-federation-plugin

MIT License
683 stars 184 forks source link

Native federation - 404 not found remoteEntry when use baseHref in angular.json #540

Open geornibg opened 3 weeks ago

geornibg commented 3 weeks ago

Hello Guys, I am trying to build up a MFE application with Angular 17 and Native Federation (v17.1.7) The concept is the Shell, MFE1 and MFE2 to have same domain but they are hosted in different subfolders, for example:

Shell - example.com
MFE1 - example.com/mfe1
MFE2 - example.com/mfe2

I followed the official website's manual and set the baseHref to be ‘/mfe1’ in angular.json in first MFE and '/mfe2' in second MFE app like this:

    "esbuild": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist",
            "baseHref": "/mfe1/",
            "index": "src/index.html",

and also here:

  "architect": {
        "build": {
          "builder": "@angular-architects/native-federation:build",
          "options": {
            "baseHref": "/mfe1/",
            "index": "src/index.html",
            "main": "src/main.ts",

also in src/index.html file

<base href="/mfe1">

The issue is that when i tried to open each MFE directly in example.com/mfe1 it give me an error in console:

remoteEntry.js 404 Not Found

All other files like chunk-xxxyyzz.js and main.js are correctly loaded without any errors. I already checked the dist/browser folder and the file is there, successfully created.

When i tried to fetch the remoteEntry without subfolder like example.com/remoteEntry.js it loads correctly. Did anyone have a similar issue?