Use ngx-build-plus to compile Angular Elements
In this lesson we’re taking a look at ngx-build-plus, an open source extension of the Angular CLI that allows to tweak it’s build process with the purpose of being able to compile Angular Elements more easily.
Check out the ngx-build-plus repository for more options.
Instructor: [00:00] What we see here is the outcome of running this file here, which contains a tag and a script file, which is a compiled-down Angular component into an Angular element. We see that it instantiated here in our elements panel.
[00:13] We have created the whole thing here by using the Angular elements package and using its create custom element function here, giving it a component and an injector. From that, we get an instance, which we can then pass to the custom elements browser API to define a real custom element that can run in the browser.
[00:30] The whole build process here has been created in a very old-fashioned manner or way. What we did is compile our Angular application just as we do it normally. We remove here the output hashing, which would attach to all of the output files a hash code in order to clear previous browser caches.
[00:48] Then we use an old-fashioned cat command to concatenate all of the files that would normally be produced by the Angular CLI, and get a single ngElements JS file, which we then copy to that demo folder, where our index.html file sits, such that we can just include it and run it straight away.
[01:07] While this will not work in a lot of use cases, what we rather would like to do here is to use an external tool, which is called ngx-plus, and it's provided by Manfred Steyer. What ngx-plus does is it extends the current Angular CLI's default behavior with some additional functionality.
[01:25] One of these functionalities, one of these features, is to create a single bundle for an Angular element. First of all, let's install ngx-build-plus. We can just use an ng@ngx-build-plus and add that to our current working directory.
[01:45] Once the installation finishes, we can take a look at what ngx-build-plus did. First of all, if you go into the Angular JSON file, what it did is it changed our builder here to the ngx-build-plus build file, such that it can take control over how our project is being built.
[02:02] We can now go to our custom script here and adjust it accordingly. First of all, we don't need that concatenation here anymore, because that will be something ngx-build-plus takes care of it. What we can have here is we can add that single-bundle equal to true.
[02:20] Using single-bundle here to true guarantees that we get a single file as an outcome. If you have multiple Angular elements built in separate files, you may not want to compile everything into a single bundle.
[02:32] Rather, for instance, Angular core, RxJS, and these kind of libraries, you may want to keep them externally. ngx-build-plus has options for doing exactly that. In our simple case here, we use single-bundle true, and we also want to keep our polyfills.
[02:47] With that set, let's try out the build. Let's go to our dist directory to see what has been produced. We see here our ngElements being built. We see our main JS file, which contains all of the various files bundled into a single file. We also see that polyfills.js.
[03:04] That polyfills file has been created separately by intention by ngx-build-plus. The polyfills file is useful for testing in our environment here while developing the web component. Then we need to deploy it to our destination environment, due to the router would like to have that polyfill included by the destination environment.
[03:22] Otherwise, we would ship the polyfills with every Angular element being compiled, which would just result in an overhead of duplicated polyfills. We definitely want to have these two files being moved over to our demo folder.
[03:35] For now, let's just do something like this.ngElements/mainJSfile. We move that to demo, and we call it ngElements, just as we did before. Let's also move over our polyfills. Let's try to enter our build process again to see whether the whole workflow works as expected.
[03:58] We can now see the polyfills being also moved over. Let's open index.html files, and make sure that we also include our polyfills files. Let's save this, and now, we can use our live server, and run our demo folder.
[04:14] Let's go to the browser and refresh. We can see that it works just as we expect.