angular 15 truely dynamic components with compileModuleAndAllComponentsAsync

Question

I am in the middle of migrating of project from angular 8 to 15

The key feature of app is dynamic product cards, template for them is arbitrary html which is loaded from server and not known during development (not even saying that total list includes approx 200 000 templates). Of course such template contains our own angular components & directives with primitive event handling.

well, all this stuff described a lot of times starting from angular 2 (all tutorials are just copy-paste)

1. ComponentFactoryResolver ->
2. ComponentFactory ->
3. define custom module & component classes with aforementioned event handling methods inside of some function (good old class_definition.method = function () {} ) ->
4. and finally compile it with compiler.compileModuleAndAllComponentsAsync(tmpModule)

Of course the old code that was creating components & modules dynamically doesn't works with lots of error

and I am googling to understand what is going on, because classes: Compiler, ComponentFactoryResolver are deprecated and I see on the internet that angular moved to ivy engine and deprecated jit compiler in favor of aot

So am I right and such functionality is lost, or still there is a way to create components in runtime (use some other classes instead of deprecated Compiler & ComponentFactoryResolver)

And if yes could you point me at gist on how to do this exactly for angular 15 with ivy ?

thanks in advance

not sure how this piece of code will help as to understand an issue as problems are quite common

 public createComponent(selector: string, template: string): any {

    // noinspection AngularMissingOrInvalidDeclarationInModule
    @Component({
        // tslint:disable-next-line
        selector: selector,
        template
    })
    class CustomComponent {
        parent: any = {};
        wordRef: WordReferenceDto;

        // funcs
        clicked: any;
        added: any;
        play: any;

        public delegate(action: string, arg: any) {
            const func = this.parent[action];
            func.call(this.parent, arg);
        }
    }

    return CustomComponent;
}

public createModule(component: any): any {
    @NgModule({
        declarations: [component],
        entryComponents: [component],
        imports: [
            CommonModule,
            IonicModule,
            TagsxModule
        ],
        schemas: [NO_ERRORS_SCHEMA],
        exports: [component]
    })
    class CustomModule {
    }

    return CustomModule;
}

Answer 1

It is still possible to create components at runtime!

I do it like this. In my component ts file I have:

@viewChild("container123", { read: ViewContainerRef }) container123!: ViewContainerRef;
componentRef!: ComponentRef<DynamicBaseComponent>

Then in a function in the same ts file:

import { Type } from "@angular/core";
import { TheActualComponent } from "./example/TheActualComponent";
this.componentRef = this.container123.createComponent<DynamicBaseComponent>(TheActualComponent);

Now that the created component is directly injected in container123 but as reference put in this.componentRef. We can now manipulate the properties of the instance, if we want to. So a next line would be: this.componentRef.instance. <-- to manipulate public fields of the just created component.

In my project DynamicBaseComponent is a base component so I can easily create components that extend the base component. But DynamicBaseComponent can be any thing.

Also in the HTML

<template #container123></template>

Maybe also a small tip, I also ones updated from I believe Angular 9 to 13 or something. Pain in the *ss. Anyway, try to do it in steps and use: https://update.angular.io/ For tips and tricks ;) Good luck!

Also keep in mind that your TypeScript versions run along. Angular 15 runs on TypeScript 4.9.5 for now!

Answer 2

It is possible, and it became easier with Ivy (main thing is factory resolver is not required any more, bc factory is available on the component/service/directive class itself).

firstly you need to import '@angular/compiler'; before application bootstrap. i.e. in main.ts

when there is a compiler on runtime, code to compile and render component could look like this

const component = Component({selector, template})(class CustomComponent{
  method() {}
})
NgModule({declarations: [component], imports: [SomeModule]})({})
this.someViewContainerRef.createComponent(component);

but NgModule is not really a required thing as standalone components appeared, so this should also work

const component = Component({selector, template, standalone: true, 
imports: [SomeModule, SomeStandaloneDirective, SomeStandaloneComponent]})(class CustomComponent {})

and that is basically it