web-dev-qa-db-fra.com

Comment se débarrasser des appels de fonction ne sont pas pris en charge par les décorateurs dans la compilation angulaire?

Je teste un Highcharts Angular2x Wrapper . Au début, je n’éprouvais aucun problème à utiliser Angular CLI (1.6.1) "ng serve" et à profiler les performances avec Chrome. Ensuite, j’ai essayé d’utiliser la compilation en avance pour voir en quoi cela affectait les performances.

Donc, en utilisant:

ng serve --aot

Je reçois l'erreur suivante:

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

Maintenant, je sais qu’environ génère du code usine pour les modules et en quelque sorte "transforme" les modèles en VanillaJS, les choses deviennent un peu difficiles ici et je ne comprenais pas comment ngc va générer du code usine pour un module nécessitant une bibliothèque externe.

J'ai eu cette App.Module.ts:

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

Mes dépendances Package.json: 

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

Mes questions sont les suivantes: Y at-il quelque chose que je puisse faire ici pour éviter l’erreur de compilation mentionnée? Quelqu'un peut-il expliquer pourquoi cela se produit-il? (optionnel)

javascriptangulartypescripthighchartsangular-cli
8
Anis Tissaoui

En mentionnant le problème Github ici . La solution suivante a fonctionné pour moi.

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

J'ai rencontré le même problème. Essayez de supprimer l'exportation getHighchartsModule de votre App.Module.ts et de placer la fonction exportée dans son propre fichier. Puis importez-le dans App.Module.ts.

Je n'ai pas compris pourquoi cela se produit encore.

0
NoizyCr1cket