0

I'm using Angular 14 and module federation. How do I find the absolute path of my remote application from within my remote application? In my remote application, I expose the module using

module.exports = withModuleFederationPlugin({

  name: 'checklogo',

  exposes: {
    './Component': './src/app/app.component.ts',
    './start':'./src/app/my-products/my-products.module.ts'
  },

  shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },

});

and then in my src/app/services I have this

@Injectable({
  providedIn: 'root'
})
export class SettingsService {

    ...
     public init() {
        const absolutePath = ???
        this.configuration = initFile(`${absolutePath}/config.json`);

In my shell application, I reference the remote module when I init my routes like so

const routes: Routes = [
  {
    ...
      {
        path: 'my-products',
        initChildren: () =>
            initRemoteModule({
                type: 'module',
                remoteEntry: getRemoteEntryUrl(),
                exposedModule: './start'
            })
            .then(m => m.MyProductsModule)
      },

I don't quite know what to put in the "const absolutePath = ???" line of my "init" method within the service.

Amer
  • 6,162
  • 2
  • 8
  • 34
Dave
  • 15,639
  • 133
  • 442
  • 830

1 Answers1

0

To achieve that, the remote entries should be defined in the shell app (not in the remote one) either in a static way or dynamically.

Static Federation approach:

// projects\shell\webpack.config.js

module.exports = withModuleFederationPlugin({
  remotes: {
    mfe1: 'http://localhost:4201/remoteEntry.js',
  },
  //...
}

Dynamic Federation approach:

Adjust the shell's main.ts (projects/shell/src/main.ts) as follows:

import { loadManifest } from '@angular-architects/module-federation';

// You can use a JSON manifest from assets or from server: 
loadManifest('assets/mf.manifest.json')
  .catch((err) => console.error('Error loading remote entries', err))
  .then(() => import('./bootstrap'))
  .catch((err) => console.error(err));

The JSON manifest content should be as follows:

{
  "mfe1": "http://localhost:4201/remoteEntry.js"
}

For more details about Webpack Module Federation in Angular, see: https://github.com/angular-architects/module-federation-plugin/blob/main/libs/mf/tutorial/tutorial.md

Amer
  • 6,162
  • 2
  • 8
  • 34
  • I'm not understanding how I get the absolute URL in the remote application from this answer. Also, you are hard-coding "http://localhost:4201" in a couple of places. This might work locally, but this won't work across different environments (qa, production). The solution needs to be flexible enough to work everywhere. – Dave Jan 06 '23 at 15:20
  • As I mentioned in the dynamic federation approach, you can fetch and load the mfe-manifest from the server either by 1) a separate endpoint to return all the remote URLs related to this environment, or by 2) storing them in a JSON config file in the app's assets that would be replaced in the deployment process for each environment (qa, prod... etc). – Amer Jan 06 '23 at 17:17
  • I guess I'm still pretty new and this module federation stuff, but could you include the code that woudl be run in the remote application that would determine its absolute path? – Dave Jan 06 '23 at 18:23
  • It's not something that you determine in the remote apps. The remote URL refers to the server where you deployed this remote app. Each remote app should be deployed to a separate URL. If you're deploying the remote apps to the same server and the same base URL of your app (but in a subdirectory), then you can use the relative paths in your mfe manifest. – Amer Jan 06 '23 at 18:36
  • So you're saying the remote application cannot determine its own URL without knowledge of or interaction with the shell application? That doesn't seem right but again, I'm a novice at this. – Dave Jan 06 '23 at 19:13
  • No, I didn't say that. I mean even if you added the app URL in the remote (mfe) environment or config files, it doesn't matter. What matters is where you deployed the MFE app and on which URL you plan to access it from another shell (mfe) app or as a separate app. – Amer Jan 06 '23 at 19:26