Usage with Module Federation

[Ryaryu]

Hi, I'm trying to use this library in a Module Federation application, but I'm getting the error: grapesjs is not defined.

The error seems to occur here: https://github.com/Developer-Plexscape/ngx-grapesjs/blob/master/projects/ngx-grapesjs/src/lib/editor.component.ts
The declared var is not exported by webpack, and the code assumes the script will be loaded from angular.json, which the MF module doesn't loads. So when the Editor Component tries to load grapesjs, it fails since grapesjs was never defined...
I'm failing to make webpack export the script... Any tips on how to make this work?

My webpack.config.js:

const {
  shareAll,
  withModuleFederationPlugin,
  share,
} = require('@angular-architects/module-federation/webpack');
const LiveReloadPlugin = require('webpack-livereload-plugin');

module.exports = withModuleFederationPlugin({
  name: 'APP',

  exposes: {
    './Module': './src/app/exposed/exposed.module.ts',
    'grapesjs': 'grapesjs',
  },

  shared: {
    ...share({
      //...
    }),
  },
});

module.exports.plugins.push(new LiveReloadPlugin());

My angular.json:

  //...
  "build": {
    "builder": "ngx-build-plus:browser",
    "options": {
      "outputPath": "dist/remote",
      "index": "src/index.html",
      "polyfills": ["zone.js"],
      "tsConfig": "tsconfig.app.json",
      "inlineStyleLanguage": "scss",
      "assets": ["src/favicon.ico", "src/assets"],
      "styles": [
         "src/styles.scss",
         "node_modules/grapesjs/dist/css/grapes.min.css"
      ],
      "scripts": [
        "node_modules/grapesjs/dist/grapes.min.js",
        "node_modules/grapesjs-preset-webpage/dist/index.js",
        "node_modules/grapesjs-blocks-basic/dist/index.js"
      ],
  //...

My package.json:

  //...
  "dependencies": {
    "@angular/animations": "~17.2.0",
    "@angular/common": "~17.2.0",
    "@angular/compiler": "~17.2.0",
    "@angular/core": "~17.2.0",
    "@angular/forms": "~17.2.0",
    "@angular/material-moment-adapter": "^16.0.0",
    "@angular/platform-browser": "~17.2.0",
    "@angular/platform-browser-dynamic": "~17.2.0",
    "@angular/router": "~17.2.0",
    "grapesjs": "^0.21.12",
    "grapesjs-blocks-basic": "^1.0.2",
    "grapesjs-preset-webpage": "^1.0.3",
    "ngx-grapesjs": "^17.0.0",
   //...

I'm forced to use angular 17 so i picked ngx-grapesjs version that used Angular 17.

[bampakoa]

Hello @Ryaryu, thank you for using this library!

The declared variable does not import the actual script, it is just for providing the typings to Angular. The script that you need to import is node_modules/grapesjs/dist/grapes.min.js which is defined in the angular.json file.

[Ryaryu]

Thank you for answering.

The declared variable does not import the actual script, it is just for providing the typings to Angular. The script that you need to import is node_modules/grapesjs/dist/grapes.min.js which is defined in the angular.json file.

Yep. And that's the problem, hehe.
The MF container doesn't import grapes and I can't change it. So I'm trying to import eveything from the MF module. But since MF containers doesn't take into consideration the angular.json from MF modules, grapes.js doesn't load and I get the error, even if I export it via webpack...

[manfredsteyer]

Hi,

it seems like you try to expose something you have installed via npm -- is this observation correct?

If yes, this will not work. You can only expose parts of your own source code. If you want to share a lib with other MFs, you need to put it into the shared section. If you already have shareAll there, everything found in your package.json under dependencies should be shared.