How to config --hmr using customElements with angular

Question

I am using angular version 15, but I want to apply micro front end architecture and need to add --hmr. But with MFE I can't add the bootstrap: [AppComponent] and then angular's default --hmr doesn't work

I added a webpack.config.ts, but I couldn't

const webpack = require('webpack');


const path = require('path');


module.exports = {
  devServer: {
    hot: true,
    liveReload: false,
    historyApiFallback: true,
  },
  entry: {
    polyfills: './src/polyfills.ts',
    main: './src/main.ts',
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ],
  optimization: {
  },
  output: {
    path: path.resolve(__dirname, 'dist/dsa-review-checklist-mfe'),
    filename: (chunkData: any) => {
      return chunkData.chunk.name === 'main'
      ? 'my-mfe.js'
      : '[name].js';
    },
    clean: true
  },
};

this is the configuration of my ngModule

import {
  ApplicationRef,
  CUSTOM_ELEMENTS_SCHEMA,
  Injector,
  NgModule
} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { createCustomElement } from '@angular/elements';
import { FormsModule } from '@angular/forms';


import { AppComponent } from './app.component';


@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule],
  providers: [ApplicationRef],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule{
  readonly MFE_SELECTOR = 'my-mfe';


  constructor(private injector: Injector) {}


  ngDoBootstrap(): void {
    if (!customElements.get(this.MFE_SELECTOR)) {
      const custom = createCustomElement(AppComponent, {
        injector: this.injector
      });
      customElements.define(this.MFE_SELECTOR, custom);
    }
  }
}