I'm facing a challenge with the current Angular 4.x architecture that I believe is fairly common. Despite extensive searching, I haven't found a suitable solution yet. My issue involves inserting dynamic HTML content, including known Angular components, into an Angular app. The following pseudo-app HTML demonstrates my dilemma:
<app-component>
<!-- standard angular header and router-outlet -->
<app-header>
<app-nav>
<ul>
<li routerLink="/page-one">First Page</li>
<li routerLink="/page-two">Second Page</li>
<li routerLink="/page-three">Third Page</li>
</ul>
</app-nav>
</app-header>
<router-outlet></router-outlet>
<main>
<h1>Title</h1>
<app-component>
<p>this component and its content should be initalized when HTML is inserted into main</p>
</app-component>
<app-component>
<app-sub-component>
angular components here might also contain other angular components
</app-sub-component>
</app-component>
<p>more regular HTML content</p>
</main>
<app-footer></app-footer>
</app-component>
In attempting to address this issue, I've explored two methods without complete success.
1. Dynamic Template/Component pattern with JIT Compiler
TLDR; Not compatible with AOT.
Utilizing a dynamic template/component pattern alongside the JIT Compiler has proven effective, but only in non-AOT builds. With the unavailability of JitCompilerFactory in AOT compilation, the optimal performance benefits for known components remain untapped. While integrating JIT Compiler selectively could offer a balance between efficiency and flexibility, the lack of detailed insight into Angular's internal processes prohibits definitive conclusions.
2. Dynamic Component Loader Pattern
TLDR; Difficulty loading components at entry point.
Considering the challenges faced in AOT builds, an alternative approach involving ComponentFactoryResolver seemed promising. However, the practical implementation revealed limitations in creating a ViewContainerRef dynamically, impeding component insertion and configuration. This setback underscores the complexity of incorporating dynamic components within the existing framework.
Exploring these avenues has shed light on the intricate nature of accommodating dynamic HTML content with Angular components. Despite the hurdle encountered, persistence and creativity may unveil novel solutions to overcome this obstacle.
Is there a simpler way to achieve this goal? Your insights and suggestions are greatly appreciated.