Application not working with webpack externals #204

lukszy · 2020-05-28T14:38:08Z

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?

The text was updated successfully, but these errors were encountered:

arturovt · 2020-05-28T16:20:29Z

Sharing dependencies is not possible in Angular 9.

joeldenning · 2020-05-28T16:21:03Z

Angular 9 with the Ivy Compiler enabled does not support sharing dependencies between separate microfrontends. You can read more about that at https://twitter.com/Joelbdenning/status/1253781652486017024.

My understanding is that Angular 10's Ivy compiler may support this.

If you'd like to share dependencies with Angular 9, it is possible but only if you turn off the Ivy Compiler and go back to View Engine.

arturovt · 2020-05-30T23:28:39Z

Why didn't you provide a minimal reproducible example? I can't always spend my time going through steps manually. I'd rather spend this time fixing some bug or helping you to resolve the issue than trying to reproduce it manually 😞

microApp throws import error - this is falsy. hostApp throws this error. As you didn't provide reproducible example I had to guess what's wrong with your example. I was wondering why did you provide scripts in angular.json -> host-app? Basically your dependencies will be bundled twice since you don't have webpack.config.externals in host-app.

You have to expose dependencies to window object in the host-app, this can be done via expose-loader or other tools, just google. I went the fastest way:

// apps/host-app/src/polyfills.ts

import * as rxjs from 'rxjs';
import * as compiler from '@angular/compiler';
import * as core from '@angular/core';
import * as common from '@angular/common';
import * as commonHttp from '@angular/common/http';
import * as platformBrowser from '@angular/platform-browser';
import * as platformBrowserDynamic from '@angular/platform-browser-dynamic';
import * as router from '@angular/router';
import * as singleSpaAngular from 'single-spa-angular';

const win = window as any;

win.rxjs = rxjs;
win['ng.compiler'] = compiler;
win['ng.core'] = core;
win['ng.common'] = common;
win['ng.common.http'] = commonHttp;
win['ng.platformBrowser'] = platformBrowser;
win['ng.platformBrowserDynamic'] = platformBrowserDynamic;
win['ng.router'] = router;
win.singleSpaAngular = singleSpaAngular;

And this is my apps/micro-app/webpack.config.js:

module.exports = config => {
  config = require('single-spa-angular/lib/webpack').default(config);

  config.output.library = 'microApp';

  config.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',
    'single-spa-angular': 'singleSpaAngular',
  };

  return config;
};

This is my apps/host-app/src/main.ts:

import { registerApplication, start } from 'single-spa';

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

function loadScript() {
  return new Promise(resolve => {
    const script = document.createElement('script');
    script.src = 'http://localhost:8080/main.js';
    script.addEventListener('load', resolve);
    document.head.appendChild(script);
  });
}

registerApplication({
  name: 'microApp',
  app: () => loadScript().then(() => window.microApp),
  activeWhen: () => true,
});

start();

platformBrowserDynamic().bootstrapModule(AppModule);

This is my apps/host-app/src/app/app.component.html:

<div class="micro-app-host"></div>

This is my apps/micro-app/src/main.ts:

import { enableProdMode, NgZone } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { singleSpaAngular } from 'single-spa-angular';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

const lifecycles = singleSpaAngular({
  template: '<micro-app-nx-root />',
  bootstrapFunction: () => platformBrowserDynamic().bootstrapModule(AppModule),
  NgZone,
  domElementGetter: () => document.querySelector('.micro-app-host'),
});

export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;

Result:

micro-app/main.js size is 46kb:

lukszy · 2020-06-01T10:31:15Z

Thanks for a quick reponse.
Sorry for not providing an example, my bad. Here's a repository https://github.com/lukszymanski/single-spa-angular-nx-demo

In my case host application is not an angular app. It's just some html with vendor files that's why i've provided vendors in angular.json. Adding vendor files (UMD version) in angular.json to host-app we gonna have all of them accesable from window.

Having this setup the error is thrown when loading microApp/microApp1 but the soruce of it is placed in micro application bundle file with bad replaced imports for @angular/core - described in the first post.

arturovt · 2020-11-08T18:33:05Z

@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:

lukszy · 2020-11-09T18:57:32Z

