Render html element string(with the custom directive on element.) Angular 4.3+ with AOT

Question

I have HTML element string coming from the backend with the custom directive on element.

For example:

str = "abc xyz <span [customDirective]='2'>qwerty</span> pqrs"

I want to render this as HTML so customDirective get in the action.

I get this working with couple solutions without -aot(just ng serve)

But nothing is working with -aot(ng serve -aot) or on production build (ng build -prod)

1. Using [innerHTML] directive

Renders HTML string correctly but this cleared out the directive from the element.

2. Dynamically loading the component

I tried this well-explained solution This worked without -aot

But when I ran with -aot (or at production build) got this error:

"No NgModulele metadata found for RuntimeComponentModule"

3. Dynamically loading the component differently

I tried this another solution This also worked without -aot

But when I ran with -aot (or at production build) got this error:

Runtime compiler is not loaded

4. Tried solving the error in #3

To solve that I loaded the compiler this way and used that to create a component.

const compilerFactory: CompilerFactory =
            platformBrowserDynamic().injector.get(CompilerFactory);
this.compiler = compilerFactory.createCompiler([]);

This also worked without -aot

Got this error when ran with -aot (or at production build):

A platform with a different configuration has been created. Please destroy it first.

Anyone ran into the similar issue please help here.

I have also gone through the Dynamic Component Loader but that only pass the data dynamically to the already defined components.

Here I am looking to create component dynamically with the dynamic template for that which the string I am getting from the backend.