How do I access a shared asset via Angular mdule federation?

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' }),
  },

});