Angular 14、使用模块联合，我如何从远程应用程序内部确定我的远程应用程序的绝对路径？

Question

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.

Answer 1

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