Loading WebComponents, consisting of multiple files

[christianscharr]

When using @angular/cli to create WebComponents one ends up with at least 2 files for each WebComponent: main.js and styles.js. But the elementConfig only supports a single URL per element. Sure, I can concatenate the files builded into a single file, this works for production, but not when I want to debug the app locally via ng serve :(

[maxfriedmann]

We also have that problem and never found a better solution than writing a cli for that use case: https://www.npmjs.com/package/@smallstack/ng-wc-serve

If you want to try it out, then please keep in mind that you need to package your webcomponent as production.

If you ever find a better solution, please let us know :)

[fcioffi]

Hi, when I build for production I merge all files (with nodejs custom script) so the problem is only in dev environment. In dev you can create an initializer in order to load other files when module load.

my 2 cents. Francesco

[gs-smuthyam]

Hi @christianscharr

we are using ngx-build-plus and exporting as a single file, you might wanna try this out.

[arturovt]

Hey @christianscharr . You'd need to use the @angular-builders/custom-webpack to extend the inbuilt configuration. There're 3 Webpack entries, which are main, polyfills and styles. You only need to merge main and styles entries:

// extra-webpack.config.js
module.exports = (config) => {
  if (Array.isArray(config.entry.styles)) {
    config.entry.main = [...config.entry.main, ...config.entry.styles];
  }

  return config;
};

This will bundle styles and main into a common file at the end. This is what ngx-build-plus is doing already.