Dynamic Angular component with template from string

50 Views Asked by At

I have to dynamically (at runtime) create a component with template built of string. This string contains some tags that need to be replaced by Angular components.

For example

HTML template:

<div class="box">
  <div>Lorem ipsum <strong>dolor sit amet</strong></div>
  Event date:
  <span id="datepicker"></span>
  - join us.
</div>

needs to be transformed into:

<div class="box">
  <div>Lorem ipsum <strong>dolor sit amet</strong></div>
  Event date:
  <custom-datepicker></custom-datepicker>  <---- here should come Angular component
  - join us.
</div>

and rendered.

I tried to do this by using "unofficial" function ɵcompileComponent and it works fine -> https://stackblitz.com/edit/stackblitz-starters-jtnufx

Unfortunetely it breaks when is built in the AOT mode (ng build --aot -c production). Getting error:

Uncaught Error: JIT compiler unavailable

I know that there is an option of disabling aot in angular.json but I don't want to do this.

Does anyone know how to handle this?

0

There are 0 best solutions below