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

Question

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

显然，我可以使用符号链接(symbolic link)或我在加载前更改的内容来执行此操作，但我真的很想设置它，以便我可以使用不同的环境配置并让它加载另一组服务。

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

也许最重要的是，应用程序不应加载未使用的服务集的代码，因此仅让代码决定返回哪个服务是不够的。

有什么好的方法吗？

Answer 1

像这样的东西应该可以工作:

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