0
521
ViewsLazy 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:
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+?
2 answers
Answer question0
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
0
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;