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
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.jsonextensions/my-ext/app/webpack.config.jsextensions/my-ext/app/tsconfig.app.jsoncore/app/shell/webpack.config.jscore/app/shell/src/app/app.module.tscore/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?:
core/app/shell/webpack.config.js to extensions/my-ext/app/webpack.config.js
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. 
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.
Hello,
i also followed the guide step by step https://docs.suitecrm.com/8.x/developer/front-end-architecture/fe-extensions-setup/ i donât have any errors in building phase however when i do a refresh of Suitecrm in the console nothing is printed⌠as if the extension is not used⌠i have tried more you want to follow the guide step by step but the result doesnât changeâŚ
Any ideas?
Thanks