Tests fail to run when importing loadRemoteModule in a component

[pamartinez-signify]

Using loadRemoteModule(remote, './ModuleName'); to access a remote's module in a component is causing ng test to fail with the following error:

./node_modules/@angular-architects/native-federation/src/index.js:1:0 - Error: Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js
 * ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
> export * from '@softarc/native-federation-runtime';


06 03 2024 12:48:39.961:INFO [karma-server]: Karma v6.4.3 server started at http://localhost:9876/
06 03 2024 12:48:39.962:INFO [launcher]: Launching browsers ChromeHeadlessNoSandbox with concurrency unlimited
06 03 2024 12:48:39.962:ERROR [karma-server]: Error: Found 1 load error
    at Server.<anonymous> (/Users/pamartinez/workspace/azure/omc-ui/node_modules/karma/lib/server.js:243:26)
    at Object.onceWrapper (node:events:628:28)
    at Server.emit (node:events:526:35)
    at emitListeningNT (node:net:1906:10)
    at process.processTicksAndRejections (node:internal/process/task_queues:81:21)

Is this the right way to load a remote's module in a component/service?

[Manfred Steyer]

I would not unit test something that uses loadRemoteModule. It's something for an E2E test.

[Michael Wolbert]

Use fileReplacements in your test target's configuration to create different entrypoints. See #495 (comment).

For example;

• main.ts (dev and prod configuration using nf's initFederation)
• main.test.ts (test configuration with mock for initFederation)

Similarly;

• app.routes.ts (dev and prod configuration using nf's loadRemoteModule)
• app.routes.test.ts (test configuration with mock for loadRemoteModule)

Config should look like..

architect.test.configurations.test.fileReplacements = [
{
replace: "apps/app/main.ts",
with: "apps/app/main.test.ts"
},
{
replace: "apps/app/src/app.routes.ts",
with: "apps/app/src/app.routes.test.ts"
}
]