Lazy loading Angular 13+ modules without the deprecated compiler

Question

I've worked extensively with loading and instantiating Angular modules. (without the router)

But now with Angular 13 I'm seeing deprecations for the usual compiler tools to instantiate an NgModule:

Here is my usual go-to code for loading a module

const moduleFactory = await this.compiler.compileModuleAsync(module);
const moduleRef = moduleFactory.create(this.injector);
const componentFactory = moduleRef.instance.resolveComponent(selector);

Looking deeper The V13 change where ViewContainerRef now has the factory included makes dynamic components 1 step easier. However, regarding ViewContainerRef.createComponent() the documentation states:

Deprecated Angular no longer requires component factories to dynamically create components. Use different signature of the createComponent method, which allows passing Component class directly.

So what are the new directions for these tasks in Angular 13+?

Answer 1

You can leverage a new createNgModuleRef method and replace these steps:

const moduleFactory = await this.compiler.compileModuleAsync(module);
const moduleRef = moduleFactory.create(this.injector);

with

const moduleRef = createNgModuleRef(module, this.injector);

You can also read about all deprecations and possible replacement in Angular doc https://angular.io/guide/deprecations

Answer 2

Here you go Import the ViewContainerRef, Renderer2, Injector

Create a content element

const messageText = this.renderer.createText('message');

Create the component ref

const compRef = this.vcr.createComponent(<ComponentClass>, {Injector: this.injector, projectNodes: [[messageText]]});

If you want the element

const elem = compRef.location.nativeElement;

Answer 3

Without using the factory, you have to use ViewContainerRef.createComponent. refer to the below link https://stackoverflow.com/a/72174262/19077843