Angular-elements and custom-webpack

Question

We have 2 applications (X & Y) both angular projects. App X sitting on Angular 14 and Y sitting on Angular 12 with angular elements & custom webpack and everything working fine here with above versions but we have to upgrade Y from Angular 12 to 13 with angular elements & custom webpack which is breaking application X when it consumes application Y through . Application Y generates package and X consuming through in index.html, When use this package in app X localhost working fine but blank screen without any errors in console for higher environments (DEV & QAT) which is ending with nightmares as we must upgrade to 13 and then 14.

Module:

export class AppModule { 
  constructor(private injector: Injector) {}
  ngDoBootstrap() {
    const HelloElement = createCustomElement(HelloComponent, {
      injector: this.injector 
    });

    customElements.define('hello-world', HelloElement);
  }
}

extra-webpack.config.js:

module.exports = {
    output: {
        // jsonpFunction: "webpackJsonpLynxNavigation",
        library: "Y"
    }
}

angular.json:

"build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./extra-webpack.config.js",
              "mergeStrategies": {
                "externals": "replace"
              }
            },
            "outputPath": "dist/Y",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": {
                "scripts": true,
                "styles": {
                  "minify": true,
                  "inlineCritical": false
                },
                "fonts": true
              },
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "Y:build",
            "proxyConfig": "src/proxy.conf.js"
          },
          "configurations": {
            "production": {
              "browserTarget": "Y:build:production"
            }
          }
        }

Kindly provide your inputs will be very helpful and thank you in advance, Kindly let me know if any further information needed to discuss further.

I have tried changing polyfills.js and tried with different versions angular custom webpack and also tried with angular 14 and 15 but no luck. Someone might upgraded angular elements with custom-webpack to 13/14 and they might see these issues and expecting to get some inputs to try.