Front End extensions console.log output not showing up in console

SuiteCRM Forum - English Language
1

Hi
I have set up a new Front End Extension Module like this the extension compiles but when I visit my Instance there is no console output.

image
image1136Ă—323 35.9 KB

I have also found this other post and this post as well as this post where other people encountered the same problem but no one found a solution. I have double-checked all the appropriate files mentioned in the docs any help would be appreciated!

webpack_config.js:

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

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

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

      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: '3.0.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
        },

      }

    }),
  ],
};

angular.json

{
	"$schema": "node_modules/@angular/cli/lib/config/schema.json",
	"version": 1,
	"newProjectRoot": "core/app",
	"projects": {
		"shell": {
			"root": "core/app/shell",
			"sourceRoot": "core/app/shell/src",
			"projectType": "application",
			"prefix": "scrm",
			"architect": {
				"build": {
					"builder": "ngx-build-plus:browser",
					"options": {
						"namedChunks": true,
						"commonChunk": false,
						"sourceMap": true,
						"aot": true,
						"outputPath": "public/dist/",
						"index": "core/app/shell/src/index.html",
						"main": "core/app/shell/src/main.ts",
						"polyfills": "core/app/shell/src/polyfills.ts",
						"tsConfig": "core/app/shell/tsconfig.app.json",
						"scripts": [
							"node_modules/tinymce/tinymce.min.js",
							"node_modules/tinymce/icons/default/icons.min.js",
							"node_modules/tinymce/plugins/visualblocks/plugin.min.js",
							"node_modules/tinymce/plugins/importcss/plugin.min.js",
							"node_modules/tinymce/plugins/insertdatetime/plugin.min.js",
							"node_modules/tinymce/plugins/fullscreen/plugin.min.js",
							"node_modules/tinymce/plugins/anchor/plugin.min.js",
							"node_modules/tinymce/plugins/spellchecker/plugin.min.js",
							"node_modules/tinymce/plugins/advlist/plugin.min.js",
							"node_modules/tinymce/plugins/pagebreak/plugin.min.js",
							"node_modules/tinymce/plugins/imagetools/plugin.min.js",
							"node_modules/tinymce/plugins/fullpage/plugin.min.js",
							"node_modules/tinymce/plugins/textcolor/plugin.min.js",
							"node_modules/tinymce/plugins/directionality/plugin.min.js",
							"node_modules/tinymce/plugins/link/plugin.min.js",
							"node_modules/tinymce/plugins/image/plugin.min.js",
							"node_modules/tinymce/plugins/contextmenu/plugin.min.js",
							"node_modules/tinymce/plugins/autosave/plugin.min.js",
							"node_modules/tinymce/plugins/nonbreaking/plugin.min.js",
							"node_modules/tinymce/plugins/bbcode/plugin.min.js",
							"node_modules/tinymce/plugins/quickbars/plugin.min.js",
							"node_modules/tinymce/plugins/template/plugin.min.js",
							"node_modules/tinymce/plugins/searchreplace/plugin.min.js",
							"node_modules/tinymce/plugins/emoticons/js/emojiimages.min.js",
							"node_modules/tinymce/plugins/emoticons/js/emojis.min.js",
							"node_modules/tinymce/plugins/emoticons/plugin.min.js",
							"node_modules/tinymce/plugins/wordcount/plugin.min.js",
							"node_modules/tinymce/plugins/media/plugin.min.js",
							"node_modules/tinymce/plugins/visualchars/plugin.min.js",
							"node_modules/tinymce/plugins/tabfocus/plugin.min.js",
							"node_modules/tinymce/plugins/table/plugin.min.js",
							"node_modules/tinymce/plugins/autoresize/plugin.min.js",
							"node_modules/tinymce/plugins/noneditable/plugin.min.js",
							"node_modules/tinymce/plugins/print/plugin.min.js",
							"node_modules/tinymce/plugins/help/plugin.min.js",
							"node_modules/tinymce/plugins/colorpicker/plugin.min.js",
							"node_modules/tinymce/plugins/preview/plugin.min.js",
							"node_modules/tinymce/plugins/codesample/plugin.min.js",
							"node_modules/tinymce/plugins/lists/plugin.min.js",
							"node_modules/tinymce/plugins/legacyoutput/plugin.min.js",
							"node_modules/tinymce/plugins/save/plugin.min.js",
							"node_modules/tinymce/plugins/autolink/plugin.min.js",
							"node_modules/tinymce/plugins/code/plugin.min.js",
							"node_modules/tinymce/plugins/textpattern/plugin.min.js",
							"node_modules/tinymce/plugins/hr/plugin.min.js",
							"node_modules/tinymce/plugins/charmap/plugin.min.js",
							"node_modules/tinymce/plugins/paste/plugin.min.js",
							"node_modules/tinymce/plugins/toc/plugin.min.js",
							"node_modules/tinymce/themes/silver/theme.min.js",
							"node_modules/tinymce/themes/mobile/theme.min.js"
						],
						"styles": [
							"node_modules/bootstrap-css-only/css/bootstrap.min.css",
							"core/app/shell/src/themes/suite8/css/style.scss"
						],
						"stylePreprocessorOptions": {
							"includePaths": [
								"core/app/shell/src/themes/*/css"
							]
						},
						"deployUrl": "dist/",
						"assets": [
							{
								"glob": "**/*",
								"input": "core/app/shell/src/themes",
								"ignore": [
									"**/*.scss"
								],
								"output": "/themes/"
							},
							{
								"glob": "**/*",
								"input": "node_modules/tinymce",
								"output": "/tinymce/"
							}
						],
						"allowedCommonJsDependencies": [
							"graphql-tag",
							"zen-observable",
							"seedrandom"
						],
						"extraWebpackConfig": "core/app/shell/webpack.config.js"
					},
					"configurations": {
						"serve": {
							"budgets": [
								{
									"type": "anyComponentStyle",
									"maximumWarning": "6kb"
								}
							],
							"deployUrl": "/",
							"assets": [
								{
									"glob": "**/*",
									"input": "core/app/shell/src/themes",
									"output": "public/dist/themes"
								}
							]
						},
						"production": {
							"fileReplacements": [
								{
									"replace": "core/app/shell/src/environments/environment.ts",
									"with": "core/app/shell/src/environments/environment.prod.ts"
								}
							],
							"optimization": true,
							"outputHashing": "all",
							"sourceMap": false,
							"namedChunks": true,
							"extractLicenses": true,
							"vendorChunk": false,
							"buildOptimizer": true,
							"budgets": [
								{
									"type": "initial",
									"maximumWarning": "2mb",
									"maximumError": "5mb"
								},
								{
									"type": "anyComponentStyle",
									"maximumWarning": "6kb",
									"maximumError": "10kb"
								}
							],
							"extraWebpackConfig": "core/app/shell/webpack.prod.config.js"
						}
					}
				},
				"serve": {
					"builder": "ngx-build-plus:dev-server",
					"options": {
						"browserTarget": "shell:build:serve",
						"proxyConfig": "./proxy.conf.local.json",
						"extraWebpackConfig": "core/app/shell/webpack.config.js",
						"port": 5000
					},
					"configurations": {
						"production": {
							"browserTarget": "shell:build:production",
							"extraWebpackConfig": "core/app/shell/webpack.prod.config.js"
						}
					}
				},
				"extract-i18n": {
					"builder": "@angular-devkit/build-angular:extract-i18n",
					"options": {
						"browserTarget": "shell:build"
					}
				},
				"test": {
					"builder": "ngx-build-plus:karma",
					"options": {
						"main": "core/app/shell/src/test.ts",
						"polyfills": "core/app/shell/src/polyfills.ts",
						"tsConfig": "core/app/shell/tsconfig.spec.json",
						"karmaConfig": "core/app/shell/karma.conf.js",
						"styles": [
							"node_modules/bootstrap-css-only/css/bootstrap.min.css",
							"core/app/shell/src/themes/suite8/css/style.scss"
						],
						"scripts": [],
						"assets": [
							"core/app/shell/src/themes"
						],
						"extraWebpackConfig": "core/app/shell/webpack.config.spec.js"
					}
				},
				"lint": {
					"builder": "@angular-eslint/builder:lint",
					"options": {
						"eslintConfig": "./.eslintrc.js",
						"tsConfig": "core/app/shell/tsconfig.app.json",
						"fix": true
					}
				}
			}
		},
		"SuiteCRM-e2e": {
			"root": "core/app/shell/e2e",
			"projectType": "application",
			"prefix": "",
			"architect": {
				"e2e": {
					"builder": "@angular-devkit/build-angular:protractor",
					"options": {
						"protractorConfig": "core/app/shell/e2e/protractor.conf.js",
						"devServerTarget": "SuiteCRM:serve"
					},
					"configurations": {
						"production": {
							"devServerTarget": "SuiteCRM:serve:production"
						}
					}
				}
			}
		},
		"common": {
			"projectType": "library",
			"root": "core/app/common",
			"sourceRoot": "core/app/common/src",
			"prefix": "lib",
			"architect": {
				"build": {
					"builder": "@angular-devkit/build-angular:ng-packagr",
					"options": {
						"tsConfig": "core/app/common/tsconfig.lib.json",
						"project": "core/app/common/ng-package.json"
					},
					"configurations": {
						"production": {
							"tsConfig": "core/app/common/tsconfig.lib.prod.json"
						}
					}
				},
				"test": {
					"builder": "@angular-devkit/build-angular:karma",
					"options": {
						"main": "core/app/common/src/test.ts",
						"tsConfig": "core/app/common/tsconfig.spec.json",
						"karmaConfig": "core/app/common/karma.conf.js"
					}
				},
				"lint": {
					"builder": "@angular-devkit/build-angular:tslint",
					"options": {
						"tsConfig": [
							"core/app/common/tsconfig.lib.json",
							"core/app/common/tsconfig.spec.json"
						],
						"exclude": [
							"**/node_modules/**"
						]
					}
				}
			}
		},
		"core": {
			"projectType": "library",
			"root": "core/app/core",
			"sourceRoot": "core/app/core/src",
			"prefix": "lib",
			"architect": {
				"build": {
					"builder": "@angular-devkit/build-angular:ng-packagr",
					"options": {
						"tsConfig": "core/app/core/tsconfig.lib.json",
						"project": "core/app/core/ng-package.json"
					},
					"configurations": {
						"production": {
							"tsConfig": "core/app/core/tsconfig.lib.prod.json"
						}
					}
				},
				"test": {
					"builder": "ngx-build-plus:karma",
					"options": {
						"main": "core/app/core/src/test.ts",
						"tsConfig": "core/app/core/tsconfig.spec.json",
						"karmaConfig": "core/app/core/karma.conf.js",
						"styles": [
							"node_modules/bootstrap-css-only/css/bootstrap.min.css"
						],
						"scripts": [],
						"assets": [],
						"extraWebpackConfig": "core/app/core/webpack.config.spec.js"
					}
				},
				"lint": {
					"builder": "@angular-devkit/build-angular:tslint",
					"options": {
						"tsConfig": [
							"core/app/core/tsconfig.lib.json",
							"core/app/core/tsconfig.spec.json"
						],
						"exclude": [
							"**/node_modules/**"
						]
					}
				}
			}
		},
		"default": {
			"projectType": "application",
			"schematics": {
				"@schematics/angular:component": {
					"style": "scss"
				}
			},
			"root": "extensions/default",
			"sourceRoot": "extensions/default/app/src",
			"prefix": "app",
			"architect": {
				"build": {
					"builder": "ngx-build-plus:browser",
					"options": {
						"namedChunks": true,
						"commonChunk": false,
						"sourceMap": true,
						"aot": true,
						"outputPath": "extensions/default/public",
						"index": "extensions/default/app/src/index.html",
						"main": "extensions/default/app/src/main.ts",
						"polyfills": "extensions/default/app/src/polyfills.ts",
						"tsConfig": "extensions/default/app/tsconfig.app.json",
						"assets": [
							"extensions/default/app/src/favicon.ico",
							"extensions/default/app/src/assets"
						],
						"styles": [
							"extensions/default/app/src/styles.scss"
						],
						"scripts": [],
						"extraWebpackConfig": "extensions/default/app/webpack.config.js"
					},
					"configurations": {
						"production": {
							"fileReplacements": [
								{
									"replace": "extensions/default/app/src/environments/environment.ts",
									"with": "extensions/default/app/src/environments/environment.prod.ts"
								}
							],
							"optimization": true,
							"outputHashing": "all",
							"sourceMap": false,
							"namedChunks": true,
							"extractLicenses": true,
							"vendorChunk": false,
							"buildOptimizer": true,
							"budgets": [
								{
									"type": "initial",
									"maximumWarning": "2mb",
									"maximumError": "5mb"
								},
								{
									"type": "anyComponentStyle",
									"maximumWarning": "6kb",
									"maximumError": "10kb"
								}
							],
							"extraWebpackConfig": "extensions/default/app/webpack.prod.config.js"
						},
						"dev": {
							"outputPath": "public/extensions/default"
						}
					}
				},
				"serve": {
					"builder": "ngx-build-plus:dev-server",
					"options": {
						"browserTarget": "services:build",
						"extraWebpackConfig": "extensions/default/app/webpack.config.js",
						"port": 3000
					},
					"configurations": {
						"production": {
							"browserTarget": "services:build:production",
							"extraWebpackConfig": "extensions/default/app/webpack.prod.config.js"
						}
					}
				},
				"extract-i18n": {
					"builder": "@angular-devkit/build-angular:extract-i18n",
					"options": {
						"browserTarget": "services:build"
					}
				},
				"test": {
					"builder": "ngx-build-plus:karma",
					"options": {
						"main": "extensions/default/app/src/test.ts",
						"polyfills": "extensions/default/app/src/polyfills.ts",
						"tsConfig": "extensions/default/app/tsconfig.spec.json",
						"karmaConfig": "extensions/default/app/karma.conf.js",
						"assets": [
							"extensions/default/app/src/favicon.ico",
							"extensions/default/app/src/assets"
						],
						"styles": [
							"extensions/default/app/src/styles.scss"
						],
						"scripts": [],
						"extraWebpackConfig": "extensions/default/app/webpack.config.js"
					}
				},
				"lint": {
					"builder": "@angular-devkit/build-angular:tslint",
					"options": {
						"tsConfig": [
							"extensions/default/app/tsconfig.app.json",
							"extensions/default/app/tsconfig.spec.json",
							"extensions/default/app/e2e/tsconfig.json"
						],
						"exclude": [
							"**/node_modules/**"
						]
					}
				},
				"e2e": {
					"builder": "@angular-devkit/build-angular:protractor",
					"options": {
						"protractorConfig": "extensions/default/app/e2e/protractor.conf.js",
						"devServerTarget": "services:serve"
					},
					"configurations": {
						"production": {
							"devServerTarget": "services:serve:production"
						}
					}
				}
			}
		},
		"eks": {
			"projectType": "application",
			"schematics": {
				"@schematics/angular:component": {
					"style": "scss"
				},
				"@schematics/angular:application": {
					"strict": true
				}
			},
			"root": "extensions/eks/app",
			"sourceRoot": "extensions/eks/app/src",
			"prefix": "app",
			"architect": {
				"build": {
					"builder": "ngx-build-plus:browser",
					"options": {
						"namedChunks": true,
						"sourceMap": true,
						"aot": true,
						"outputPath": "public/extensions/eks",
						"index": "extensions/eks/app/src/index.html",
						"main": "extensions/eks/app/src/main.ts",
						"polyfills": "extensions/eks/app/src/polyfills.ts",
						"tsConfig": "extensions/eks/app/tsconfig.app.json",
						"inlineStyleLanguage": "scss",
						"assets": [
							"extensions/eks/app/src/favicon.ico",
							"extensions/eks/app/src/assets"
						],
						"styles": [
							"extensions/eks/app/src/styles.scss"
						],
						"scripts": [],
						"extraWebpackConfig": "extensions/eks/app/webpack.config.js",
						"commonChunk": false
					},
					"configurations": {
						"production": {
							"optimization": true,
							"outputHashing": "all",
							"sourceMap": false,
							"namedChunks": true,
							"extractLicenses": true,
							"vendorChunk": false,
							"buildOptimizer": true,
							"budgets": [
							  {
								"type": "initial",
								"maximumWarning": "2mb",
								"maximumError": "5mb"
							  },
							  {
								"type": "anyComponentStyle",
								"maximumWarning": "6kb",
								"maximumError": "10kb"
							  }
							],
							"fileReplacements": [
								{
									"replace": "extensions/eks/app/src/environments/environment.ts",
									"with": "extensions/eks/app/src/environments/environment.prod.ts"
								}
							],
							"extraWebpackConfig": "extensions/eks/app/webpack.prod.config.js"
						}
					},
					"defaultConfiguration": "production"
				},
				"serve": {
					"builder": "ngx-build-plus:dev-server",
					"configurations": {
						"production": {
							"browserTarget": "eks:build:production",
							"extraWebpackConfig": "extensions/eks/app/webpack.prod.config.js"
						},
						"development": {
							"browserTarget": "eks:build:development"
						}
					},
					"defaultConfiguration": "development",
					"options": {
						"port": 420,
						"extraWebpackConfig": "extensions/eks/app/webpack.config.js"
					}
				},
				"extract-i18n": {
					"builder": "ngx-build-plus:extract-i18n",
					"options": {
						"browserTarget": "eks:build",
						"extraWebpackConfig": "extensions/eks/app/webpack.config.js"
					}
				},
				"test": {
					"builder": "@angular-devkit/build-angular:karma",
					"options": {
						"main": "extensions/eks/app/src/test.ts",
						"polyfills": "extensions/eks/app/src/polyfills.ts",
						"tsConfig": "extensions/eks/app/tsconfig.spec.json",
						"karmaConfig": "extensions/eks/app/karma.conf.js",
						"inlineStyleLanguage": "scss",
						"assets": [
							"extensions/eks/app/src/favicon.ico",
							"extensions/eks/app/src/assets"
						],
						"styles": [
							"extensions/eks/app/src/styles.scss"
						],
						"scripts": []
					}
				}
			}
		}
	},
	"defaultProject": "shell",
	"schematics": {
		"@schematics/angular:component": {
			"prefix": "app",
			"style": "scss"
		},
		"@schematics/angular:directive": {
			"prefix": "app"
		}
	},
	"cli": {
		"analytics": "0c73615c-8c1c-43d9-8f71-5ae96bf1cccc",
		"packageManager": "yarn"
	}
}

