私がテストしていHighcharts Angular2xラッパーを。最初は、Angular CLI（1.6.1）の「ngserve」を使用して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"
}
私の質問は次のとおりです。前述のコンパイルエラーを回避するためにここでできることはありますか？なぜこれが起こるのか誰かが説明できますか？（オプション）
ここで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 { }
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加