Only file and data URLs are supported by the default ESM loader

Problem

I have created an angular universal app which throws this error when calling loadRemoteModule in nodejs – server-side with any http:// string.

Research

I conducted some initial research which has lead me to this thread on stack overflow.

https://stackoverflow.com/questions/69665780/error-err-unsupported-esm-url-scheme-only-file-and-data-urls-are-supported-by

Based on that I installed the node 16.13.2 and recompiled the libs and app.

However, I am still being blessed with the same error on mac os x with a m chip using nvm.

Any ideas how to resolve this so that the application can call loadRemoteModule using a http resource string on the server?

Recreate

shell repo: https://github.com/ng-druid/platform child repo: https://github.com/ng-druid/fed-micro-ng

Install SHELL libraries

chmod +x bin/build_libs.sh
./bin/build_libs.sh

Run SHELL local ssr

chmod +x bin/run_local.sh
./bin/run_local.sh

Run CHILD local

npm install
ng serve

Example page: http://localhost:4000/flights/flights-search

Take note of error in console server-side.

Temp Work-around

This isn't a show stopper since the lookup can be excluded server-side. However, this than results in a page not found being sent from the server than transitions on the front-end client properly since loadRemoteModule doesn't fail in the browser only the server.

modules/alienalias/src/lib/entity-metadata.ts

//import { EntityMetadataMap } from '@ngrx/data';
import { isPlatformServer } from '@angular/common';
import { CrudEntityMetadataMap, CrudEntityQueryMapping } from 'crud';
import { AlienaliasSettings } from './models/alienalias.models';

export const entityMetadataFactory = (platformId: Object, alienaliasSettings: AlienaliasSettings): CrudEntityMetadataMap => {
  return {
    AlienAlias: {
      entityName: 'AlienAlias',
      crud: {
        //...(isPlatformServer(platformId) ?
        // {} :
        //{ 
          aws_opensearch_template: {
            ops: ['query'],
            params: {
              id: 'panelpagelistitems', // in a way this could just be a generic routes template - index can change.
              index: 'classified_alienalias',
              hits: true,
              source: true,
              domain: alienaliasSettings.openSearchDomain,
              region: 'us-east-1'
            }
          },
        //}),
        ...(isPlatformServer(platformId) ?
          {} :
          {
            idb_keyval: {
              params: {
                prefix: 'alienalias__'
              },
              queryMappings: new Map<string, CrudEntityQueryMapping>([
                // ['path', { defaultOperator: 'startsWith' }]
                ['site', { defaultOperator: 'term||wildcard' }],
                ['path', { defaultOperator: 'term||wildcard' }]
              ])
            }
          }
        )
      }
    }
  }
};

That files content can be replaced with this to have loadRemoteModule ignored on the server but work in the client.

//import { EntityMetadataMap } from '@ngrx/data';
import { isPlatformServer } from '@angular/common';
import { CrudEntityMetadataMap, CrudEntityQueryMapping } from 'crud';
import { AlienaliasSettings } from './models/alienalias.models';

export const entityMetadataFactory = (platformId: Object, alienaliasSettings: AlienaliasSettings): CrudEntityMetadataMap => {
  return {
    AlienAlias: {
      entityName: 'AlienAlias',
      crud: {
        ...(isPlatformServer(platformId) ?
        {} :
        { 
          aws_opensearch_template: {
            ops: ['query'],
            params: {
              id: 'panelpagelistitems', // in a way this could just be a generic routes template - index can change.
              index: 'classified_alienalias',
              hits: true,
              source: true,
              domain: alienaliasSettings.openSearchDomain,
              region: 'us-east-1'
            }
          },
        }),
        ...(isPlatformServer(platformId) ?
          {} :
          {
            idb_keyval: {
              params: {
                prefix: 'alienalias__'
              },
              queryMappings: new Map<string, CrudEntityQueryMapping>([
                // ['path', { defaultOperator: 'startsWith' }]
                ['site', { defaultOperator: 'term||wildcard' }],
                ['path', { defaultOperator: 'term||wildcard' }]
              ])
            }
          }
        )
      }
    }
  }
};

When that file is changed to the above and alienalias module is recompiled, app ran again locally there will be a temporary display "page not found" a few seconds later transition flights module page will occur correctly.

Thanks

angular-architects / module-federation-plugin