Compile an Angular Component as standalone Custom Elements
Angular Elements are fully valid Custom Elements. As such, compiling them into standalone script files which can then be included as part static HTML files, even other apps using different frontend frameworks, makes it a powerful toolkit. In this lesson we’re going to explore how we can adjust the CLI compilation process to export our Angular Element into a standalone script file.
Instructor: [00:00] In this example here, we have that greeter component, which we have compiled basically as a custom element using the Angular elements API. We have referenced it here in our entry components. We created here our custom element with the corresponding tag.
[00:15] Then within our app component, we dynamically inserted whenever someone clicks that button, we reference that container element up there, and we insert it here dynamically. So far, as you can see, this works.
[00:27] We get here the doGreet inserted into container, and you can see that ngVersion attached to it, which means that this component basically instantiates and bootstraps itself. What we would like to achieve, however, is to not only embed this within an existing Angular application, but as a standalone component.
[00:45] Let's create here a demo folder. In that demo folder, we simply create an index HTML file. This is a plain index HTML file. What we would like to have is that whenever insert a doGreet here, we get the same functionality as we get within the Angular application.
[01:04] As the first step, we could go here, and remove .app component, because we don't need .app component anymore. The only thing which we are interested in is our greeter component. We also remove .bootstrap and router, add here an ngDoBootstrap, which indicates to Angular that this module should be auto-bootstrapped by itself.
[01:25] With that, we can also remove those files here which belonged to our app component from before, which we don't need anymore. Once we have set up these components in this way, we can now establish a custom build process.
[01:39] The Angular CLI already configured the build process for our application, which is .ngBuild. If you open up the console and execute .build, the Angular CLI now starts. Based on the configuration, .angular JSON, it will compile our project.
[01:54] Once that process finishes, we can go to that dist folder, and we see here a series of files which get produced. Now, what we really want here is to simply concatenate all of these files, and to basically create one single script which we can then import in our index HTML file, which will then contain our component.
[02:14] For that purpose, let's create here a script file. I will get a root folder here. Call it buildVC.h. Let me just quickly copy in here the actual command. It's actually not that difficult. What we want to do is to execute the ngBuild command always from our Angular CLI.
[02:33] We give it the name of our project, which in this case, it's named ngElements. We want to create a production build, and also want to disable the output hashing. That is important because in that way, the files that get produced, like runtime.js, polyfill.js, and so on, won't get the output hash attached to it, which in this case, we are not interested in.
[02:53] As you can see, what we do here is we use a simple cat command, we can concatenate all those variables' files into a single file, which we name here ngElements. What I also do is I already place it into that demo folder, where we have our index HTML file.
[03:08] Let's save this here and execute .build. We simply invoke .build, WC command, which stands for web component. Once that build process finishes, if we open up here our browser again, we can see here that demo folder now got an ngElements file, which contains the compiled bundle, which has our web component inside.
[03:30] We can now go into that index HTML file and reference it via a script tag, by simply using here ngElements. Now, we need to also instantiate that. That is something you can directly place on some web server.
[03:45] We can here use a live server on that demo folder. Live servers utility, that allows us to point a web server on those static files, in this case, that demo folder. Once it is up we can here go to localhost:8080.
[04:00] You can see here that hi there is on our page. That means that our web component got instantiated and executed correctly. Again, you see having an R tag and a version number attached to it, which means it got bootstrapped successfully.