it-swarm.com.de

Wie werden Funktionsaufrufe von Angular aot compilieren nicht unterstützt?

Ich teste einen Highcharts Angular2x Wrapper . Anfangs hatte ich keine Probleme mit der Angular CLI (1.6.1) "ng Serve" und der Profiling-Leistung mit Chrome. Dann habe ich versucht, das Compilieren im Voraus zu verwenden, um zu sehen, wie sich dies auf die Leistung auswirkt.

Also mit:

ng serve --aot

Ich erhalte folgende Fehlermeldung:

ERROR in Error during template compile of 'AppModule'
  Function calls are not supported in decorators but 'ChartModule' was called.

Nun, ich weiß, dass aot Factory-Code für Module generiert und irgendwie Templates in VanillaJS "transformiert". Die Dinge werden hier etwas knifflig und ich konnte nicht verstehen, wie ngc Factory-Code für ein Modul generiert, das eine externe Bibliothek erfordert.

Ich habe dieses App.Module.ts erhalten:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ChartModule } from 'angular2-highcharts';

import { AppComponent } from './app.component';

declare var require: any;
export function getHighchartsModule() {
  return  require('highcharts');
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ChartModule.forRoot(getHighchartsModule) // This causes the error
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Meine Package.json-Abhängigkeiten: 

"dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "angular2-highcharts": "^0.5.5",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  }

Meine Fragen sind: Kann ich hier irgendetwas tun, um den genannten Kompilierungsfehler zu vermeiden? Kann jemand erklären, warum dies passiert? (wahlweise)

8
Anis Tissaoui

Erwähnung der Github-Ausgabe hier . Die folgende Lösung hat für mich funktioniert.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

// Angular Highcharts Imports
import {HighchartsStatic} from 'angular2-highcharts/dist/HighchartsService'; 
import { ChartModule } from 'angular2-highcharts';

// Factory Function
export function highchartsFactory() {
  var hc = require('highcharts');
  return hc;
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ChartModule // Import Module Here
  ],
  providers: [ // Provide Service Here
    {
      provide: HighchartsStatic,
      useFactory: highchartsFactory 
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
3
Anis Tissaoui

Dies ist ein Problem mit angular im Allgemeinen. Angular Der Compiler möchte, dass der forRoot -Code vollständig statisch ist.

Beispielsweise kann im folgenden Code bereits die Zuweisung der statischen Variablen mit diesem Fehler einhergehen:

static forRoot(config: MyConfig): ModuleWithProviders {
    MyConfigService.config = config;// This line with cause an error
    return {
      ngModule: HttpTrackerLibModule,
    };
  }

Wenn Sie kein Bibliotheksersteller sind, können Sie nur bibliotheksspezifische Lösungen wie die oben beschriebene ausprobieren. Wenn Sie jedoch eine Bibliothek erstellen, können Sie einen statischen Ansatz wie folgt ausprobieren:

  1. Erstellen Sie ein Injektionstoken:

    export const USER_OPTIONS = new InjectionToken<MyConfig>('USER_OPTIONS');

  2. Stellen Sie das Token in Ihrem Bibliotheksmodul bereit

    static forRoot (config: MyConfig): ModuleWithProviders {

    return {
      ngModule: HttpTrackerLibModule,
      providers: [{
        provide: USER_OPTIONS,
        useValue: config
      }],
    };
    

    }

  3. Verwenden Sie den Token mit DI an einer anderen Stelle:

exportklasse ConfigService {Konstruktor (@Inject (USER_OPTIONS) private _config: MyConfig) {

}}

Stackoverflow-Formatierung ist wie das Beenden von vim, nicht jeder versteht es. Ich gebe auf.

2
dasfdsa

Ich habe das gleiche Problem gesehen. Entfernen Sie den getHighchartsModule-Export aus Ihrem App.Module.ts und legen Sie die exportierte Funktion in einer eigenen Datei ab. Dann importieren Sie es in App.Module.ts.

Ich habe noch nicht herausgefunden, warum das so ist.

0
NoizyCr1cket