Reputation: 19
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