single-spa-angular: Application not working with webpack externals

Hi there, i’m trying to use single-spa-angular combined with webpack externals to have a single vendor bundle at host app level that can be shared between all microfrontend apps.

How to reporoduce?

create an two angular apps (hostApp, microApp) within your workspace (i’m using nx extension)
add single-spa and single-spa-angular as dependencies and follow the docs
in webpack config file (in microApp) add externals like

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

  singleSpaWebpackConfig.externals = {
    rxjs: 'rxjs',
    '@angular/core': 'ng.core',
    '@angular/common': 'ng.common',
    '@angular/common/http': 'ng.common.http',
    '@angular/platform-browser': 'ng.platformBrowser',
    '@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic',
    '@angular/compiler': 'ng.compiler',
    '@angular/animations': 'ng.animations',
    '@angular/router': 'ng.router',
    '@angular/forms': 'ng.forms',
  };

  return singleSpaWebpackConfig;
};

in angular.json file, in hostapp -> architect -> build -> options -> scripts add following

"scripts": [
    "node_modules/rxjs/bundles/rxjs.umd.js",
    "node_modules/@angular/core/bundles/core.umd.js",
    "node_modules/@angular/common/bundles/common.umd.js",
    "node_modules/@angular/common/bundles/common-http.umd.js",
    "node_modules/@angular/compiler/bundles/compiler.umd.js",
    "node_modules/@angular/platform-browser/bundles/platform-browser.umd.js",
    "node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js",
    "node_modules/@angular/router/bundles/router.umd.js",
    "node_modules/@angular/forms/bundles/forms.umd.js",
    "node_modules/@angular/animations/bundles/animations.umd.js",
]

start both apps and register microApp using single-spa methods.
microApp throws import error

app.component.ts:8 Uncaught TypeError: Cannot read property 'ɵɵdefineComponent' of undefined
    at Module../src/app/app.component.ts (app.component.ts:8)
    at __webpack_require__ (bootstrap:19)
    at Module../src/app/app.module.ts (app.module.ts:1)
    at __webpack_require__ (bootstrap:19)
    at Module../src/main.ts (main.ts:1)
    at __webpack_require__ (bootstrap:19)
    at Object.0 (main.js:10365)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83

The problem. All the imports are swpped with the externals from webpack config. However it looks like main.js file is bundled before using original import with internal module references. (snippet below)

AppComponent.ɵfac = function AppComponent_Factory(t) { return new (t || AppComponent)(); };
AppComponent.ɵcmp = _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdefineComponent"]({ type: AppComponent, selectors: [["angular-application"]], decls: 14, vars: 0, consts: [[1, "flex"], ["href", ""]], template: function AppComponent_Template(rf, ctx) { if (rf & 1) {

Any advaice how to resolve this issue?

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 17 (2 by maintainers)

Most upvoted comments

@tommueller I just made a typo and missed {} after reduce accumulator 😄

arturovt on Mar 9, 2021

@lukszymanski I’m sorry for the delay. You issue is really informative and I’ve finally found out why it didn’t work.

The problem was that our package single-spa-angular/internals was generated with the wrong UMD id by ng-packagr.

I was able to clone your git repo. Your Webpack config for micro-apps is not correct, you’ve got such externals:

return {
  ...singleSpaWebpackConfig,
  externals: {
    rxjs: 'rxjs',
    '@angular/core': 'ng.core',
    '@angular/common': 'ng.common',
    '@angular/common/http': 'ng.common.http',
    '@angular/platform-browser': 'ng.platformBrowser',
    '@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic',
    '@angular/compiler': 'ng.compiler',
    '@angular/animations': 'ng.animations',
    // '@angular/elements': 'ng.elements',
    // '@angular/router': 'ng.router',
    // '@angular/forms': 'ng.forms',
    'single-spa-angular': 'single-spa-angular',
  },
};

ng.{PACKAGE_NAME} is not a correct UMD id for Angular packages, if you type in console:

console.log(window['ng.core'])

It will log undefined, since ng is an object with the core property. The below code is correct and works:

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

  singleSpaWebpackConfig.output.library = 'microApp';

  const mappings = {
    '@angular/core': 'core',
    '@angular/common': 'common',
    '@angular/common/http': 'common.http',
    '@angular/platform-browser': 'platformBrowser',
    '@angular/platform-browser-dynamic': 'platformBrowserDynamic',
    '@angular/compiler': 'compiler',
    '@angular/animations': 'animations',
  };

  const angularExternals = Object.keys(mappings).reduce(
    (accumulator, mapping) => {
      const request = ['ng', mappings[mapping]];

      accumulator[mapping] = {
        root: request,
        commonjs: request,
        commonjs2: request,
        amd: request,
      };

      return accumulator;
    }
  );

  return {
    ...singleSpaWebpackConfig,
    externals: {
      rxjs: 'rxjs',
      ...angularExternals,
      'single-spa-angular': 'single-spa-angular',
    },
  };
};

Also, you’ve added single-spa-angular as an external dependency but you don’t bundle it in scripts of the host app, so you also should’ve added UMD packages to scripts:

"scripts": [
  "node_modules/rxjs/bundles/rxjs.umd.js",
  "node_modules/@angular/core/bundles/core.umd.js",
  "node_modules/@angular/common/bundles/common.umd.js",
  "node_modules/@angular/common/bundles/common-http.umd.js",
  "node_modules/@angular/compiler/bundles/compiler.umd.js",
  "node_modules/@angular/platform-browser/bundles/platform-browser.umd.js",
  "node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js",
  "node_modules/@angular/router/bundles/router.umd.js",
  "node_modules/@angular/forms/bundles/forms.umd.js",
  "node_modules/single-spa-angular/bundles/single-spa-angular-internals.umd.js",
  "node_modules/single-spa-angular/bundles/single-spa-angular.umd.js"
]

The result is:

arturovt on Nov 8, 2020

@nmccrack37 no unfortunately not. For us it’s luckily such a big issue, because it is only a very small part of our application, so I never took the time to investigate further.

tommueller on Oct 28, 2021