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