Angular2 AOT for dynamic HTML

Question

I have dynamic HTML in Angular2 app using Angular2-Component-Outlet and it works. But now when I am trying to create AOT, I still need to load the RuntimeCompiler for Angular2-Component-Outlet.

Is there any way to also AOT compile the dynamic HTML and load the module using lazy loading.

An old Plunker showing usage of Angular2-Component-Outlet to put dynamic content. This is similar to AngularJS ng-include directive.

Please share the code that demonstrates what you are dogin. – Günter Zöchbauer Nov 18 '16 at 07:17 — Günter Zöchbauer, Nov 18 '16 at 07:17

score 2 · Accepted Answer · answered Nov 21 '16 at 07:35

2

I could do AOT of complete project by adapting Dynamic Form approach as designed in the Angular2 documentation.

answered Nov 21 '16 at 07:35

Avinash Tiwari

135
1
10

score 1 · Answer 2 · answered Nov 18 '16 at 07:50

First off, angular2-component-outlet is discontinued in favour of ng-dynamic.

Either way, both solutions require the dependency of the RuntimeCompiler. And this makes sense if you think about it. It's a dynamic component, based on what I guess is user input. Or at least input which is not known beforehand by the ahead-of-time compiler.

To be able to compile this input in runtime, you would need the RuntimeCompiler. I cannot see a way around that.

addition

From ng-dynamic readme:

dynamicComponent Constraints

dynamicComponent needs RuntimeCompiler. You can use AoT compilation, but you cannot eliminate the dependency on @angular/compiler.

Yes, logically it's clear the requirement of RuntimeCompiler. What I am exploring is since I know my dynamic HTML will only use let's say my 10 custom components, and I load the AOT of those component on page load as CommonJS module then can I load the dynamic HTML converted to CommonJS module dynamically. — Avinash Tiwari, Nov 18 '16 at 07:53

Angular2 AOT for dynamic HTML

2 Answers2