Vereinfachen Erklärungen in Angular

Question

Bevor mit kantigem 2 konnte ich mit, dass meine Komponenten importieren/exportieren:

import * as containersComponent from './containers' 
import * as uiComponent from './ui' 
import * as allDirectives from './directives' 

export function mapValuesToArray(obj){ return Object.keys(obj).map(key => obj[key]) } 
export const containers = [...mapValuesToArray(containersComponent)] 
export const ui = [...mapValuesToArray(uiComponent)] 
export const directives = [...mapValuesToArray(allDirectives)] 

Dann habe ich sie wie folgt erklärt:

@NgModule({ 
    declarations: [ AppComponent, containers, ui, directives ], 
    ... 
}) 

Jetzt, da ich bewegt zu Angular 4 Ich bekomme diesen Fehler:

ERROR in Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function 

Könnte mir bitte jemand helfen?

EDIT die Nachfrage nach mehr Details von andrei-Macarie

Der Fehler I bezieht sich auf mapValuesToArray(obj) auf den Anruf erhalten zu erfüllen. Angular 4 akzeptiert nicht, dass ich eine Funktion wie diese nenne. Auch wenn ich die Funktion auf andere Weise verschiebe, zB wenn ich die Object.Key(obj) Funktion direkt in der const anrufe, habe ich den gleichen Fehler.

Zur Veranschaulichung arbeitete diese Funktion in Angular 2 für die Anbieter:

@NgModule({ 
    ... 
    providers: [ 
     { 
      provide: APP_INITIALIZER, 
      useFactory: (config: LanguagesService) =>() => config.load(), 
      deps: [LanguagesService], 
      multi: true 
     }] 
    ... 
}) 

In Angular 4 habe ich die gleichen Fehler, dass das Protokoll ich auf der Oberseite posten, aber für den Aufruf von config.load . Um das zu vermeiden, habe ich dies:

export function languagesLoader(config: LanguagesService) { 
    return() => config.load() 
} 

@NgModule({ 
    providers: [ 
    ... 
    { 
     provide: APP_INITIALIZER, 
     useFactory: languagesLoader, 
     deps: [LanguagesService], 
     multi: true 
    }] 
    ... 
}) 

Ich habe versucht, es für ein aktuelles Problem zu tun, es funktioniert nicht. Mein Problem besteht also darin, Funktionen wie diese für Deklarationen aufzurufen. Aber vielleicht gibt es auch einen besseren Weg?

Answer 1

Dies sollte man als documentation Staaten arbeiten:

interface NgModule { 
providers : Provider[] 
declarations : Array<Type<any>|any[]> 
imports : Array<Type<any>|ModuleWithProviders|any[]> 
exports : Array<Type<any>|any[]> 
entryComponents : Array<Type<any>|any[]> 
bootstrap : Array<Type<any>|any[]> 
schemas : Array<SchemaMetadata|any[]> 
id : string 
} 

Auch auf der Suche durch das Changelog nichts anderes als bemerkten sie in diesem code das Array Abflachung.

Sie können auch flach und dedupe das Array selbst durch ihren Code und sehen, ob das funktioniert:

function flattenArray(tree: any[], out: Array<any> = []): Array<any> { 
    if (tree) { 
    for (let i = 0; i < tree.length; i++) { 
     const item = resolveForwardRef(tree[i]); 
     if (Array.isArray(item)) { 
     flattenArray(item, out); 
     } else { 
     out.push(item); 
     } 
    } 
    } 
    return out; 
} 

function dedupeArray(array: any[]): Array<any> { 
    if (array) { 
    return Array.from(new Set(array)); 
    } 
    return []; 
} 

function flattenAndDedupeArray(tree: any[]): Array<any> { 
    return dedupeArray(flattenArray(tree)); 
} 

Also nur flattenAndDedupeArray(yourDeclarations) nennen.

HINWEIS: Statt mapValuesToArray(obj) verwenden Sie können Object.values(obj)