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

Question

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

我尝试使用 :

中的一种模式

File structure:

MyService
    MyServiceMock.ts
    MyServiceReal.ts
    index.ts

And in your index.ts, you can have the following:

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

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

And in your client code, import MyService:

import MyService from './myservice/index';

页面加载，我可以看到在单步执行代码时注入了依赖项，但是存在编译错误（我认为是 TypeScript 错误）Cannot find name 'MyService'.

Answer 1

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

Answer 2

你的做法完全错了。当您配置 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，但在开发中，您将获得模拟，而在生产中，您将获得真正的服务。

另请参阅：

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

angular-cli: Conditional Imports using an environment variable

typescript

webpack

angular-cli

angular