Angular2 RC5 dynamically compiles a component with the correct module

I am trying to use angular2 compiler to dynamically insert a component that works fine as long as all the code in the module is by default.

But if you try to put the component in your own functional module, it will break. The injection instance of the compiler ( ModuleBoundCompiler ) is bound to the module by default, not to the function, and I cannot redefine the module in the compiler call, because I cannot get a reference to it due to circular dependencies (component export component, component must reference on the functional module).

Any idea if this is a mistake, or am I doing something wrong?

Default module:

import {NgModule} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; import {AppComponent} from './app.component'; @NgModule({ imports: [BrowserModule, FeatureModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } 

AppComponent:

 import {Component} from "@angular/core"; @Component({ selector: "my-app", template: ` <h1>Angular2 RC5 Test</h1> <feature-component></feature-component> ` }) export class AppComponent { } 

Feature Module :

 import { NgModule } from "@angular/core"; import { CommonModule } from "@angular/common"; import { FormsModule } from "@angular/forms"; import { FeatureComponent } from "./feature.component"; import { FeatureService } from "./feature.service"; @NgModule({ imports: [CommonModule, FormsModule], declarations: [FeatureComponent], exports: [FeatureComponent], providers: [FeatureService] }) export class FeatureModule { } 

FeatureComponent

 import {Component, Compiler, ComponentFactory} from "@angular/core"; import {FeatureService} from "./feature.service"; // import {FeatureModule} from "./feature.module"; // produces error if referenced due to circular dependency @Component({ selector: "feature-component", template: "<div>Feature Component</div>" }) export class FeatureComponent { constructor(private _service: FeatureService, private _compiler: Compiler) { // compiler currently belongs to AppModule (should be FeatureModule) console.log((<any>this._compiler)._ngModule); // outputs function AppModule() { } } public createComponent(component: any): void { this._compiler.compileComponentAsync(component /* , could override module here, but can't get reference */) .then((factory: ComponentFactory<any>) => { // ... }); } } 
+5
source share

All Articles