cool! thank you for helping out! 💪

joeldenning · 2020-11-09T22:37:54Z

This is published in https://github.com/single-spa/single-spa-angular/releases/tag/v4.7.0

tommueller · 2020-12-09T15:41:14Z

@arturovt are you sure that the code you provided works? I added it to my custom-webpack.js and everything works fine from the application perspective, but the bundle size stays the same. Shouldn't it decrease the bundle size quite immensely?

wudith · 2021-02-25T11:51:27Z

@arturovt are you sure that the code you provided works? I added it to my custom-webpack.js and everything works fine from the application perspective, but the bundle size stays the same. Shouldn't it decrease the bundle size quite immensely?

Yes, I agree. The size does not change much.

ayyappamaddi · 2021-02-25T13:06:28Z

@arturovt , @wudith , sharing modules works in Angular 8 as well?

arturovt · 2021-03-09T00:04:58Z

@tommueller @wudith well, I've decided to check.

This is before:

This is after:

This navbar app is inside this repository, you can clone it and try it out.

tommueller · 2021-03-09T10:38:00Z

Thanks @arturovt . I can confirm that with the code in the image (webpack.config.ts) it does work for me as well. With the js code from you last post, it does actually not work for me.

arturovt · 2021-03-09T10:51:33Z

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

tommueller · 2021-03-09T11:25:28Z

@arturovt When I now load the application with the externals configured (and the small bundle size) I run into:

http://localhost:4201/main.js module could not be loaded! Error: Unable to resolve bare specifier 'ng,core' from http://localhost:4201/main.js (SystemJS Error#8 https://git.io/JvFET#8)
    at system.min.js:4

nmccrack37 · 2021-10-28T11:51:12Z

@tommueller just wondering - did you ever resolve the bare specifier issue above? Running into the same problem myself

tommueller · 2021-10-28T11:53:25Z

@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.

parasharsh · 2023-02-24T10:44:21Z

Is anyone able to get this working with Angular 14?

arturovt mentioned this issue Nov 8, 2020

fix: provide umdId for the single-spa-angular/internals #299

Merged

joeldenning closed this as completed in #299 Nov 9, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Application not working with webpack externals #204

Application not working with webpack externals #204

lukszy commented May 28, 2020 •

edited

arturovt commented May 28, 2020

joeldenning commented May 28, 2020

arturovt commented May 30, 2020

lukszy commented Jun 1, 2020 •

edited

arturovt commented Nov 8, 2020

lukszy commented Nov 9, 2020

joeldenning commented Nov 9, 2020

tommueller commented Dec 9, 2020

wudith commented Feb 25, 2021

ayyappamaddi commented Feb 25, 2021

arturovt commented Mar 9, 2021 •

edited

tommueller commented Mar 9, 2021 •

edited

arturovt commented Mar 9, 2021 •

edited

tommueller commented Mar 9, 2021 •

edited

nmccrack37 commented Oct 28, 2021

tommueller commented Oct 28, 2021

parasharsh commented Feb 24, 2023

Application not working with webpack externals #204

Application not working with webpack externals #204

Comments

lukszy commented May 28, 2020 • edited

arturovt commented May 28, 2020

joeldenning commented May 28, 2020

arturovt commented May 30, 2020

lukszy commented Jun 1, 2020 • edited

arturovt commented Nov 8, 2020

lukszy commented Nov 9, 2020

joeldenning commented Nov 9, 2020

tommueller commented Dec 9, 2020

wudith commented Feb 25, 2021

ayyappamaddi commented Feb 25, 2021

arturovt commented Mar 9, 2021 • edited

tommueller commented Mar 9, 2021 • edited

arturovt commented Mar 9, 2021 • edited

tommueller commented Mar 9, 2021 • edited

nmccrack37 commented Oct 28, 2021

tommueller commented Oct 28, 2021

parasharsh commented Feb 24, 2023

lukszy commented May 28, 2020 •

edited

lukszy commented Jun 1, 2020 •

edited

arturovt commented Mar 9, 2021 •

edited

tommueller commented Mar 9, 2021 •

edited

arturovt commented Mar 9, 2021 •

edited

tommueller commented Mar 9, 2021 •

edited