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可以使用工厂来处理此用例

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，但在开发中，你将获得模拟，在生产中你将获得真正的服务。

另见：

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

angular-cli：使用环境变量

2 个答案: