web-dev-qa-db-ja.com

Angular forRootメソッド内の関数を呼び出す

問題は、次のようにforRootメソッド内で関数を呼び出していることです。

app.module.ts

import {environment} from '../environments/environment';

...

@NgModule({
  imports: [
    BrowserModule,
    MyModule.forRoot({
      config: {
        sentryURL: environment.SENTRY_URL <-- This, calls the function
      }
    }),
    HttpClientModule,
    ...
 ]})

environemnt.ts

export function loadJSON(filePath) {
  const json = loadTextFileAjaxSync(filePath, 'application/json');
  return JSON.parse(json);
}

export function loadTextFileAjaxSync(filePath, mimeType) {
  const xmlhttp = new XMLHttpRequest();
  xmlhttp.open('GET', filePath, false);
  if (mimeType != null) {
    if (xmlhttp.overrideMimeType) {
      xmlhttp.overrideMimeType(mimeType);
    }
  }
  xmlhttp.send();
  if (xmlhttp.status === 200) {
    return xmlhttp.responseText;
  } else {
    return null;
  }
}

export const environment = loadJSON('/assets/config.json');

そして設定は次のようになります：

{
  "production": "false",
  "SENTRY_URL": "https://[email protected]/whatever/1"
}

私がaotでビルドを行うと、それは言う：

Src/app/app.module.ts（41,20）のエラー：「AppModule」関数呼び出しのテンプレートコンパイル中のエラーはデコレーターでサポートされていませんが、「loadJSON」が「environment」「environment」呼び出し「loadJSON」で呼び出されました。

何か案は？？

:)

更新されたソリューション：

私の最終的な解決策は、アプリで、Suren Srapyanが言ったように関数ゲッターを使用することです。ライブラリでは、forRootメソッドは次のようになります。

export const OPTIONS = new InjectionToken<string>('OPTIONS');

export interface MyModuleOptions {
  config: {
    sentryURLGetter: () => string | Promise<string>;
  }
}

export function initialize(options: any) {
  console.log('sentryURL', options.config.sentryURLGetter());
  return function () {
  };
}

@NgModule({
  imports: [
    CommonModule
  ]
})
export class MyModule {
  static forRoot(options: MyModuleOptions): ModuleWithProviders {
    return {
      ngModule: MyModule,
      providers: [
        {provide: OPTIONS, useValue: options},
        {
          provide: APP_INITIALIZER,
          useFactory: initialize,
          deps: [OPTIONS],
          multi: true
        }
      ]
    };
  }
}

：D

angularangular-cliangular-moduleangular-library
10
ismaestro

関数呼び出しは@Decoratorsではサポートされていません。または、@NgModule外の値を取得して、その値を使用することもできます。

export function getSentryUrl() {
   return environment.SENTRY_URL;
}

@NgModule({
   imports: [
      BrowserModule,
      MyModule.forRoot({
      config: {
        getSentryURL: getSentryUrl
      }
    }),
    HttpClientModule,
    ...
 ]})
7
Suren Srapyan