share-loader

[NishanthRE]

@MrFrankel Firstly your idea with the share-loader was amzing. i have some doubts. i have created a new angular 9 application into the example cli folder and included all your dependencies like extra-webpack config and changed the angular.json as we need. when triggering the build command i have stucked with the following error
`
Generating ES5 bundles for differential loading...
An unhandled exception occurred: f:\Research & Dev\share-loader\example-cli\ext-app2\polyfills-es5.js: Invalid left-hand side in assignment expression (9:2)

7 | exports["polyfills-es5.js"] = factory(polyfills-es5.js);
8 | else

9 | polyfills-es5.js = factory(polyfills-es5.js);
| ^
10 | })(window, function(WEBPACK_EXTERNAL_MODULE_f_Research_Dev_share_loader_example_cli_ext_app2_node_modules_angular_devkit_build_angular_src_angular_cli_files_models_es5_polyfills_js) {
11 | return // (function(modules) { // webpackBootstrap
12 | // // The module cache
See "C:\Users\Admin\AppData\Local\Temp\ng-HFejQJ\angular-errors.log" for further details.`

and when i try to load the newly created application from shell app am receiving like this

Can you please help me to get out from this?

[alexej-strelzow]

@NishanthRE : the example from this repo only works with Angular < 9. For Angular 9 you have manually manage to get the app-bundle into the window-object (not via LastCallWebpackPlugin in webpack config.

For this you can use the following trick (es module import):

import(/* webpackChunkName: "login" */ './app/app.external.module').then(m => {
  (window as any)['login'] = {};
  (window as any)['login']['appModule'] = m.AppModule;
});

This will generate a login-chunk in your dist folder, so your main-chunk gets split into main- and login-chunk, where the login-chunk contains the micro frontend. And the main-chunk will load the login-chunk.

So, then you also have to tweak the sLoader to wait for the chunk. You can do sth like this:

  /**
   * Checks in a certain interval if the AppModule is available inside the window object
   * in order to hand it over to Angular's loadChildren function (lazy loading).
   * @param resolvedScript The micro frontend we are waiting for
   */
  private static async waitForMicroFrontendToBeAvailable(resolvedScript: Script) {
    while (window[resolvedScript.name]?.[resolvedScript.module] === undefined) {
      await new Promise(r => setTimeout(r,  300));
    }
  }

[NishanthRE]

@MrFrankel/share-loader<mailto:[email protected]>: Thanks for your response. Surely will do these changes in my app and request is can you please update the share loader sample code for angular 9 in your git because it will be usefull many of the peoples. Thanks, Nishant From: Alexej Strelzow <[email protected]> Sent: 03 May 2020 18:36 To: MrFrankel/share-loader <[email protected]> Cc: Nishanthkumar M <[email protected]>; Mention <[email protected]> Subject: Re: [MrFrankel/share-loader] share-loader (#43) @NishanthRE<https://github.com/NishanthRE> : the example from this repo only works with Angular < 9. For Angular 9 you have manually manage to get the app-bundle into the window-object (not via LastCallWebpackPlugin in webpack config. For this you can use the following trick (es module import): import(/* webpackChunkName: "login" */ './app/app.external.module').then(m => { (window as any)['login'] = {}; (window as any)['login']['appModule'] = m.AppModule; }); This will generate a login-chunk in your dist folder, so your main-chunk gets split into main- and login-chunk, where the login-chunk contains the micro frontend. And the main-chunk will load the login-chunk. So, then you also have to tweak the sLoader to wait for the chunk. You can do sth like this: /** * Checks in a certain interval if the AppModule is available inside the window object * in order to hand it over to Angular's loadChildren function (lazy loading). * @param resolvedScript The micro frontend we are waiting for */ private static async waitForMicroFrontendToBeAvailable(resolvedScript: Script) { while (window[resolvedScript.name]?.[resolvedScript.module] === undefined) { await new Promise(r => setTimeout(r, 300)); } } — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#43 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AKJDF2XAIKIFJVK3644YUFTRPVT2NANCNFSM4K5YYEMA>.

[anjireddy-kata]

Hello @NishanthRE,

Are you able to resolve the issue? If YES, could you please share us the code. I couldn't able to resolve with above provided solution. Any help would be appreciated.

[myushchenko]

Also, to resolve this issue you can change "target" from "es2015" to "es5" in tsconfig.json.