Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Loading WebComponents, consisting of multiple files #75

Open
christianscharr opened this issue Feb 2, 2021 · 4 comments
Open

Loading WebComponents, consisting of multiple files #75

christianscharr opened this issue Feb 2, 2021 · 4 comments

Comments

@christianscharr
Copy link

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
Copy link

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
Copy link

fcioffi commented Mar 6, 2021

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
Copy link

Hi @christianscharr

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

@arturovt
Copy link
Collaborator

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants