3

I am working on a plugin-based application done in Angular 6. I have 2 projects, a main project and a lib project where i develop the plugins. The plugins get builded with ng build --prod into UMD and then loaded using SystemJs into the main app, where they get compiled using the Compiler class at runtime (the builded plugins are deployed on another server). The main app holds no reference to the lib project at build time.

This is working fine as long as i am running the main app in dev mode. When i try it in prod, it crashes with "Error: Runtime compiler is not loaded" due to the fact that the JIT compiler gets removed in prod build.

My question is: Is it possible to build a Angular 6 Cli Lib project (or not necessarily a cli lib project) ahead of time, load it with SystemJs and then just use the component factories for dynamic component creation? How could i do that build?

I can't build the lib together with the main app as the final goal is having other developers create plugins for the app, and not all components would be used at runtime.

I can't keep the main app without AOT as its gonna grow very large and the performance would have alot to suffer.

I am aware of Angular Elements as well, but i want to have the possibility of creating AOT lib plugins as well.

IvanSt
  • 360
  • 4
  • 17
  • You want to have a dynamic application via run-time loaded plugins, and you want AOT compilation. This is a situation where you it would be difficult have your cake and eat it, too. About the closest I can think that you could get to this is lazy loading an Angular module that consumes your library, perhaps with a [custom preloading strategy](https://angular.io/guide/router#custom-preloading). This could be an interest problem to solve. – R. Richards Aug 25 '18 at 13:01
  • Thanks for your comment. My scenario is the following: In the entire app (about 20 lazily loaded modules that are builded with the main app), there are two UI's that require this functionality. A builder UI, that constructs the UI's on user preferences, using the plugins, and another UI that displays the builded UI to the user. Based on the config created in the builder UI, i would construct the dynamic UI. I only want to load the plugins the user needs and that have previously been AOT compiled. The main app is unaware of the location and number of plugins needed until runtime. – IvanSt Aug 25 '18 at 13:13
  • Would a custom preloading strategy help with this scenario? Even though i dont know the number of modules that need to be loaded and on what server they are found until runtime? – IvanSt Aug 25 '18 at 13:13
  • I *feel* like a custom preloading strategy could be of some use. That is just a feeling. I have only played around with them, but they look like you could get very creative with them. The example on angular.io give me impression you can get very granular when loading modules. – R. Richards Aug 25 '18 at 13:42
  • Thanks! I will play around with them today or in the next couple of days. If you get a idea of how it could actually be implemented, feel free to post a answer or i will return to post it myself if i get the hang of it :). – IvanSt Aug 25 '18 at 13:51
  • Oh, another question. Do you happen to know if is possible for a standalone library to be compiled AOT? Without it being imported into a project that gets AOT compiled. – IvanSt Aug 25 '18 at 13:53
  • If by AOT you really mean uglified and minified, then the answer is no. Consuming applications wouldn't be able to use them like that. Ahead-of-time can't really happen in an application until the compiler (or whatever the compiler uses) determines what code is used, or not. – R. Richards Aug 25 '18 at 14:39
  • What i mean, the library code gets compiled AOT (meaning factories are created) example at: https://stackoverflow.com/questions/46670430/what-does-the-angular-compiler-compile/46671117#46671117 . This way i wouldnt need to use the JIT Compiler class anymore in my code and my assignment would become doable. At the moment, running ng build --prod in my library project it only complies typescript to javascript but it doesnt compile the HTML to javascript expressions. – IvanSt Aug 25 '18 at 14:48
  • 1
    Doing a build on a library is as far as I have ever taken one (beside consuming it in an application). I don't know what you could do to take it any farther than that. – R. Richards Aug 25 '18 at 14:59

0 Answers0