Replace deprecated Angular ComponentFactoryResolver, ComponentFactory

In Angular 13 the new API removes the need for ComponentFactoryResolver being injected into the constructor, like you did in your code.

Now to dynamically create a component you have to use ViewContainerRef.createComponent without using the factory.

So, instead of using

const compFactory: ComponentFactory<any> = this.resolver.resolveComponentFactory(DynamicTableComponent);

you can do:

import {ViewContainerRef} from '@angular/core';

/**
your code logic
*/

constructor(private viewContainerRef: ViewContainerRef)

public addTable(): void {
   const component = this.viewContainerRef.createComponent(YourElement);

}

After spending a few hours I have reached the correct solution for Angular 13 Ivy with the new Update of Component API:

First you need to create a directive, the best would be in a subfolder called 'directives', you can do it manually or use the command:

ng generate directive directives/DynamicChildLoader

This will generate the file:

dynamic-child-loader.directive.ts

There your code will need to be something like:

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

Now in your component go to the .HTML and you need to include this:

<ng-template dynamicChildLoader=""></ng-template>

And in your .TS:

@ViewChild(DynamicChildLoaderDirective, { static: true })
dynamicChild!: DynamicChildLoaderDirective;
    
ngOnInit(): void {
  this.loadDynamicComponent();
}
    
private loadDynamicComponent() {
  this.dynamicChild.viewContainerRef.createComponent(YourDynamicChildComponent);
}

Don't forget that in your app.module.ts or the module you are using to include in the Declarations part your DynamicChildLoaderDirective

@NgModule({
  declarations: [MyExampleComponent, DynamicChildLoaderDirective],
  imports: [CommonModule, ComponentsModule],
})

Here is what worked for me:

import {
  Component,
  ComponentRef,
  ElementRef,
  ViewChild,
  ViewContainerRef,
} from '@angular/core';
import {
  TestComponent
} from './TestComponent';

@Component({
  // ...
})
export class AppendComponent {
  constructor(private _ViewContainerRef: ViewContainerRef) {}

  @ViewChild('editor') editor!: ElementRef <HTMLElement> ;

  public appendComponent() {
    const component: ComponentRef <TestComponent> =
      this._ViewContainerRef.createComponent(TestComponent);

    const element: HTMLElement = component.location.nativeElement;
    element.contentEditable = 'false';

    this.editor.nativeElement.appendChild(element);
  }
}

In my application, I needed to place several Angular components outside of the Angular application, and without using the deprecated ComponentFactoryResolver, this could not be done.

Having spent a lot of time searching for solutions, I came across this post, on the basis of which I implemented my application, and I offer a shortened version of the solution for your consideration, maybe it will be useful to someone.

The disadvantage of this solution is that it is not possible to create components dynamically, because components must be created when the application is compiled. Maybe someone can improve this version and also implement dynamic creation of components.