Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Runtime compiler is not loaded in AOT service #12885

Closed
sunnylearn opened this Issue Nov 15, 2016 · 11 comments

Comments

Projects
None yet
9 participants
@sunnylearn
Copy link

sunnylearn commented Nov 15, 2016

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

@vicb

This comment has been minimized.

Copy link
Contributor

vicb commented Nov 15, 2016

Thanks for reporting this issue. However, you didn't provide sufficient information for us to understand and reproduce the problem. Please check out our submission guidelines to understand why we can't act on issues that are lacking important information.

If the problem still persists, please file a new issue and ensure you provide all of the required information when filling out the issue template.

@vicb vicb closed this Nov 15, 2016

@sunnylearn

This comment has been minimized.

Copy link
Author

sunnylearn commented Nov 15, 2016

@vicb ,this issue only in AOT compile

@DzmitryShylovich

This comment has been minimized.

Copy link
Contributor

DzmitryShylovich commented Nov 15, 2016

Compiler in not available in aot. See #11780

@sunnylearn

This comment has been minimized.

Copy link
Author

sunnylearn commented Nov 16, 2016

@DzmitryShylovich, Is there a solution to this problem?

@lacolaco

This comment has been minimized.

Copy link
Contributor

lacolaco commented Nov 16, 2016

@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.

@sunnylearn

This comment has been minimized.

Copy link
Author

sunnylearn commented Nov 16, 2016

@laco0416 ,tks!

@arwindgao

This comment has been minimized.

Copy link

arwindgao commented Nov 25, 2016

@laco0416
hi, i tried ur workaround and met an exception below:
No ResourceLoader implementation has been provided. Can't read the url 'xxxx'.
And i also do some researches and find the potential reason, but the answers may not works with AoT (neither Compiler nor Custom ResourceLoader).
Would you like help on this?
Thanks in advanced.

@ghost

This comment has been minimized.

Copy link

ghost commented Mar 24, 2017

Same error here, I cannot use dynamic compiler.
I need both AOT and the compiler. Why cannot I add it in?

@ashwinirajput

This comment has been minimized.

Copy link

ashwinirajput commented Apr 17, 2017

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

@shanurrahman

This comment has been minimized.

Copy link

shanurrahman commented Sep 20, 2018

Don't eagerly import something from a lazy loaded module
It's a common mistake. You've arranged to lazy load a module. But you unintentionally import it, with a JavaScript import statement, in a file that's eagerly loaded when the app starts, a file such as the root AppModule. If you do that, the module will be loaded immediately. and you will get this error(build compiler not found) when trying to load it as lazily loaded module

@JavyMB

This comment has been minimized.

Copy link

JavyMB commented Oct 4, 2018

Like @shanurrahman said eagerly imported
check this article , When to use Angular’s forRoot() method

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.