如何通过 Angular 模块联合访问共享资产？

Question

I'm using Angular 14 and module federation. In my remote app, I have this file structure

- package.json
- webpack.config.js
+ src
    - settings.json
    + app
        + services
            - app.service.ts

In my app.service.ts file, I access a static JSON file like so

@Injectable({
  providedIn: 'root'
})
export class AppService {
    ...
     public init() {
        const request = new XMLHttpRequest();
        request.open('GET', this.configUrl, false);
        request.send(null);
        ...
    }

In my webpack.config.js file I attempt to expose my module and file like so

module.exports = withModuleFederationPlugin({

  name: 'productlist',

  exposes: {
    './Component': './src/app/app.component.ts',
    './dashboard':'./src/app/my-product-list/my-product-list.module.ts'
  },

  shared: {
    '.settings.json': {
      singleton: true,
      eager: true,
      import: './src/settings.json',
      requiredVersion: 'auto',
    },
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },

});

Problem is, when I access my remote via a shell application, the "settings.json" file can no longer be found. How do I reference it from, or share it with my shell? I have this in my shell's webpack.config.js file

module.exports = withModuleFederationPlugin({

  name: 'shellapp',

  remotes: {
    "productlist": "http://localhost:4204/remoteEntry.js",
    "settings.json": "http://localhost:4202/settings.json",
  },
    ...

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

});

Answer 1

to share the settings.json file with your shell application you will need to include it in the shared section of your shell's webpack.config.js file. in the shared sectin you can specify the settings.json file as follows:

shared: {
    'settings.json': {
      singleton: true,
      eager: true,
      import: 'http://localhost:4202/settings.json',
      requiredVersion: 'auto',
    },
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },

this will make the settings.json file available to your shell application and allow you to import it using the import statement in your shell's code as follows:

import settings from 'settings.json';

Answer 2

Updated answer:

I made some research. I think, is not possible to share settings.json through the webpack.config.js file. A better approach would be to create a settings library that loads the settings from the settings.json file and exposes them through interfaces or services.

The only way I found so far was this article

---

I got it wrong thats why I updated my answer, I think you should rename .settings.json to settings.json

module.exports = withModuleFederationPlugin({

  shared: {
    'settings.json': {
      singleton: true,
      eager: true,
      import: './src/settings.json',
      requiredVersion: 'auto',
    }
  },
});

Answer 3

I think you should reference the settings.json file from your shell application using module federation in Angular. So you also expose the file to the shell application in the exposess property of the remote application's webpack.config.js file, like this..

In the remote application's webpack.config.js file:

module.exports = withModuleFederationPlugin({
  name: 'productlist',

  exposes: {
    './settings.json': './src/settings.json',
  },

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

In the shell application's webpack.config.js file:

module.exports = withModuleFederationPlugin({
  name: 'fiduciary',

  remotes: {
    "productlist": "http://localhost:4204/remoteEntry.js",
  },

  shared: {
    "settings.json": {
      requiredVersion: 'auto',
      remote: "productlist/settings.json",
    },
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },
});

Then, you should be able access the settings.json file in your shell application:

import settings from 'settings.json';