Home > database >  Lazy loading Angular 13 modules without the deprecated compiler
Lazy loading Angular 13 modules without the deprecated compiler

Time:12-04

I've worked extensively with 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 ?

CodePudding user response:

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

  • Related