CODEWITHSUNDEEP
angularweb-componentangular-elements
Collin Stevens
Collin Stevens

Reputation: 817

Using multiple angular elements as web components within an angular project

Given three @angular projects all using v6.1.9: host, alpha, and beta

alpha and beta create and define a web component each using @angular/elements as such:

constructor(private injector: Injector) {}

ngDoBootstrap() {
  const config: NgElementConfig = { injector: this.injector };
  const component= createCustomElement(component, config);
  customElements.define("alpha-component", component); // beta-component respectively
}

alpha and beta are built using ng build --prod --output-hashing none and then a post build script is ran to concatenate the resulting files in the order of: scripts.js, styles.js, runtime.js, main.js.

polyfills.js is skipped because main.ts will check if the polyfills used are already defined when the library is loaded (to avoid trying to redefine zones.js for example).

The resultant bundles are alpha-component.bundle.js and beta-component.bundle.js.

host references the above bundles in the <head> of index.html with <script defer> tags.

If the bundles are referenced in the order of alpha then beta, I will see alpha trying to bootstrap twice; In the reverse order, I will see beta trying to bootstrap twice.

Since the first referenced bundle attempts to bootstrap twice, it attempts to define the web component for the bundle twice, causing an error, and never registering the second referenced bundle's web component.

The goal is to be able to create many web components using @angular and then consuming them within other @angular or insert framework here technologies.

Upvotes: 4

Views: 5978

Answers (3)

Shashi Kiran
Shashi Kiran

Reputation: 367

I used angular custom builder to export the built angular bundle with unique namespace using custom webpack configuration for angular builder.

  1. Install @angular-builders/custom-webpack package

  2. Create custom webpack config file. eg. extra-webpack.config.js.

    module.exports = {
output: {
    chunkLoadingGlobal: 'webpackChunkModuleName',
    library: 'ModuleName'
}

Provide your application name or any unique name for the chunkLoadingGlobal & library.

Note: These properties are as per webpack 5 which is used in angular 12+. Please refer webpack documentation for older versions of webpack.

  1. Use @angular-builders/custom-webpack as your builder in place of @angular-devkit/build-angular and add customWebpackConfig object in angular.json.
"builder": "@angular-builders/custom-webpack:browser",
    .....
    "customWebpackConfig": {
       "path": "extra-webpack.config.js",
        "mergeStrategies": {
           "externals": "prepend"
         }
     }
  1. Now when you run ng build, your application would be built using custom builder with custom webpack configuration. Similar configuration for other application exported as web components and multiple web components can be used in same container application without any error or namespace collisions/contamination.

Upvotes: 1

Kamil Kiełczewski
Kamil Kiełczewski

Reputation: 92347

I use Manfred Steyer advices and it works so I will develop here his answer by giving more detailed working example (based on my case - Angular 8, I do it on MacOs):

On your alpha web-commponent (which is separate angular project <alpha>) run following commands

npm install ngx-build-plus -S
ng update ngx-build-plus --force
ng add ngx-build-plus
ng g ngx-build-plus:wc-polyfill
ng g ngx-build-plus:externals

(this will create file webpack.externals.js in your main project directory) and then in package.json on key scripts I add/edit key:

"build:alpha:externals": "ng build --output-hashing none --extra-webpack-config webpack.externals.js --prod --single-bundle true --project alpha && cat dist/alpha/polyfill-webcomp-es5.js dist/alpha/polyfills-es5.js dist/alpha/scripts.js dist/alpha/main-es5.js > dist/alpha.js"

and now I build web component by:

npm run build:alpha:externals

this will create file dist/alpha.js - in same way you build beta.js (in beta project) - and in your host you can add both to your index.html by

<head>
...
  <script src="./assets/web-components/alpha.js" type="text/javascript"></script>
  <script src="./assets/web-components/beta.js" type="text/javascript"></script>
...
</head>

and both should work at the same time

Upvotes: 1

Manfred Steyer
Manfred Steyer

Reputation: 479

unfortunatelly, concatination of bundles does not work here, b/c webpack is using a global variable. The variable created by the alpha-bundle would be overwritten by the variable of the beta-bundle.

You could rename this variable in the bundles or you could go with [1] and it's --single-bundle switch.

To get started, forget about what the readme says about externals. This is an further optimization technqiue, where the host, alpha and beta could share the same libs. This prevents you from loading Angular several times.

Perhaps, also my blog series about Angular Elements is interesting for you [2].

Best wishes, Manfred

[1] https://github.com/manfredsteyer/ngx-build-plus

[2] https://www.softwarearchitekt.at/post/2018/07/13/angular-elements-part-i-a-dynamic-dashboard-in-four-steps-with-web-components.aspx

Upvotes: 5

Related Questions