In Angular, using WebPack 5 Module Federations, how can we expose Web Workers used by a remote?

[gigadie]

Hi All,
using Webpack 5, in my configuration I am currently having a shell application and a remote, both written in angular 12.2.0, and I'm facing a problem I am not sure how to solve.

SHELL webpack.config.js

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
  path.join(__dirname, '../../tsconfig.json'),
  ['auth-lib']
);

module.exports = {
  output: {
    uniqueName: "shell",
    publicPath: "auto"
  },
  optimization: {
    runtimeChunk: false
  },
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    }
  },
  plugins: [
    new ModuleFederationPlugin({

        // For hosts (please adjust)
        remotes: {
          "myremote": "myremote@http://localhost:4250/remoteEntry.js"
        },

        shared: share({
          "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
          "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
          "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
          "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },

          ...sharedMappings.getDescriptors()
        })

    }),
    sharedMappings.getPlugin()
  ],
};

REMOTE webpack.config.js

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
  path.join(__dirname, 'tsconfig.json'),
  [/* mapped paths to share */]
);

module.exports = {
  output: {
    uniqueName: "myremote",
    publicPath: "auto"
  },
  optimization: {
    runtimeChunk: false
  },
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    }
  },
  plugins: [
    new ModuleFederationPlugin({

        // For remotes (please adjust)
        name: "myremote",
        filename: "remoteEntry.js",
        exposes: {
            './Module': './src/app/myremote/myremote.module.ts'
        },

        shared: share({
          "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
          "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
          "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
          "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },

          ...sharedMappings.getDescriptors()
        })

    }),
    sharedMappings.getPlugin()
  ],
};

Everything works smoothly when I use the reference to my remote module in the shell app like so:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';

const routes: Routes = [{
  path: '',
  component: HomeComponent,
  pathMatch: 'full'
}, {
  path: 'myremote',
  loadChildren: () => import('myremote/Module').then(m => m.MyRemoteModule)
}];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

The problem appears when the remote module's component within its code instantiate a new Web Worker like so:

const myWorker = new Worker(
    new URL('../path/to/workers/worker.ts',
    import.meta.url
  ),
  { type: 'module', name: 'my-worker' }
);

The code above, in Webpack 5, already generates a separate bundle in my app called my-worker.js, and it's not part nor of the component's neither the module's bundle. Therefore exposing the module to Module Federation, will not expose into the remoteEntry.js also the worker's code. Then trying with the shell app to navigate to the route which loads my remote, will error and notify that:

ERROR Error: Uncaught (in promise): SecurityError: Failed to construct 'Worker': Script at 'http://localhost:4250/my-worker.js' cannot be accessed from origin 'http://localhost:5000'. Error: Failed to construct 'Worker': Script at 'http://localhost:4250/my-worker.js' cannot be accessed from origin 'http://localhost:5000'.

So the question is, if I want to have a remote and expose its modules to be used in a shell app, and one of its modules uses a Web Worker, how can I make sure that the separate worker bundle created by Webpack is also exposed in order for the shell app to be able to instantiate it?

---

Asked also on stack overflow:
https://stackoverflow.com/questions/69361483/in-angular-using-webpack-5-module-federations-how-can-we-expose-web-workers-us

[alexander-akait]

ERROR Error: Uncaught (in promise): SecurityError

You need setup CORS, please read https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

[LironHazan]

@alexander-akait
CORS were setted up in my case,
Serving the remote app via proper proxy config, there's a proper indication which looks like:
Generating browser application bundles (phase: setup)...[HPM] Proxy created: /web/api/v2.1 -> https://foo.net
(My shell is also served using same proxy conf BTW)

But I'm still having the issue...
Not sure how it was resolved to @gigadie
I'll extremely appreciate a tiny example before I'll turn into alternatives which require code modifications which I would like to avoid

[LironHazan]

@gigadie I'm experiencing the same issue, basically I'm developing in front of a proxy (starting the server with the --proxy-config flag) and the CORS defs are enabled (at least for API interactions), did you added something to your shell webpack.config?

[thalesxavier]

Hi guys, I'm having the same problem. Can you help me? I've tried to implement the proxy but without success. @gigadie did you manage to solve it?

[protonyx]

I haven't been able to get Web Workers running at all in an Angular 14 app using Module Federation either on the host or the remote. Does anybody happen to have a sample project with it working that I could reference?

I opened an issue with @angular-architects/module-federation (angular-architects/module-federation-plugin#304), but I am not sure that is where the problem resides. I also have a repro project: https://github.com/protonyx/ng-module-federation-web-worker

[gigadie]

I resolved it as suggested by alexander-akait, I even marked it as answered on stack overflow, have a look guys.

[gigadie]

As mentioned here #14648 (reply in thread)

At the end I solved it using fetch instead:

export class CorsWorker {
    private readonly url: string | URL;
    private readonly options?: WorkerOptions;

    // Have this only to trick Webpack into properly transpiling
    // the url address from the component which uses it
    constructor(url: string | URL, options?: WorkerOptions) {
        this.url = url;
        this.options = options;
    }

    async createWorker(): Promise<Worker> {
        const f = await fetch(this.url);
        const t = await f.text();
        const b = new Blob([t], {
            type: 'application/javascript',
        });
        const url = URL.createObjectURL(b);
        const worker = new Worker(url, this.options);
        return worker;
    }
}

and then

import { CorsWorker as Worker } from './cors-worker';

// aliasing CorsWorker to Worker makes it statically analyzable

const corsWorker = await (new Worker(
    new URL('../workers/my-worker.worker', import.meta.url),
    { type: 'module', name: 'my-worker' },
)).createWorker();