angular-cli:使用环境变量的条件导入

Question

有没有办法根据angular-cli@1.0.0-beta.16中的环境变量有条件地更改导入？我试图以一种不需要在客户端代码中导入服务的代码更改的方式来实现它,但是在需要时我可以指定一个构建标志来交换模拟服务.

我试过在这篇文章中使用了一种模式:

文件结构:

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';

页面加载,我可以看到在单步执行代码时注入依赖项,但是编译错误(我认为是TypeScript错误)沿着这一行Cannot find name 'MyService'.

Answer 1

你完全错了.Angular可以在配置时使用工厂来处理这个用例providers

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 ]
]

现在你可以MyService随处注入provide: MyService,但是在开发中,你将获得模拟,在生产中你将获得真正的服务.

也可以看看:

• 如何在Angular2中基于特定的构建环境注入不同的服务