Make a quick vote 🗳 ️How do you refer to SuiteCRM extensions: add-ons or plug-ins? Click here to have your say 👈

Unable to create Front-End Extension Module

Hello Guys,

I was checking on the suitecrm 8 and trying to create a front-end extension module.
I completed the installation process successfully.
When I run the last build command it gives me the error (attached).

Is it me only or any other faced this type of problem?

Can anyone help me with this?


Hi there @Krishna Fabulous to see you trying to build on Suite8. Can you give us more details on what you are trying to do? Have you followed the documentation?

Yes, I followed all the steps from 1 to 6 and stuck on the 7th step.
I was trying to create an extension module “myExt” (same as mentioned along with commands)

Let me share screenshots for both files app.modules.ts and extension.module.ts


Screenshot_15

Hi @Krishna,

Sorry for the delay in replying.

It looks like the main app (the ‘shell’) is trying to pull in the extension and compile time, which should not happen.

Were there any changes done in core/app? could you check the following file please? core/app/shell/src/app/app.module.ts

Could also check if there is any file outside the extensions folder referencing the extension.module.ts, please?

Also could you paste the following files please?

  • angular.json
  • extensions/my-ext/app/webpack.config.js
  • extensions/my-ext/app/tsconfig.app.json
  • core/app/shell/webpack.config.js
  • core/app/shell/src/app/app.module.ts
  • Checked on the core/app/shell/src/app/app.module.ts file. Didn’t apply any changes to this file.
  • extension.module.ts is used in one file (core\app\shell\webpack.config.js) only and it is inside the extensions folder.

I don’t know but I do not have the webpack.config.js file in the extensions/my-ext/app/. I guess I made a mistake there. Do I need to create that file manually, or it should be created along with the my-ext folder?

Files:
SuiteCRM8.zip (6.0 KB)

Hi @Krishna,

Thank you.

Looking into the zip I see that core/app/shell/webpack.config.js has the following content. Which is the content of the that should be in: extensions/my-ext/app/webpack.config.js. Is this the content of core/app/shell/webpack.config.js or just copied to the wrong folder in the zip by mistake?

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  output: {
    publicPath: 'auto',
    uniqueName: 'myExt'
  },
  optimization: {
    runtimeChunk: false
  },
  plugins: [
    new ModuleFederationPlugin({

      name: 'myExt',
      filename: 'remoteEntry.js',
      library: {
        type: 'window',
        name: 'myExt',
      },
      exposes: {
        './Module': './extensions/my-ext/app/src/extension/extension.module.ts'
      },

      remotes: {},

      shared: {
        '@angular/core': {
          singleton: true,
          requiredVersion: '^12.0.0'
        },
        '@angular/common': {
          singleton: true,
          requiredVersion: '^12.0.0'
        },
        '@angular/common/http': {
          singleton: true,
          requiredVersion: '^12.0.0'
        },
        '@angular/router': {
          singleton: true,
          requiredVersion: '^12.0.0'
        },
        '@angular/animations': {
          singleton: true,
          requiredVersion: '^12.0.0'
        },
        '@angular/cdk': {
          singleton: true,
          requiredVersion: '^11.2.13'
        },
        '@angular/cdk/table': {
          singleton: true,
          requiredVersion: '^11.2.13'
        },
        '@angular/cdk/observers': {
          singleton: true,
          requiredVersion: '^11.2.13'
        },
        '@angular/forms': {
          singleton: true,
          requiredVersion: '^12.0.0'
        },
        '@apollo/client': {
          singleton: true,
          requiredVersion: '^3.3.7'
        },
        '@apollo/link-error': {
          singleton: true,
          requiredVersion: '^2.0.0-beta.3'
        },
        'angular-svg-icon': {
          singleton: true,
          requiredVersion: '^12.0.0'
        },
        'apollo-angular': {
          singleton: true,
          requiredVersion: '^2.2.0'
        },
        graphql: {
          singleton: true,
          requiredVersion: '^14.7.0'
        },
        'graphql-tag': {
          singleton: true,
          requiredVersion: '^2.11.0'
        },
        'lodash-es': {
          singleton: true,
          requiredVersion: '^4.17.20'
        },
        luxon: {
          singleton: true,
          requiredVersion: '^1.25.0'
        },
        'ng-animate': {
          singleton: true,
          requiredVersion: '^1.0.0'
        },
        'ngx-chips': {
          singleton: true,
          requiredVersion: '^2.2.2'
        },

        '@swimlane/ngx-charts': {
          singleton: true,
          requiredVersion: '^17.0.0'
        },

        '@ng-bootstrap/ng-bootstrap': {
          singleton: true,
          requiredVersion: '^9.0.2'
        },

        'bn-ng-idle': {
          singleton: true,
          requiredVersion: '^1.0.1'
        },

        'rxjs': {
          singleton: true,
          requiredVersion: '^6.6.3'
        },

        'rxjs/operators': {
          singleton: true,
          requiredVersion: '^6.6.3'
        },

        common: {
          singleton: true,
          import: 'dist/common',
          requiredVersion: false
        },

        core: {
          singleton: true,
          import: 'dist/core',
          requiredVersion: false
        },

      }

    }),
  ],
};

No, The file is in that folder core/app/shell/webpack.config.js only,
I do not have a config file in the extensions/my-ext/.

Hi @Krishna,

That that is probably the issue. Though its strange as it should have been generated by the following step of the documentation 3.1 Enable module federation](Setting Up a Front-End Extension Module :: SuiteCRM Documentation)

Could you try the following please?:

  • copy the contents of core/app/shell/webpack.config.js to extensions/my-ext/app/webpack.config.js
  • revert the changes on core/app/shell/webpack.config.js

I’ve also noted other very small differences in the other files. We can go over them if the above doesn’t fix the problem.

Hi @clemente.raposo,

Yes, I removed the instance and set up a new one from the scratch and it worked.
This time, I didn’t mess up the webpack config. :grinning:

Can you tell what this means by “extension’s main module”?

Thank you,

Hi @Krishna,

Very glad to hear you were able to get it working.

The extension main module is the one in extension.module.ts (according to the docs) (see code next)

Its the angular module that the main app (shell) its going to load. Like an starting point or an entry point. And from this module, everything in your extension package is loaded. As long as its declared in this angular module.

@NgModule({
    declarations: [],
    imports: [
        CommonModule,
    ],
})
export class ExtensionModule {
    constructor() {
        console.log('Dynamic extension myExt!');
    }

    init(): void {
    }
}

I also recommend ready the Hello world example in he following section. It will help understand the purpose of the main extension module.

Hope this helps.