Is it possible to dynamically load an html template with angular components to a angular app which is AOT compiled?

Question

In my angular application, back-end users can create custom templates. Those custom templates need to be loaded in the angular application at specific positions. I have a custom directive which gets templates ( based on the routes) from the CMS and inject it to my angular application. If I put it into the innerHTML the components will not get rendered correctly. I need componentFactoryResolver and compiler to properly show the components.

The above solution does not work with AOT compilation. Is there any other way I can achieve the same and make use of AOT? Is server side rendering is only solution to this?

Answer 1

Angular doesn't encourage using Compiler to create dynamic template.

Could/would/will code using COMPILER_PROVIDERS be supported by AOT?

But maybe in future it will be possible with without shipping the compiler because new View Engine open new capabilities.

Properties

the generated code relies on very few internals.

• we can make the API public and stable

• users could ship the generated factory files on npm

  this makes calls to ngc in applications faster as it does not need to compile the code of libraries like Ionic any more.

• users could implement their own ViewEngine

  this way we can drop the Renderer abstraction, as we already have an indirection via the ViewEngine

• users could create templates programmatically during runtime

  without shipping the compiler

  eg for a dynamic form / ....

  we might want to provide a builder for this that calculates indices correctly and can already be used in tests

• we could create a new kind of directive that transforms a ViewDefinition, e.g. wraps elements into new ones, ... (similar to the compile in Angular 1).

  needs some helpers that maps indices from new to original indices

Read more in Design Doc for View Engine