CODEWITHSUNDEEP
angularangular-elements
Marco Fedele
Marco Fedele

Reputation: 2148

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

Upvotes: 0

Views: 704

Answers (2)

ACeleghin
ACeleghin

Reputation: 131

You can use angular 12 with module federation, without any other things, if you can upgrade angular to 12 it will be easier than your current method.

https://www.npmjs.com/package/@angular-architects/module-federation

Upvotes: 0

Marco Fedele
Marco Fedele

Reputation: 2148

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.

Upvotes: 1

Related Questions