Setting up a Front-End Extension Module

I have followed the guide to Setting Up a Front-End Extension Module in suitecrm 8 but there has been no success

As indicated in the compatibility matrix the versions of node and ng are

The node version is: v14.15.1
The ng version is: 12.1.0

I have followed the steps but when I reach point 10. Refresh your instance and test : Nothing is printed on the console

I list below the relevant files along with their location

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": [
							// ...
						],
						"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/**"
						]
					}
				}
			}
		},
		"myExt": {
			"projectType": "application",
			"schematics": {
				"@schematics/angular:component": {
					"style": "scss"
				},
				"@schematics/angular:application": {
					"strict": true
				}
			},
			"root": "extensions/my-ext/app",
			"sourceRoot": "extensions/my-ext/app/src",
			"prefix": "app",
			"architect": {
				"build": {
					"builder": "ngx-build-plus:browser",
					"options": {
						"outputPath": "public/extensions/my-ext",
						"index": "extensions/my-ext/app/src/index.html",
						"main": "extensions/my-ext/app/src/main.ts",
						"polyfills": "extensions/my-ext/app/src/polyfills.ts",
						"tsConfig": "extensions/my-ext/app/tsconfig.app.json",
						"inlineStyleLanguage": "scss",
						"assets": [
							"extensions/my-ext/app/src/favicon.ico",
							"extensions/my-ext/app/src/assets"
						],
						"styles": [
							"extensions/my-ext/app/src/styles.scss"
						],
						"scripts": [],
						"extraWebpackConfig": "extensions/my-ext/app/webpack.config.js",
						"namedChunks": true,
						"sourceMap": true,
						"aot": true,
						"commonChunk": false
					},
					"configurations": {
						"production": {
							"budgets": [
								{
									"type": "initial",
									"maximumWarning": "2mb",
									"maximumError": "5mb"
								},
								{
									"type": "anyComponentStyle",
									"maximumWarning": "6kb",
									"maximumError": "10kb"
								}
							],
							"fileReplacements": [
								{
									"replace": "extensions/my-ext/app/src/environments/environment.ts",
									"with": "extensions/my-ext/app/src/environments/environment.prod.ts"
								}
							],
							"optimization": true,
							"outputHashing": "all",
							"sourceMap": false,
							"namedChunks": true,
							"extractLicenses": true,
							"vendorChunk": false,
							"buildOptimizer": true,
							"extraWebpackConfig": "extensions/my-ext/app/webpack.prod.config.js"
						}
					},
					"defaultConfiguration": "production"
				},
				"serve": {
					"builder": "ngx-build-plus:dev-server",
					"configurations": {
						"production": {
							"browserTarget": "myExt:build:production",
							"extraWebpackConfig": "extensions/my-ext/app/webpack.prod.config.js"
						},
						"development": {
							"browserTarget": "myExt:build:development"
						}
					},
					"defaultConfiguration": "development",
					"options": {
						"port": 3333,
						"extraWebpackConfig": "extensions/my-ext/app/webpack.config.js"
					}
				},
				"extract-i18n": {
					"builder": "ngx-build-plus:extract-i18n",
					"options": {
						"browserTarget": "myExt:build",
						"extraWebpackConfig": "extensions/my-ext/app/webpack.config.js"
					}
				},
				"test": {
					"builder": "@angular-devkit/build-angular:karma",
					"options": {
						"main": "extensions/my-ext/app/src/test.ts",
						"polyfills": "extensions/my-ext/app/src/polyfills.ts",
						"tsConfig": "extensions/my-ext/app/tsconfig.spec.json",
						"karmaConfig": "extensions/my-ext/app/karma.conf.js",
						"inlineStyleLanguage": "scss",
						"assets": [
							"extensions/my-ext/app/src/favicon.ico",
							"extensions/my-ext/app/src/assets"
						],
						"styles": [
							"extensions/my-ext/app/src/styles.scss"
						],
						"scripts": []
					}
				}
			}
		},
		"myAxt": {
			"projectType": "application",
			"schematics": {
				"@schematics/angular:component": {
					"style": "scss"
				},
				"@schematics/angular:application": {
					"strict": true
				}
			},
			"root": "extensions/my-axt/app",
			"sourceRoot": "extensions/my-axt/app/src",
			"prefix": "app",
			"architect": {
				"build": {
					"builder": "ngx-build-plus:browser",
					"options": {
						"namedChunks": true,
						"sourceMap": true,
						"aot": true,
						"outputPath": "public/extensions/my-axt",
						"index": "extensions/my-axt/app/src/index.html",
						"main": "extensions/my-axt/app/src/main.ts",
						"polyfills": "extensions/my-axt/app/src/polyfills.ts",
						"tsConfig": "extensions/my-axt/app/tsconfig.app.json",
						"inlineStyleLanguage": "scss",
						"assets": [
							"extensions/my-axt/app/src/favicon.ico",
							"extensions/my-axt/app/src/assets"
						],
						"styles": [
							"extensions/my-axt/app/src/styles.scss"
						],
						"scripts": [],
						"extraWebpackConfig": "extensions/my-axt/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/my-axt/app/src/environments/environment.ts",
									"with": "extensions/my-axt/app/src/environments/environment.prod.ts"
								}
							],
							"extraWebpackConfig": "extensions/my-axt/app/webpack.prod.config.js"
						},
						"development": {
							"buildOptimizer": false,
							"optimization": false,
							"vendorChunk": true,
							"extractLicenses": false,
							"sourceMap": true,
							"namedChunks": true
						}
					},
					"defaultConfiguration": "production"
				},
				"serve": {
					"builder": "ngx-build-plus:dev-server",
					"configurations": {
						"production": {
							"browserTarget": "myAxt:build:production",
							"extraWebpackConfig": "extensions/my-axt/app/webpack.prod.config.js"
						},
						"development": {
							"browserTarget": "myAxt:build:development"
						}
					},
					"defaultConfiguration": "development",
					"options": {
						"port": 3333,
						"extraWebpackConfig": "extensions/my-axt/app/webpack.config.js"
					}
				},
				"extract-i18n": {
					"builder": "ngx-build-plus:extract-i18n",
					"options": {
						"browserTarget": "myAxt:build",
						"extraWebpackConfig": "extensions/my-axt/app/webpack.config.js"
					}
				},
				"test": {
					"builder": "@angular-devkit/build-angular:karma",
					"options": {
						"main": "extensions/my-axt/app/src/test.ts",
						"polyfills": "extensions/my-axt/app/src/polyfills.ts",
						"tsConfig": "extensions/my-axt/app/tsconfig.spec.json",
						"karmaConfig": "extensions/my-axt/app/karma.conf.js",
						"inlineStyleLanguage": "scss",
						"assets": [
							"extensions/my-axt/app/src/favicon.ico",
							"extensions/my-axt/app/src/assets"
						],
						"styles": [
							"extensions/my-axt/app/src/styles.scss"
						],
						"scripts": []
					}
				}
			}
		}
	},
	"defaultProject": "shell",
	"schematics": {
		"@schematics/angular:component": {
			"prefix": "app",
			"style": "scss"
		},
		"@schematics/angular:directive": {
			"prefix": "app"
		}
	},
	"cli": {
		"packageManager": "yarn"
	}
}

