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

Question

有没有办法根据 angular-cli@1.0.0-beta.16 中的环境变量有条件地更改导入？我正在尝试以一种不需要更改在客户端代码中导入服务的方式进行代码更改的方式来执行此操作，但是当需要时，我可以指定一个构建标志来交换模拟服务。

我尝试使用this post 中的一种模式：

文件结构：

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 错误）。

Answer 1

你完全错了。当您配置 providers

时，Angular 可以使用 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，但在开发中，您将获得模拟，在生产中您将获得真正的服务。

另请参阅：

• How to inject different service based on certain build environment in Angular2

Answer 2

将您的 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