As you know, the "ng g library" approach helps us with the creation of libraries of reusable components. But what if I wanted those components to be compiled into web components... through the support of Angular Elements? Not only that but also that each component from the lib was to be compiled into its own folder or JS file. How to configure a dev environment that would allow me to achieve that?
For example:
If I create a Lib and add a custom component, I know that I can compile it, generating a series of folders, such as esm5, esm2015, fesm5, etc. Now, the question is: How can I add, let's say 30 custom components to my lib, and then when I compile, it will create a folder for each of them containing the Web Component version of them... as if Angular Elements went through my lib of components and generated the Web Components version of each of them.
Like this:
lib/ lib/custom/comp1 lib/custom/comp2 lib/custom/comp3 lib/custom/comp4
Turning into something similar to:
Dist/ Dist/custom/ Dist/custom/bundle Dist/custom/esm5 Dist/custom/esm2015 Dist/custom/comp1_web_independend_component_version Dist/custom/comp2_web_independend_component_version Dist/custom/comp3_web_independend_component_version Dist/custom/comp4_web_independend_component_version
The closest solution I found is this:
https://medium.com/@rahulsahay19/running-multiple-angular-elements-on-the-same-page-5949dac5523
I also requested for Angular CLI team to help with that:
https://github.com/angular/angular-cli/issues/13999
ng build
internally use webpack to do the building. So this problem actually breaks down to two parts.
ng eject
, how to tap into the internal webpackConfig and customize it to our need.For part 1, there's a solution @angular-builders/custom-webpack out there. Basically it allow you to merge some extra field into the internal webpackConfig, and still use the offical "@angular-devkit/build-angular:browser" as builder.
Now for part 2, your use case is simply a multi-entry-multi-output build problem in webpack. The solution is quite straight forward.
const partialWebpackConfig = { entry: { 'custom/comp1': '/path/to/src/lib/custom/comp1.ts', 'custom/comp2': '/path/to/src/lib/custom/comp2.ts', }, output: { path: path.resolve(__dirname, 'Dist'), filename: '[name].js' } }
Below is a step-by-step instruction to setup this config.
npm install @angular-builders/custom-webpack
webpack.config.js
in your project root:const path = require('path'); module.exports = { entry: { 'custom/comp1': path.resolve(__dirname, 'src/lib/custom/comp1.ts'), 'custom/comp2': path.resolve(__dirname, 'src/lib/custom/comp2.ts') }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js' } }
angular.json
:{ // ... "architect": { "build": { "builder": "@angular-builders/custom-webpack:browser", "options": { "customWebpackConfig": { "path": "./webpack.config.js", }, // ...
ng build
, should see the result.For advance usage, it's worth mentioning that @angular-builders/custom-webpack
support exporting webpack config as a function to gain full control of the final webpackConfig used.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With