लोड NgModule entryComponents गतिशील का उपयोग कर सेवा

Question

हाय मैं angular2 और टाइपप्रति के लिए नया हूँ। मैं गतिशील रूप से घटकों को लोड कर रहा हूं और मैं सोच रहा था कि मॉड्यूल की "घोषणाओं" और "एंट्री कॉम्पोनेंट्स" में किसी सेवा का उपयोग करके मेरे घटकों को घोषित करने का कोई तरीका है या नहीं।

टाइपप्रति का उपयोग करना, मैं निम्न कार्य करके इसे हासिल करने में सक्षम हूँ:

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

 
let componentsToLoad = ComponentLoaderService.getComponents(); 
 

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

यह वास्तव में काम करता है, लेकिन केवल तभी जब मैं तैयार की है और सर्वर पहले से चल रहा है।

हैं, तो मैं पुन: संयोजित और इसे चलाने के लिए प्रयास करते हैं, मैं इस निरंतर त्रुटि मिलती है:।

"त्रुटि स्थिर प्रतीक मूल्यों को हल करने का सामना करना पड़ा समारोह कॉल समर्थित नहीं हैं एक निर्यात के लिए एक संदर्भ के साथ समारोह या लैम्ब्डा की जगह पर विचार करें। फ़ंक्शन, "

मेरा दूसरा विचार था, क्या सरणी को भरने के लिए" निर्यात श्रेणी परीक्षण मॉड्यूल {} "भाग में घटकों को लोड करने का कोई तरीका है और फिर इसे NgModule पर पास कर दिया गया है?

मेरे वर्तमान परीक्षण से यह काम नहीं करता है, लेकिन मैं अभी भी इसके लिए नया हूं इसलिए मुझे कुछ याद आ रहा है।

आशा किसी की मदद कर सकते हैं। धन्यवाद!

मैं सिर्फ नए परीक्षण-ऐप एनजी था:

यहाँ कोड है कि संकलन त्रुटि बनाता है।

तब मैं NPM स्थापित किया परीक्षण एप्लिकेशन फ़ोल्डर में

।

मैंने /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);   
      }    
     } 
    } 
} 

मैं एक फ़ाइल /src/app/components.ts बनाया।

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

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

मैं एक फ़ाइल /src/app/test.component.ts बनाया।

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

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

मैंने इस तरह दिखने के लिए /src/app/app.module.ts को संशोधित किया।

10% building modules 2/2 modules 0 activeError: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in D:/angularjs/test-app/src/app/app.module.ts, resolving symbol AppModule in D:/angularjs/test-app/src/app/app.module.ts

Answer 1

@NgModule({ 
    declarations: [], 
    exports: [] 
}) 
export class testModule { 
    static withComponents(components: any[]) { 
     return { 
      ngModule: testModule, 
      providers: [ 
       {provide: ANALYZE_FOR_ENTRY_COMPONENTS, useValue: components, multi: true} 
      ] 
     } 
    } 
} 

अन्य मॉड्यूल:

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 { } 

जब मैं का उपयोग कर संकलन एनजी की सेवा, मैं इस त्रुटि मिलती है

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

let componentsToLoad = ComponentLoaderService.getComponents(); 

@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     testModule.withComponents([ 
      ...componentsToLoad 
     ]) 
    ], 
    declarations: [ 
     AppComponent, 
     ...componentsToLoad 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
} 

यहाँ ANALYZE_FOR_ENTRY_COMPONENTS का इस्तेमाल कर रही करके, आप करने में सक्षम हैं NgModule.entryComponents प्रविष्टि गतिशील रूप से कई घटकों को जोड़ें।