console output

image
image784Ă—437 48 KB

ng version output
image
image599Ă—531 18.9 KB

app.module.ts

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

import {AppComponent} from './app.component';
import {ExtensionModule} from '../extension/extension.module';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        ExtensionModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'eks';
}

extension.module.ts

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';

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

    init(): void {
    }
}

I am using PHP 7.4.33 and SuiteCRM Version Version 8.3.0

2

I don’t know how to answer this, but meanwhile I notice you don’t mention your SuiteCRM or PHP version, which I am sure would be valuable information…

1 Like
3

thanks for the reply I added the information

1 Like
4

tried installing it again today on 8.4 still not working … i think something in the docs is not correct havent figured out which part. If i edit the default extension there is also no console.log output strangely

5

image
currently trying to debug it the files for the extensions both get loaded and the content of remoteEntry.js is correct like in the code as it turns out it probably was a mix of wrong permissions + apache setup confusions with the 000-default.conf and some little changes in the files. If anyone encounters the same problem make sure to go through the files of the default myext extension and compare what is different

6

Hi @dwaltsch,

Can you please explain more about this?

7

yeah sure which part should i expand upon?

8

About the permission and apache setup? Cause I followed everything else as documented and still unable to show logs on console.

9

I had problems with the default permissions so i set them to chmod 777 -R foldername one thing I forgot was setting up the vhost correctly like described here . Also look into F12 console to see if there are any errors loading stuff

10

Just a note for anyone casually reading this - permissions set at 777 is wildly insecure. Do not use that except maybe as a test in your development PC

1 Like
11

yeah definitely dont do that anywhere besides a secure dev environment for testing