Angular Ivy Prod - Webcomponent not loading

We have build a product based on a webcomponent.

This webcomponent is created as an Angular Element based on Angular 10.

This webcomponent is loaded in the header of the webpage as a script, this because it was requested to load this on every client possible site with minimal technical intervention.

The product is working fine on html raw pages or php, with no issue.

A client has installed it on his Angular 11 portal, and during the dev phase everything worked fine, but compiled in prod nothing happens. The scripts are correctly downloaded, the webcomponent TAG is there, but no error and no logs are showed in console.

What can be causing the problem?

Thank you

The only solution I found is described in this medium article: https://medium.com/@sri1980/multiple-angular-elements-apps-loading-in-one-window-7bcc95887ff4

The described steps are:

• Install custom webpack npm i -D @angular-builders/custom-webpack
• In angular.json change
  • "builder": "@angular-builders/custom-webpack:browser"
  • in the options field under builder add "customWebpackConfig": { "path": "./extra-webpack.config.js", "mergeStrategies": { "externals": "replace" } }
• In the project root folder create a file called extra-webpack.config.js with this content

module.exports = {
  output: {
  jsonpFunction: ‘webpackJsonpAppname’, // change with your app name
  library: ‘appname’ // change with your app name
  }
};

And done, now when you build your project you'll see your main.js file like this: var appname=(window.webpackJsonpAppname=window.webpackJsonpAppname||[]).........., and this will avoid any conflicts or issues.