Начать угловой процесс рендеринга приложения из JavaScript

Question

У меня есть угловое приложение, которое я включу в другое приложение (вид компонента). Но я хочу начать процесс рендеринга угловых приложений при определенных обстоятельствах, скажем, нажатием кнопки. это означает, что угловой элемент DOM не визуализируется с самого начала, но после определенных действий, нажмите кнопку, чтобы упростить, я создам элемент, а затем я хочу запустить угловое приложение.

Я придумал грязный подход, который я использовал для реагирующих приложений, и я добавляю функцию, которая живет в приложении, в объект окна, а затем вызываю ее всякий раз, когда мне нужно, например:

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule
    ],
    entryComponents:[
        AppComponent
    ],
    providers: []
})
export class AppModule {

    _app: ApplicationRef

    constructor() {
        window['LoadAngularApp'] = this.loadAngularApp.bind(this);
    }

    ngDoBootstrap(app: ApplicationRef) {
        this._app = app;
    }

    loadAngularApp() {
        this._app.bootstrap(AppComponent);
    }
}

в HTML что-то вроде:

<button type="button" onclick="myFunction()">Load!!!</button> 
<script>
    function myFunction() {
        var body = document.getElementsByTagName("body")[0];
        var app = document.createElement("app-root");
        body.appendChild(app);
        window.LoadAngularApp();
    }
</script>

Это работает, но может быть взломано.

Предложения