CODEWITHSUNDEEP
angularlazy-loadinglazy-initialization
Ben Racicot
Ben Racicot

Reputation: 5905

Lazy loading Angular 13+ modules without the deprecated compiler

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:

enter image description here

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+?

Upvotes: 12

Views: 12109

Answers (3)

yurzui
yurzui

Reputation: 214017

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

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

with

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

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

Upvotes: 19

Siva Gokul
Siva Gokul

Reputation: 91

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

Upvotes: 1

zambono
zambono

Reputation: 1397

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;

Upvotes: 3

Related Questions