web-dev-qa-db-ja.com

angle-cli：環境変数を使用した条件付きインポート

[email protected]の環境変数に基づいてインポートを条件付きで変更する方法はありますか？クライアントコードでサービスをインポートする方法でコードを変更する必要がない方法でそれを実行しようとしていますが、必要に応じて、模擬サービスでスワップするビルドフラグを指定できます。

この投稿 から使ってみたパターンがあります：

ファイル構造：

MyService
    MyServiceMock.ts
    MyServiceReal.ts
    index.ts

そしてindex.tsには、次のものを含めることができます：

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

export const MyService = environment.mock ?
    require('./MyServiceMock').MyServiceMock:
    require('./MyServiceReal').MyServiceReal;

そしてクライアントコードでMyServiceをインポートします：

import MyService from './myservice/index';

ページが読み込まれ、コードをステップ実行するときに依存関係が挿入されているのがわかりますが、Cannot find name 'MyService'の行に沿ってコンパイルエラー（TypeScriptエラーだと思います）があります。

angulartypescriptwebpackangular-cli
10
Daren Keck

あなたはそれについて完全に間違っています。 Angularは、providersを構成するときにfactoriesを使用してこのユースケースを処理できます

providers: [
  Any,
  Dependencies
  {
    provide: MyService, 
    useFactory: (any: Any, dependencies: Dependencies) => {
      if (environment.production) {
        return new MyService(any, dependencies);
      } else {
        return new MockMyService(any, dependencies);
      }
    },
    deps: [ Any, Dependencies ]
]

これで、provide: MyServiceのおかげで、どこにでもMyServiceを注入できますが、開発ではモックを取得し、本番環境では実際のサービスを取得します。

関連項目：

11
Paul Samsotha

MyServiceのインポートを次のように変更します。

import { MyService } from './myservice/index';

周囲の{}は、ファイルから単一のエクスポートをインポートするようにコンパイラーに指示します。次のようにインポートできるようにしたい場合：

import MyService from './myservice/index';

次に、index.tsにデフォルトのエクスポートが必要です。例：

export default MyService;。

TypeScriptモジュールの詳細については、こちらをご覧ください： https://www.typescriptlang.org/docs/handbook/modules.html

0
shusson