Unable to include third party libraries with "single-spa-angular"

[joeldenning]

Unable to include third party libraries with "single-spa-angular"

[joeldenning]

I hope you are able to find a good solution for those angular applications.

Regarding the issue you reported, see related single-spa/single-spa-angular#59 which talks about the assets in angular.json.

The behavior you are seeing is known/expected behavior, as we brainstorm better solutions.

With single-spa, there is only one HTML file, instead of one per angular application. Which means that the scripts and assets in the angular.json don't have a perfect way to be injected into the HTML like they would if there were a separate HTML file for each.

Options for you:

1. Add deepstream and echarts into the root html file (preferred). Use a CDN like cdnjs or jsdelivr, which have both of those libraries.
2. Add import 'echarts/dist/echarts.min.js' (and similar for deepstream) into your main.single-spa.ts file. Which includes them into your javascript bundle instead of in the HTML file.
3. Use a partial webpack config and add deepstream and echarts as webpack externals. Make the externals be loaded from the CDN and then import them with import 'echarts' and import 'deepstream':

// in your partial webpack config
{
  externals: {
    "deepstream": "https://jsdelivr.com/...",
    "echarts": "https://jsdelivr.com/..."
  }
}

I'm closing this since I think I've explained how it is known/expected behavior. If you have better ideas for how the scripts/assets from angular.json would be loaded, feel free to reopen or propose a change to single-spa-angular.