coderkan

export interface FrameworkComponent {
	data: any;
}

coderkan

<div class="card-container">
    <button (click)="loadDynamicComponentsWithIndex(0);" class="btn btn-outline-danger m-2"> <img
      width="40"
      alt="Angular Logo"
      src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
    />Angular</button>
    <button (click)="loadDynamicComponentsWithIndex(1);" class="btn btn-outline-success m-2"><img src="https://img.icons8.com/color/48/000000/vue-js.png"/>VueJS</button>
    <button (click)="loadDynamicComponentsWithIndex(2);" class="btn btn-outline-info m-2"><img src="https://img.icons8.com/colo

coderkan

import { Directive, ViewContainerRef } from '@angular/core';
@Directive({ selector: '[framework-host]' })
export class FrameworkDirective {
    constructor(public viewContainerRef: ViewContainerRef) { }
}

coderkan

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { hmrBootstrap } from './hmr';
if (environment.production) {
  enableProdMode();
}
const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);
if (environment.hmr) {

coderkan

import { NgModuleRef, ApplicationRef } from '@angular/core';
import { createNewHosts } from '@angularclass/hmr';
export const hmrBootstrap = (module: any, bootstrap: () => Promise<NgModuleRef<any>>) => {
  let ngModule: NgModuleRef<any>;
  module.hot.accept();
  bootstrap().then(mod => ngModule = mod);
  module.hot.dispose(() => {
    const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
    const elements = appRef.components.map(c => c.location.nativeElement);
    const makeVisible = createNewHosts(elements);

coderkan

"scripts": {
  ...
  "hmr": "ng serve --configuration hmr"
}

coderkan

{
  ...
  "compilerOptions": {
    ...
    "types": ["node"]
  },
}

coderkan

$ npm install --save-dev @angularclass/hmr

coderkan

"build": {
    "configurations": {
      ...
      "hmr": {
        "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.hmr.ts"
          }
        ]

coderkan

export const environment = {
 production: false,
 hmr: false
};