1

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 basic structure of my code is as below:

  • A library ng-dynamic-components with a module NgDynamicComponentsModule, 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-app that imports this library and consumes it with some test components that are dynamically injected -- OneComponent, TwoComponent, and ThreeComponent

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. enter image description here

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.

Kiran
  • 411
  • 1
  • 4
  • 13
  • What Angular version are you using? I think both linked articles are pre-Ivy. I wouldn’t expect aot to work (as you are specifically wanting JIT).. – MikeOne Feb 01 '21 at 17:56
  • Yes, this is Angular 11. Which means it is Ivy. However, there must be a way to cater to such a use-case in Ivy too? I understand that the syntax to be used might change. Also, any clues on why Change Detection won't run after adding the components into the view? – Kiran Feb 02 '21 at 01:22
  • so where and why do you use the compiler? – Max Koretskyi Feb 08 '21 at 15:31
  • I have a test application `dynamic-test-app` which consumes the dynamic components library: [`NgDynamicComponentsModule.withRegistry()`](https://github.com/kiranjholla/ng-dynamic-components/blob/main/projects/dynamic-test-app/src/app/app.module.ts#L15). A module with all dynamic components is passed into the `withRegistry` call. The `NgDynamicComponentsModule` has a service [`ComponentRegistryService`](https://github.com/kiranjholla/ng-dynamic-components/blob/main/projects/ng-dynamic-components/src/lib/services/component-registry.service.ts) which compiles the dynamic components at runtime. – Kiran Feb 10 '21 at 01:57
  • The idea is to provide this library `NgDynamicComponentsModule` which can taken any Component Registry and handle the dynamic instantiation and rendering of those components. We have a use-case where we need to determine the component to be rendered at run-time based on some data coming in from the server. – Kiran Feb 10 '21 at 09:46
  • @Kiran, what if you pre-compile all components at build time and later load component factories for rendering that are need based on the server information? – Max Koretskyi Feb 18 '21 at 21:07
  • @MaxKoretskyi Thanks for that suggestion! I am going to try that. – Kiran Mar 03 '21 at 18:58

0 Answers0