Hola, soy nuevo en angular2 y typecript. Estoy cargando componentes dinámicamente y me preguntaba si hay una manera de declarar mis componentes utilizando un servicio en las "declaraciones" y "entryComponents" del módulo.

Utilizando el mecanografiado, puedo lograrlo haciendo lo siguiente:

import { ComponentLoaderService } from './../../services/component-loader.service';

let componentsToLoad = ComponentLoaderService.getComponents();

@NgModule({
  declarations: [ componentsToLoad ],
  entryComponents: [ componentsToLoad ],
})
export class testModule {}

Esto realmente funciona, pero solo si he compilado y el servidor se está ejecutando primero.

Si intento recompilarlo y ejecutarlo, aparece este error constante:

"Se encontró un error al resolver los valores de los símbolos de forma estática. Las llamadas a funciones no son compatibles. Considere reemplazar la función o lambda con una referencia a una función exportada".

Mi otro pensamiento fue, ¿hay alguna forma de colocar la carga de los componentes en la parte "export class testModule {}" para llenar la matriz y luego pasarla a NgModule?

De mi prueba actual no funciona, pero todavía soy nuevo en esto, por lo que podría estar perdiendo algo.

Espero que alguien pueda ayudar. ¡Gracias!

Aquí está el código que crea el error de compilación:

Acabo de hacer una nueva aplicación de prueba.

Luego, en la carpeta de la aplicación de prueba, hice la instalación de npm.

Creé /src/app/services/components-loader.service.ts.

import { Injectable } from '@angular/core';
import { ViewContainerRef, ViewChild, ComponentFactoryResolver } from '@angular/core';

@Injectable()
export class ComponentLoaderService {
    constructor(private componentFactoryResolver: ComponentFactoryResolver){}

    static getComponents(components: any[]): any[] {
        var tmp = Array();

        for (var i = 0; i < components.length; ++i){
            if (components[i].key == 0){
                tmp.push(components[i].component);
            }
        }

        return tmp;
    }

    load(container: ViewContainerRef, components: any[]): void {
        // clear 
        container.clear();

        for (var i = 0; i < components.length; ++i){
            if (components[i].key == 0 || components[i].key == 'site'){
                const childComponent = this.componentFactoryResolver.resolveComponentFactory( components[i].component );

                // at this point we want the "child" component to be rendered into the app.component:
                container.createComponent(childComponent);          
            }            
        }
    }
}

Creé un archivo /src/app/components.ts.

import { TestComponent } from './test.component';

export const mainComponents = [
    { key: 0, component: TestComponent },        
];

Creé un archivo /src/app/test.component.ts.

import { Component } from '@angular/core';

@Component({
  template: `test`,
})
export class TestComponent {}

Modifiqué /src/app/app.module.ts para que se vea así.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { mainComponents } from './components';
import { ComponentLoaderService } from './services/components-loader.service';

let componentsToLoad = ComponentLoaderService.getComponents(mainComponents);

@NgModule({
  declarations: [
    AppComponent,
    componentsToLoad
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [ componentsToLoad ],
})
export class AppModule { }

Cuando compilo usando ng serve, me sale este error:

10% módulos de construcción 2/2 módulos 0 activeError: se encontró un error al resolver los valores de los símbolos de forma estática. Las llamadas a funciones no son compatibles. Considere reemplazar la función o lambda con una referencia a una función exportada, resolviendo el símbolo AppModule en D: /angularjs/test-app/src/app/app.module.ts, resolviendo el símbolo AppModule en D: / angularjs / test-app / src / app / app.module.ts