I have to implement Angular "widgets" within a CMS HTML page. In order to achieve this I need to provide a single JavaScript file which needs to implement the component within a div. I already have implemented a means to generate independent widgets which can be seen here: https://github.com/pugillum/angular-widgets. This makes use of the angular CLI.
What I am not quite able to do is figure out the best way to load the widget from a single JavaScript file. Essentially if I generate a production build I end up with 4 files which need to be loaded:
- styles.[cache-buster-number].bundle.css
- inline.[cache-buster-number].bundle.js
- polyfills.[cache-buster-number].bundle.js
- main.[cache-buster-number].bundle.js
Angular CLI does, of course, also generate an Index.html file containing references to these files, but how do I dynamically load this code into a page from within a JavaScript file?