Paste dynamic Angular 4.x content with known / declared components

Question

I have (which I think would be a fairly common problem) that I cannot find a good way to solve with the current Angular 4.x architecture. Maybe there is a method that I have not found yet, but I searched quite widely.

I would like to add dynamic user-created HTML content to an Angular app. This HTML content also includes some well-known (included in the module declaration) Angular components that should be displayed. Below are some puesdo-app HTML that will help me explain:

<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>

    <!--
        the dynamic content would be inserted into the <main> element as HTML with angular <app-... tags
        the content in the HTML content inserted main tag could contain anything
        the angular components within the content should be initalized as normal
    -->
    <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>

    <!-- more traditional Angular components could come after -->
    <app-footer></app-footer>

</app-component>

I tried two methods to achieve this, none of which really work.

1. Using the Dynamic Template / Component with a JIT compiler.

TL;DR; AOT. AOT - .

, . . JIT-, HTML . , AOT. Angular 4.x JitCompilerFactory AOT. , JIT Complier AOT, JIT- . . , Angular, , JIT-.

2.

TL;DR; .

JIT- AOT , ComponentFactoryResolver. , , , HTML-. , , . :

• HTML-
  • HTML
  • Angular DomSanatizer.bypassSecurityTrustHtml(),
  • DOM
• HTML
  • {<app-selector-string> : ComponentClass} json
  • DOM ComponentClass
• ViewContainerRef , ( )
• ViewContainerRef.createComponent(),
  • projectableNodes, html-
• , .

, ViewContainerRef 3. ( - 3. IDK. )

? ?

!

Answer 1

, ...

Angular ApplicationRef attachView(), . ​​ , .

:

// create a componentRef
const componentFactory = ComponentFactoryResolver.resolveComponentFactory(AngularComponent);
const componentRef = componentFactory.create(Injector);

// attach the componentRef to the angular ApplicationRef
ApplicationRef.attachView(componentRef.hostView);

// insert the root element of the new componentRef into any DOM node
const componentRoot: HTMLElement = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0];
const node = document.getElementById('insertionPoint'); 
Renderer2.insertBefore(node.parentNode, componentRoot, node);

// don't forget to destroy the component when you're done with it
ApplicationRef.detachView(componentRef.hostView);
componentRef.destroy();