Anish PK
Anish PK

Reputation: 19

Error: Angular JIT compilation failed: '@angular/compiler' not loaded! While creating Dynamic component in Angular 9 with AOT

The code works in Angular Version 8 and but shows the below error in version 9.1.1 if compiled with aot.

Full Error:

Angular JIT compilation failed: '@angular/compiler' not loaded!
  - JIT compilation is discouraged for production use-cases! Consider AOT mode instead.
  - Did you bootstrap using '@angular/platform-browser-dynamic' or '@angular/platform-server'?
  - Alternatively provide the compiler with 'import "@angular/compiler";' before bootstrapping.

Requirement: I have a multi-tenant billing application in which every tenant has their own billing formats(templates). These billing templates stored in Database and load to application using API service. The template is in same format of a 'component template'.

In run time I get this template from database through service API and dynamically a create component object using this template. Then I create a module object with this component. After that I attached the dynamically created component ref to ViewContainerRef (viewChild).

It is working perfectly when ng serve –aot false

This is the code to create dynamic component.

import {   ElementRef, CompilerFactory, Component, NgModule, ViewChild, ViewContainerRef,     Input,
    ComponentRef, OnInit, Renderer2, NgModuleRef, Inject, ApplicationRef, } from '@angular/core';

import {Compiler,Injector } from '@angular/core';
import { CommonModule } from '@angular/common';


@Component({
    selector: 'app-Print',
    template:
      `<div  id="print-section"><ng-template #Printcontainer></ng-template></div>
            `,
    styleUrls: []
  })
export class TemplateprintingComponent implements   OnInit {
billingData: any //get from api service
billingTemplate: string //get from api service 
@ViewChild('Printcontainer', { read: ViewContainerRef, static: true }) container: ViewContainerRef;

constructor(public elementRef: ElementRef, private renderer: Renderer2,
            private compiler : Compiler , private injector: Injector, private moduleRef: NgModuleRef<any>) {}

ngOnInit() {
    this.buildPrintTemplate();
}

private buildPrintTemplate(){

    const componentData = {
        model: this.billingData,
        template: this.billingTemplate, //attach template to component. 
        declarations: []
    };
    const dynamicComponent = Component(componentData)(class { });  // create template 

    const dynamicModule = NgModule({
        imports: [CommonModule],
        declarations: [dynamicComponent]   // inject dynamically created component.
    })(class { });

    this.compiler
    .compileModuleAndAllComponentsAsync(dynamicModule)
    .then((factories) => {
        const componentFactory = factories.componentFactories[0];
        const componentRef = componentFactory.create(this.injector,[],null,this.moduleRef);
        componentRef.instance.model = this.billingData;
        this.container.insert(componentRef.hostView);
    });
}   

}

Upvotes: 1

Views: 474

Answers (0)

Related Questions