web-dev-qa-db-ja.com

関数呼び出しを取り除く方法は、Angular aotコンパイルのデコレータではサポートされていませんか？

Highcharts Angular2x Wrapper をテストしています。最初は、Angular CLI（1.6.1） "ng serve"を使用してChromeでパフォーマンスをプロファイリングしました。その後、事前コンパイルを使用してその方法を確認しました。パフォーマンスに影響します。

だから、使用して：

ng serve --aot

次のエラーが表示されます。

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

さて、aotがモジュールのファクトリコードを生成し、テンプレートをVanillaJSに何らかの形で「変換」することを知っています。ここでは少し複雑になり、ngcが外部ライブラリを必要とするモジュールのファクトリコードを生成する方法を理解できませんでした。

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

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

私の質問は次のとおりです。上記のコンパイルエラーを回避するためにここでできることはありますか？なぜこれが起こるのか誰でも説明できますか？ （オプション）

javascriptangulartypescripthighchartsangular-cli
12
Anis Tissaoui

Githubの問題について言及する こちら 。次のソリューションは私のために働いた。

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 { }
5
Anis Tissaoui

これはangular一般的には問題です。AngularコンパイラはforRootコードが完全に静的であることを望んでいます。

例として、次のコードでは、静的変数の割り当てでもこのエラーが発生します。

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

あなたがnotライブラリ作成者である場合、上記のようなライブラリ固有のソリューションを試す以外にできることはありません。ただし、ライブラリの作成者であれば、次のような静的なアプローチを試すことができます。

  1. インジェクショントークンを作成します。

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

  2. ライブラリモジュールでトークンを提供する

    static forRoot（config：MyConfig）：ModuleWithProviders {

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

    }

  3. 他の場所でDIを使用してトークンを使用します。

エクスポートクラスConfigService {constructor（@Inject（USER_OPTIONS）private _config：MyConfig）{

}}

Stackoverflowのフォーマットはvimを終了するようなもので、誰もがそれを取得できるわけではありません。 私はあきらめます

2
dasfdsa

これと同じ問題が発生しました。 App.Module.tsからgetHighchartsModuleエクスポートを削除して、エクスポートされた関数を独自のファイルに入れてみてください。次に、App.Module.tsにインポートします。

なぜこれが起こるのかはまだわかりません。

0
NoizyCr1cket