Runtime compiler is not loaded in AOT service

I’m submitting a … (check one with “x”)

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

app.js?1479195046940:141 Error: Runtime compiler is not loaded at t (app.js?1479195046940:141) at e.compileModuleAndAllComponentsAsync (app.js?1479195046940:141) at e.compileComponent (app.js?1479195046940:115)

Expected behavior Compiler can be loaded。

Minimal reproduction of the problem with instructions file:.service.ts

import {Injectable, ApplicationRef, Injector, ViewContainerRef, ComponentRef, ModuleWithComponentFactories, Compiler, Inject} from ‘@angular/core’;

@Injectable() export class ComponentLoaderService { public dynamicLoadModule : any;

public appViewContainerRef:ViewContainerRef;

constructor(public injector:Injector,
            public appRef:ApplicationRef,
            @Inject(Compiler) public compiler: Compiler
) {
}

setDynamicLoadModule(module :any) {
    this.dynamicLoadModule = module;
}
//APP view Container
setAppViewContainer(appViewContainer:any) {
    this.appViewContainerRef = appViewContainer;
}

/**
 * compile component
 */
compileComponent(componentSelector:string, viewContainerRef:any, callBack:any) {
    return this.compiler.compileModuleAndAllComponentsAsync(this.dynamicLoadModule)
      .then((moduleWithFactories:ModuleWithComponentFactories<any>) => {

          const factory = moduleWithFactories
            .componentFactories.find((x : any) => x.selector === componentSelector);

          let componentRef = viewContainerRef.createComponent(factory, 0);
          if (typeof callBack === 'function') {
              callBack(componentRef);
          }
      });
}

/**
 * Load global component
 * @param componentSelector
 * @param viewContainerRefV :  ViewContainerRef
 * @returns {any}
 */
loadGlobalComponent(componentSelector:string, option:any):any {
    option = option ? option : {};
    this.compileComponent(componentSelector, this.appViewContainerRef, (componentRef:any) => {
        if (typeof componentRef.instance.setOption === 'function') {
            componentRef.instance.setOption(option)
        }
    });
}

/**
 * 
 * @param templateLabel
 * @param viewContainerRef
 * @param option init data
 * @param callBack 
 * @returns {any}
 */
loadComponent(componentSelector:string, viewContainerRef:any, option?:any, callBack?:any):any {
    option = option ? option : {};

    this.compileComponent(componentSelector, viewContainerRef, (componentRef:any) => {
        if (typeof componentRef.instance.setOption === 'function') {
            componentRef.instance.setOption(option)
        }

        if (typeof callBack === 'function') {
            callBack(componentRef.instance);
        }
    });

}

}

// provide in shared module export class SharedModule { static forRoot(): ModuleWithProviders { return { ngModule: SharedModule, providers: [ {provide : ‘component-loader.service’, useClass: ComponentLoaderService } ] }; } }

//use service import {Injectable, Inject} from ‘@angular/core’;

@Injectable() export class DialogService {

constructor (
	@Inject('component-loader.service') private componentLoader: any
) {}

open(option : any) {
	if(option) {
		this.componentLoader.getGlobalComponent('bi-dialog', option);
	}
}

close() {

}

}

# //file : dynamic-load.module.ts import { NgModule, ModuleWithProviders } from ‘@angular/core’; import { FormsModule } from ‘@angular/forms’; import {DialogComponent} from ‘…/shared/components/page/dialog.component’;

@NgModule({ imports: [SharedModule,FormsModule], declarations: [ DialogComponent ] }) export class DynamicLoadModule { }

//I import DynamicLoadModule in app.component.ts import { DynamicLoadModule } from ‘./common/dynamic-load.module’;

//set DynamicLoadModule in appComponent this.componentLoaderService.setDynamicLoadModule(DynamicLoadModule);

Please tell us about your environment: mac phpstorm

• Angular version: 2.1

• Browser: [all | Chrome 54 ]

• Language: [all | TypeScript 2.X | ES6/7 | ES5]

• Node (for AoT issues): node --version = 6.9.1

[ashwinirajput]

Same issue Runtime compiler is not loaded when i am using plunker ng2-date-time-picker

[lacolaco]

@sunnylearn I’m using RuntimeCompiler in platformBrowser with few hacks.

1: Add COMPILER_PROVIDERS into platformBrowser()

import { COMPILER_PROVIDERS } from '@angular/compiler';

platformBrowser(COMPILER_PROVIDERS).bootstrapModuleFactory(AppModuleFactory);

2: Provide RuntimeCompiler as Compiler

providers: [
  { provide: Compiler, useExisting: RuntimeCompiler }
]

This is not a standard way, so please don’t forget nobody knows when we can use this workaround until.