PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Friday, November 25, 2022

[FIXED] How to compile the dynamic modules using AOT Compiler in Angular 8

 November 25, 2022     angular, angular-lazyloading, aot, module     No comments   

Issue

I am using Angular 8 with AOT compiler. I need to compile the modules dynamically when I click the button.

In that module file, the component is declared.

Testingmodule.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CounterComponent } from './counter/counter.component';
import { FetchDataComponent } from './fetch-data/fetch-data.component';


@NgModule({
  declarations: [CounterComponent, FetchDataComponent],
  imports: [
    CommonModule



  ],
  exports: [
    CounterComponent, FetchDataComponent
  ],
  entryComponents: [CounterComponent, FetchDataComponent

  ]


})
export class TestingModule {
  public static components = {
    dynamicComponent: [CounterComponent, FetchDataComponent
    ]
  };
}

=========================================================================================

In component.ts

const mod = this.compiler.compileModuleAndAllComponentsSync(TestingModule);
console.log(mod);

=======================================================================================

In Appmodule.ts

import { NgModule, COMPILER_OPTIONS, CompilerFactory, Compiler } from '@angular/core';
import { JitCompilerFactory } from '@angular/platform-browser-dynamic';

 providers: [

    { provide: COMPILER_OPTIONS, useValue: {}, multi: true },
    { provide: CompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS] },
    { provide: Compiler, useFactory: createCompiler, deps: [CompilerFactory] }
  ],


export function createCompiler(compilerFactory: CompilerFactory) {
  return compilerFactory.createCompiler();
}

The above line is working locally, it shows the component factories of those modules.

But, when I run the code in the prod mode using ng serve --prod.

When I load the modules dynamically, it shows the below error.

enter image description here


Solution

In Angular 8,by default, the JIT compiler is used. If we enabled the AOT compiler manually,the above code is not working.

If we disable the AOT and buildoptimizer to false, it will work, but the performance is very slow.

The solution is we need to upgrade the Angular 9 and use the below code for lazyloading. In Angular 9, the default compiler is AOT.

Create a service file:

import { ComponentFactoryResolver, Injectable, ComponentFactory, Component } from '@angular/core';
import { ContentTextBoxComponent } from '../contentTextBox/contentTextBox.component';

@Injectable({
  providedIn: 'root'
})
export class SubLazyloadService {

  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }


  getComponentLoad(selectorname) {
 let dyn_comp_arr = [ContentTextBoxComponent]
];

    for (var i = 0; i < dyn_comp_arr.length; i++) {
      let loadcomp_arr: any = dyn_comp_arr[i];
      const factory: ComponentFactory<Component> = this.componentFactoryResolver.resolveComponentFactory(loadcomp_arr);
      if (factory.selector == selectorname) {       
        return factory;
      }      
    }
  }
 
}

In HTML file:

<ng-template #dynamic></ng-template>

In Component file:

 @ViewChild('dynamic', { static: true, read: ViewContainerRef }) private viewRef: ViewContainerRef;

Inside the dynamic component load function

import('../lazyloadmodules/lazyloading.module').then(({ LazyloadModule }) => {
        this.compiler.compileModuleAsync(LazyloadModule).then((moduleFactory) => {
          console.log(exerciseRef);
          const load_comp: ComponentFactory<Component> = this.lazyloadservice.getComponentLoad(exerciseRef);
          console.log(load_comp.componentType);
          this.viewRef.clear();

          const componentFactory = this.componentFactoryResolver.resolveComponentFactory(load_comp.componentType);
          console.log(componentFactory);

          const componentRef = this.viewRef.createComponent(componentFactory);
          this.currentExerciseRef = componentRef;
          this.currentExerciseRef.instance.id = inputRef;
        });
     
      });


Answered By - Vijayalashmy
Answer Checked By - Mildred Charles (PHPFixing Admin)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing