根据环境有条件地在Angular中加载一组不同的工厂

时间:2017-04-18 06:18:31

标签: javascript cordova angular typescript

我正在开发一个Angular应用程序,它有两种不同类型的后端;通过普通网页加载应用程序时使用的一个,以及在Cordova应用程序中使用的一个。这样做的目的是让应用程序的其余部分知道它获取服务,并且只有服务特定于通过AJAX在客户端或服务器上存储数据。

显然我可以使用符号链接或者我在加载之前更改的东西来做这个,但我真的很想设置它,这样我就可以使用不同的环境配置并让它加载其他服务集。

每个服务都有两个版本,一个用于“http后端”,另一个用于“移动后端”。两个版本都将扩展相同的抽象基类或实现相同的接口。

也许最重要的是,应用程序不应该为未使用的服务集加载代码,因此只需让代码决定返回哪个服务就不够了。

有没有好办法呢?

1 个答案:

答案 0 :(得分:2)

这样的事情应该有效:

// service used in components/other services
export class DataService<T> {
  constructor(
    private connectionService: ConnectionService,
    private crudService: CrudService,
    private storageService: StorageService,
    private store: Store<AppState>) {}
}

然后您可以在模块级别提供不同的实现:

const FirebaseProviders = [
  { provide: AuthService, useClass: FirebaseAuthService },
  { provide: ConnectionService, useClass: FirebaseConnectionService },
  { provide: CrudService, useClass: FirebaseCrudService },
  { provide: ErrorHandler, useClass: FirebaseErrorHandler, deps: [DataService, Store] },
  { provide: StorageService, useClass: FirebaseStorageService },
];

const MockProviders = [
  { provide: AuthService, useClass: MockAuthService },
  { provide: ConnectionService, useClass: MockConnectionService },
  { provide: CrudService, useClass: MockCrudService },
  { provide: ErrorHandler, useClass: AppErrorHandler, deps: [Store] },
  { provide: StorageService, useClass: StorageService },
];

const CoreProviders = environment.production ? FirebaseProviders : MockProviders;

@NgModule({
  ...
  providers: [
    ...CoreProviders,
    DataService
  ]
})
export class CoreModule {}

确保列出

中的所有依赖项
{ provide: <ServiceA>, useClass: <ServiceB>, deps: [<IMPORTANT for AoT>] }

或者你会得到令人讨厌(难以调试)的AoT错误。