extensions/my-ext/app/webpack.config.js

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
  path.join(__dirname, '../../../tsconfig.json'),
  [/* mapped paths to share */]);

module.exports = {
  output: {
    publicPath: "auto",
    uniqueName: "myExt",
  },
  optimization: {
    runtimeChunk: false
  },
  // resolve: {
  //   alias: {
  //     ...sharedMappings.getAliases(),
  //   }
  // },
  plugins: [
    new ModuleFederationPlugin({

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

        // For hosts (please adjust)
        // remotes: {
        //     "shell": "shell@http://localhost:5000/remoteEntry.js",

        // },

        shared: share({
          // "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
          // "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
          // "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
          // "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },

          // ...sharedMappings.getDescriptors()
          '@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
          },
        })

    }),
    // sharedMappings.getPlugin()
  ],
};

extensions/my-ext/app/tsconfig.app.json

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "../../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../../out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

core/app/shell/webpack.config.js

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

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

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

      }

    }),
  ],
};

core/app/shell/src/app/app.module.ts

import {APP_INITIALIZER, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {HTTP_INTERCEPTORS, HttpClientModule, HttpClientXsrfModule} from '@angular/common/http';

import {Apollo} from 'apollo-angular';
import {HttpLink} from 'apollo-angular/http';
import {ApolloLink, InMemoryCache} from '@apollo/client/core';
import {onError} from '@apollo/link-error';
import {FetchPolicy} from '@apollo/client/core/watchQueryOptions';

import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';

import {
    AppStateStore,
    AuthService,
    BaseRouteService,
    ClassicViewUiModule,
    ColumnChooserModule,
    CreateRecordModule,
    ErrorInterceptor,
    FilterUiModule,
    FooterUiModule,
    FullPageSpinnerModule,
    ImageModule,
    InstallViewModule,
    ListContainerModule,
    ListHeaderModule,
    ListModule,
    MessageModalModule,
    MessageUiModule,
    ModuleTitleModule,
    NavbarUiModule,
    RecordListModalModule,
    RecordModule,
    TableModule
} from 'core';

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

import {environment} from '../environments/environment';
import {RouteReuseStrategy} from '@angular/router';
import {AppRouteReuseStrategy} from './app-router-reuse-strategy';
import {BnNgIdleService} from 'bn-ng-idle';
import {AppInit} from '@app/app-initializer';
import {GraphQLError} from 'graphql';
import {AngularSvgIconModule} from 'angular-svg-icon';

export const initializeApp = (appInitService: AppInit) => (): Promise<any> => appInitService.init();

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        HttpClientXsrfModule,
        AppRoutingModule,
        FooterUiModule,
        NavbarUiModule,
        MessageUiModule,
        ClassicViewUiModule,
        FilterUiModule,
        ListModule,
        RecordModule,
        CreateRecordModule,
        InstallViewModule,
        TableModule,
        ModuleTitleModule,
        ListHeaderModule,
        ListContainerModule,
        ColumnChooserModule,
        AngularSvgIconModule.forRoot(),
        ImageModule,
        BrowserAnimationsModule,
        NgbModule,
        FullPageSpinnerModule,
        MessageModalModule,
        RecordListModalModule
    ],
    providers: [
        {provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true},
        {provide: RouteReuseStrategy, useClass: AppRouteReuseStrategy},
        BnNgIdleService,
        AppInit,
        {
            provide: APP_INITIALIZER,
            useFactory: initializeApp,
            multi: true,
            deps: [AppInit]
        }
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
    constructor(apollo: Apollo, httpLink: HttpLink, protected auth: AuthService, protected appStore: AppStateStore, protected baseRoute: BaseRouteService) {

        const defaultOptions = {
            watchQuery: {
                fetchPolicy: 'no-cache' as FetchPolicy
            },
            query: {
                fetchPolicy: 'no-cache' as FetchPolicy
            },
        };

        let fullPath = environment.graphqlApiUrl;
        fullPath = this.baseRoute.calculateRoute(fullPath);
        const http = httpLink.create({
            uri: fullPath,
            withCredentials: true
        });

        const logoutLink = onError((err) => {

            const networkError = (err.networkError ?? null) as any
            if (networkError !== null && networkError.status === 403 && networkError.error.detail === 'Invalid CSRF token') {
                auth.handleInvalidSession('LBL_SESSION_EXPIRED');
            }

            if (err.graphQLErrors && err.graphQLErrors.length > 0) {
                err.graphQLErrors.forEach((value: GraphQLError) => {
                    if (this.auth.isUserLoggedIn.value === true && value.message.includes('Access Denied')) {
                        auth.handleInvalidSession('LBL_SESSION_EXPIRED');
                    }
                });
            }
        });

        const middleware = new ApolloLink((operation, forward) => {
            appStore.addActiveRequest();
            return forward(operation);
        });

        const afterware = new ApolloLink((operation, forward) => {
            return forward(operation).map(response => {
                appStore.removeActiveRequest();
                return response;
            });
        });

        apollo.create({
            defaultOptions,
            link: ApolloLink.from([middleware, afterware, logoutLink.concat(http)]),
            cache: new InMemoryCache()
        });
    }
}

