Use new module federation configuration

core/app/shell/tsconfig.app.json

@@ -2,6 +2,7 @@
   "extends": "../../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../../out-tsc/app",
+    "target": "es2022",
     "types": []
   },
   "files": [

core/app/shell/webpack.config.js

@@ -8,6 +8,9 @@ module.exports = {
     runtimeChunk: false,
     minimize: false
   },
+  experiments: {
+    outputModule: true
+  },
   plugins: [
     new ModuleFederationPlugin({
 

extensions/defaultExt/app/src/extension.module.ts

@@ -1,12 +1,29 @@
 import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {HttpClientModule} from '@angular/common/http';
+import {UKPhoneEditFieldComponent} from './fields/uk-phone/templates/edit/uk-phone.component';
+import {UkPhoneEditFieldModule} from './fields/uk-phone/templates/edit/uk-phone.module';
+import {FieldRegistry} from 'core';
+
 
 @NgModule({
     declarations: [],
-    imports: [],
+    imports: [
+        CommonModule,
+        HttpClientModule,
+        UkPhoneEditFieldModule
+    ],
     providers: []
 })
 export class ExtensionModule {
-    constructor() {
+    constructor(
+        protected fieldRegistry: FieldRegistry
+    ) {
+        // Override the edit mode phone field component for all modules
+        fieldRegistry.register('default', 'phone', 'edit', UKPhoneEditFieldComponent);
+
+        // Override the edit mode phone field component just for accounts
+        // fieldRegistry.register('accounts', 'phone', 'edit', UKPhoneEditFieldComponent);
     }
 
     init(): void {

extensions/defaultExt/app/tsconfig.app.json

@@ -3,6 +3,7 @@
   "extends": "../../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/app",
+    "target": "es2022",
     "types": []
   },
   "files": [

extensions/defaultExt/app/webpack.config.js

@@ -8,14 +8,16 @@ module.exports = {
   optimization: {
     runtimeChunk: false
   },
+  experiments: {
+    outputModule: true
+  },
   plugins: [
     new ModuleFederationPlugin({
 
       name: 'defaultExt',
       filename: 'remoteEntry.js',
       library: {
-        type: 'window',
-        name: 'defaultExt',
+        type: "module",
       },
       exposes: {
         './Module': './extensions/defaultExt/app/src/extension.module.ts'