I am trying to implement an Angular library which will encapsulate the logic required to add dynamic components to the DOM. Applications that consume this library must be allowed to provide a list of Components that will be dynamic, and then define "outlets" where these dynamic components must be inserted at runtime.
My code is heavily inspired by two articles:
- The first from Max Koretskyi: https://indepth.dev/posts/1054/here-is-what-you-need-to-know-about-dynamic-components-in-angular
- The second by Wes Grimes: https://itnext.io/building-an-aot-friendly-dynamic-content-outlet-in-angular-c2790195cb94
The basic structure of my code is as below:
- A library
ng-dynamic-componentswith a moduleNgDynamicComponentsModule, which allows the consumer to define a list of components that should be available for adding to the DOM at runtime - A service , which maintains the registry of such dynamic components, and their component factories, to be used to instantiate the component when needed
- An outlet component which handles the logic of actually placing the dynamic component into the DOM using a
ViewContainerRef - A
dynamic-test-appthat imports this library and consumes it with some test components that are dynamically injected --OneComponent,TwoComponent, andThreeComponent
My code is available at: https://github.com/kiranjholla/ng-dynamic-components. To run my code, just clone this Git repository and then type in npm install and npm start. This will first build the library using the option --prod, and then build the test application using the options --prod --aot=false --buildOptimizer=false, and then start a http-server instance to serve the dist folder
Now my questions: the above code works only when the application is built with --aot=false --buildOtimizer=false; when AOT is enabled, I get an error stating that the compiler is unavailable.
But, I have already provided the Compiler specifically using the JitCompilerFactory. How can I get it to work with AOT??
Any help/pointers, greatly appreciated.