I have created the suggested files

extensions/my-ext/app/src/extension/extension.module.ts

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { HttpClientModule } from "@angular/common/http";
import { HelloWorldSidebarWidgetModule } from "../containers/sidebar-widget/hello-world/hello-world-sidebar-widget.module";
import { SidebarWidgetRegistry } from "core";
import { HelloWorldSidebarWidgetComponent } from "../containers/sidebar-widget/hello-world/hello-world-sidebar-widget.component";

@NgModule({
  declarations: [],
  imports: [CommonModule, HttpClientModule, HelloWorldSidebarWidgetModule]
})
export class ExtensionModule {
  constructor(protected sidebarWidgetRegistry: SidebarWidgetRegistry) {
    console.log("Dynamic extension myExt!");
    console.log("sidebar widget register");
    sidebarWidgetRegistry.register(
      "default",
      "hello-world",
      HelloWorldSidebarWidgetComponent
    );
    console.log("Loaded");
  }

  init() {
    console.log("Nami");
  }
}

extensions/my-ext/config/extension.php

<?php

use Symfony\Component\DependencyInjection\Container;

if (!isset($container)) {
    return;
}

/** @var Container $container */
$extensions = $container->getParameter('extensions') ?? [];

$extensions['myExt'] = [
    'remoteEntry' => './extensions/my-ext/remoteEntry.js',
    'remoteName' => 'myExt',
    'enabled' => true
];

$container->setParameter('extensions', $extensions);

I’ve been trying to work but I can’t get the expected result.

I tried Adding a Custom Sidebar Widget but when I refresh the message Widget not found appears in the widget space

The only step that I can’t do is run yarn run build-dev:common in 7. Build core because as I described in this post, if I run it, it doesn’t allow me to run the other commands

Regards and thanks

1 Like