single-spa: importmap angular 14 library es module together with systemjs-importmap

905 Views Asked by At

I am trying to get a running single-spa application with some angular micro frontends and a shared library @myorg/mylib for angular UI components.

@myorg/mylib is similar to https://github.com/angular-microfrontends/game-core, which is consumed in angular app https://github.com/angular-microfrontends/play and dependencies are resolved in browser at runtime with import maps defined in index.html by <script type="systemjs-importmap" src="/importmap.json"></script>

you can see the sample importmap json for the github examplere at https://storage.googleapis.com/angular.microfrontends.app/importmap.json

enter image description here

@myorg/mylib generates build output in es(.mjs) format and if i import that with systemjs-importmap json directly as .mjs format, browser gives me runtime error Cannot use import statement outside a module. like so

enter image description here.

I do not have a .umd format because angular does not create it any more enter image description here

If i import it with plain importmap, instead of systemjs-importmap, like below

   <script type="importmap" >
      {
        "imports": {     
          "@myorg/mylib": "http:someserver/myorg-mylib.mjs"
        }
      }
    </script> 

i get runtime error

Uncaught Error: Unable to resolve bare specifier "@myorg/mylib" from http://localhost:4302/main.js

where http://localhost:4302/main.js is the angular micro app which is trying consume a component from @myorg/mylib

I already have a webpack config in the consumer app which tells webpack that not to worry about those dependencies at bundling time, as described in single-spa-angular docs

const singleSpaAngularWebpack = require('single-spa-angular/lib/webpack').default;

module.exports = (config, options) => {
  const singleSpaWebpackConfig = singleSpaAngularWebpack(config, options);

  // Feel free to modify this webpack config however you'd like to

  singleSpaWebpackConfig.externals.push(
    '@myorg/mylib'
  );
  return singleSpaWebpackConfig;
};

how to get this working so that i can share UI components from @myorg/mylib in other angular micro front ends.

0

There are 0 best solutions below