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

angular cli:使用环境变量的条件导入,angular,typescript,webpack,angular-cli,Angular,Typescript,Webpack,Angular Cli,是否有一种方法可以根据环境变量在角度上有条件地更改导入-cli@1.0.0-beta.16?我试图以一种不需要在如何在客户端代码中导入服务方面进行代码更改的方式来实现这一点,但在需要时,我可以指定一个构建标志以在模拟服务中进行交换 我尝试使用以下模式: 文件结构: 在index.ts中,您可以有以下内容: 在客户端代码中,导入MyService: 页面加载后,我可以看到在单步执行代码时注入了依赖项,但是有编译错误(我相信是TypeScript错误),原因是找不到名称“MyService”将MyS

是否有一种方法可以根据环境变量在角度上有条件地更改导入-cli@1.0.0-beta.16?我试图以一种不需要在如何在客户端代码中导入服务方面进行代码更改的方式来实现这一点,但在需要时,我可以指定一个构建标志以在模拟服务中进行交换

我尝试使用以下模式:

文件结构:

在index.ts中,您可以有以下内容:

在客户端代码中,导入MyService:


页面加载后,我可以看到在单步执行代码时注入了依赖项,但是有编译错误(我相信是TypeScript错误),原因是
找不到名称“MyService”

将MyService导入更改为:

从“/MyService/index”导入{MyService}

周围的
{}
将告诉编译器从文件导入单个导出。如果您希望能够像这样导入:

从“./MyService/index”导入MyService

然后您必须在
index.ts中有一个默认导出,例如:

导出默认MyService


关于TypeScript模块的更多信息可以在这里找到:

你完全错了。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
,但是在开发中,你会得到模拟,在生产中你会得到真正的服务

另请参见:


谢谢你的建议。我仍然遇到同样的错误,因为
找不到名称“MyService”
。还可能需要注意的是:VS代码中对typescript的静态分析会回显相同的错误,表明导入正在解析,但当尝试在构造函数中进行依赖项注入时,它并没有解析名称。这种方法工作正常,但有一个缺点,模拟服务被包括在生产包中当以这种方式创建提供程序时,我如何准确地注入它?通常我会从服务所在的文件中导入,但在这种情况下,它可能是两个文件中的一个。我如何告诉Angular我希望从提供的factory功能中获得提供者?@valvalorin通过令牌(
provide
),即
MyService
)。这就是您注入的内容。我需要明确地知道以
import
开头的行是什么样子的。@Enargit在模块中列出模拟服务和实际服务,然后在imports部分有条件地加载该模块。再看看,我是从哪里得到这个答案的:
import { environment} from '../environments/environment';

export const MyService = environment.mock ?
    require('./MyServiceMock').MyServiceMock:
    require('./MyServiceReal').MyServiceReal;
import MyService from './myservice/index';
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 ]
]