Compiler.compileModuleAndAllComponentsSync “Runtime compiler is not loaded” in Angular 10

[namikarif]

I designed a dynamic form. It works well in Angular 5 version. However, after upgrading the Angular version to 10, it started malfunctioning.

Error message returned from compiler.compileModuleAndAllComponentsSync line:

Error: Runtime compiler is not loaded at Compiler._throwError (http://localhost:8001/vendor.js:39209:11) at SectorFormComponent.createComponent (http://localhost:8001/main.js:122993:33) at SectorFormComponent.compileTemplate (http://localhost:8001/main.js:122845:30) at SectorFormComponent.ngOnInit (http://localhost:8001/main.js:122838:14) at checkAndUpdateDirectiveInline (http://localhost:8001/vendor.js:33918:19) at checkAndUpdateNodeInline (http://localhost:8001/vendor.js:42831:20) at checkAndUpdateNode (http://localhost:8001/vendor.js:42793:16) at debugCheckAndUpdateNode (http://localhost:8001/vendor.js:43420:21) at debugCheckDirectivesFn (http://localhost:8001/vendor.js:43384:13) at Object.updateDirectives (http://localhost:8001/main.js:152469:420)

When I make the value of AOT and buildOptimizer false, it does not give this error. But this time ngModel is not working. How can I solve this problem without making AOT and buildOptimizer false?

Sample codes:

`import {Compiler, Component, ComponentFactory, ComponentRef, Input, NgModule, OnInit, ViewChild, ViewContainerRef} from '@angular/core'; import {SharedModule} from '@app/modules/shared/shared.module'; import {CommonModule} from '@angular/common'; import {UtilService} from '@app/modules/shared/services/util.service'; import {FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';

@Component({ selector: 'kl-sector-form', templateUrl: './sector-form.component.html' }) export class SectorFormComponent implements OnInit { @ViewChild('container', {read: ViewContainerRef, static: true}) private container: ViewContainerRef; private componentRef: ComponentRef<{}>;

constructor(private compiler: Compiler) { }

ngOnInit() { this.compileTemplate(); }

compileTemplate() { const metadata = { selector: 'dynamic-form', template: this.template }; const factory = this.createComponent(this.compiler, metadata); if (this.componentRef) { this.componentRef.destroy(); this.componentRef = null; } this.componentRef = this.container.createComponent(factory); const instance: any = this.componentRef.instance; }

private createComponent(compiler: Compiler, metadata: Component): ComponentFactory { const component = class DynamicComponent implements OnInit {

  ngOnInit() {
  }
};
const dynamicComponent = Component(metadata)(component);

@NgModule({
  imports: [
    CommonModule,
    SharedModule.forRoot(),
    FormsModule,
    ReactiveFormsModule,
  ],
  declarations: [dynamicComponent],
  providers: [FormBuilder]
})
class DynamicFormModule {
}

const module = compiler.compileModuleAndAllComponentsSync(DynamicFormModule);
return module.componentFactories.find(f => f.componentType === dynamicComponent);

} }`

`Angular CLI: 10.1.1 Node: 10.16.0 OS: darwin x64

Angular: 10.1.1 ... animations, cli, common, compiler, compiler-cli, core, forms ... language-service, platform-browser, platform-browser-dynamic ... platform-server, router Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.1001.1 @angular-devkit/build-angular 0.1001.1 @angular-devkit/build-optimizer 0.1001.1 @angular-devkit/build-webpack 0.1001.1 @angular-devkit/core 10.1.1 @angular-devkit/schematics 10.1.1 @angular/cdk 10.2.1 @angular/http 5.2.11 @angular/material 10.2.1 @ngtools/webpack 10.1.1 @nguniversal/common 10.1.0 @nguniversal/express-engine 10.1.0 @nguniversal/module-map-ngfactory-loader 8.2.6 @schematics/angular 10.1.1 @schematics/update 0.1001.1 rxjs 6.6.3 typescript 4.0.2 webpack 4.44.1`

[JoostK]

For AOT + JIT to work you must disable buildOptimizer, see https://github.com/angular/angular-cli/issues/17663#issuecomment-708031596.

As mentioned in #39159, there is something wrong in the stack trace as it shows ViewEngine specific code is being called, which shouldn't be the case in Angular 10 with Ivy enabled. Are you using Angular CLI and normal ng build/ng serve etc?

I am tempted to close this as a duplicate of #39159 as this is the exact same request without any new information, but I'll keep it open for now for you to follow up on the above question.

[namikarif]

@JoostK Since you closed the other issue without resolving it, I recreated the same. When we disable buildOptimizer, the compiler works, but this time the ngModel and other directives don't work. I am using Angular CLI and normal ng build / ng serve

[namikarif]

This problem happened when we pass from Angular 5 to Angular 10 version. If we are receiving these problems when we change the version, it means there are solving samples too. We are waiting for support from the Angular Developer Team

[alxhub]

Closing as this is a support request and lacks a runnable reproduction demonstrating the problem.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}